Open Source RDBMS - Seamless, Scalable, Stable and Free

한국어 | Login |Register

Current Events
Join our developers event to win one of the valuable prizes!
posted 2 years ago
viewed 22671 times
Share this article

Overview of Bootstrap from Twitter

twitter_bootstrap.jpg

Update: Bootstrap 2.1.0 has been released yesterday on August 20, 2012. Check out their official blog for release notes.

Bootstrap is a front-end toolkit open sourced by Twitter which provides flexible HTML, CSS, and JavaScript-based design templates, a variety of UI components and interactions for building a beautiful website. In this article I will provide an overview of Bootstrap, describe its characteristics, and will show how to start building websites with it.

Bootstrap from Twitter

Developing a Web UI looks easy; however, so many developers encounter a number of difficulties when trying to develop it. Different from general UI development which requires a single client environment, Web UI development requires Cross Browsing that satisfies compatibility among a variety of browser environments.

There are five browsers that are mainly used in PCs - Internet Explorer, Firefox, Chrome, Safari and Opera - and additional work is necessary depending on the version and the operating system. In addition, we need to consider the current mobile environment that has a variety of screen sizes, such as smartphone and tablet PC, and the browsers specialized for each device type.

These various and complex browser environments make it difficult to process Cross Browsing for the small- and mid-size Web sites. Bootstrap is the front-end toolkit from Twitter which tries to clear this difficulty and provide a start point that allows developers to quickly and easily implement a flexible web site.

Bootstrap is an open source front-end toolkit developed by Mark Otto, a Twitter UI designer, and Jacob Thornton, a Twitter developer. As its meaning "to start up a system by turning on the power of a computer or pressing a reset key," Bootstrap is a starting point for building websites which provides flexible HTML, CSS and JavaScript-based design templates, variety of frequently-used UI components and interactions.

Grid System

Grid is a basic element for layout design. Generally, the screen is split by using the <div> tag and CSS to place elements on the webpage layout. Popular CSS frameworks that standardize screen split and provide a grid layout system are Blueprint, 960 grid and YUI CSS grids.

Bootstrap also provides its own grid layout system. The grid system of Bootstrap consists of 12-column grid and there are two versions: default and fluid. In addition, it has four design patterns for a variety of screen sizes. The patterns are linked to the responsive design to be discussed later.

Default Grid System

The default grid system utilizes a 12-column grid that renders out at the width of 940 pixels.

A row is expressed by using row and a column is expressed by using span*. The span* class can be span1-12.

The space between columns is 20 pixels and the width of the span1 class is 60 pixels. As the number of the span* class increases by one, the width increases by 80 pixels, so the width of the span12 class is 940 pixels.

figure_1.png

Figure 1. 12-column Grid System.

The markup for the third row in Figure 1 is as shown below, expressed as 300 pixels + 20 pixels + 620 pixels (total 940 pixels) on the screen.

 

<div class="row">
    <div class="span4">…</div>
    <div class="span8">…</div>
</div>

 

Fluid Grid System

The fluid grid system uses percentage for column widths instead of fixed pixels. To use the fluid grid system, make any row fluid simply by changing to row-fluid.

 

<div class="row-fluid">
    <div class="span4">…</div>
    <div class="span8">…</div>
</div>

 

Offsetting Columns

Add the offset* class to a column to offset the column to the right. However, offsetting columns is available for the default grid system only.

figure_2.png

Figure 2. Offsetting Columns

In Figure 2, the markup of the first row can be written as follows. The second row <div> will be offset to right as much as four-grid width (offset4).

 

 

<div class="row">
    <div class="span4">…</div>
    <div class="span4 offset4">…</div>
</div>

 

 

 

Nesting Columns

To nest your content as shown in Figure 3, just add a new <div> tag containing row and set of span* columns within an existing .span* column.

figure_3.png

Figure 3. Nesting Columns

For the default grid, the sum of nested rows should be the number of columns of its parents.

 

 

<div class="row">
    <div class="span6">
    Level 1 of column
        <div class="row">
            <div class="span3">Level 2</div>
            <div class="span3">Level 2</div>
        </div>
    </div>
</div>

 

 

 

For nesting with a fluid grid, the sum of nested rows should be 12, not the parent column.

 

 

<div class="row-fluid">
    <div class="span6">
    Level 1 of column
        <div class="row-fluid">
            <div class="span6">Level 2</div>
            <div class="span6">Level 2</div>
        </div>
    </div>
</div>

 

 

 

Responsive Design

Responsive Design requires to design the layout of a Web page using the CSS3 media queries in a way so that the layout automatically adapts to the screen size and resolution of various devices such as smartphones, PC, and tablet PC.

Bootstrap supports a flexible screen layout with its grid system and Responsive Design. The size of the grid is changed according to the screen size as shown in the following table.

Table 1. Changed Grid Size by Device.

Label

Layout width

Column width

Gutter width

Smartphones

480 pixels and lower

Fluid columns, no fixed widths

Portrait tablet PCs

767 pixels and lower

Fluid columns, no fixed widths

Landscape tablet PCs

768 pixels and higher

42 pixels

20 pixels

Default

980 pixels and higher

60 pixels

20 pixels

Wide-screen monitor

1200 pixels and higher

70 pixels

30 pixels

The following figure shows the changed layouts with responsive design according to the screen size.

figure_4.png

Figure 4. Responsive Design by Screen Size.

The CSS that makes media queries responsive to the device size is as follows.

 

// Landscape phones and down
@media (max-width: 480px) { ... }

// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }

// Large desktop
@media (min-width: 1200px) { ... }

 

In addition, this CSS includes a selector as a utility that displays the optimized contents on the device.

Table 2. Responsive CSS Classes by Device.

Class

Phones

480 pixels and lower

Tablet PCs

767 pixels and lower

Desktops

768 pixels and higher

.visible-phone

Visible

Hidden

Hidden

.visible-tablet

Hidden

Visible

Hidden

.visible-desktop

Hidden

Hidden

Visible

.hidden-phone

Hidden

Visible

Visible

.hidden-tablet

Visible

Hidden

Visible

.hidden-desktop

Visible

Visible

Hidden

CSS with a Clean and Organized Look

Bootstrap provides buttons and a variety of styles offering a clean and organized look with the default CSS.

The following table shows the default button designs of Bootstrap.

Table 3. CSS Class by Button Type.

Button

class=""

Description

button_default.png

btn

Gray default button with gradation

button_primary.png

btn btn-primary

Button indicating something that needs to be visually highlighted or specialized

button_info.png

btn btn-info

Button that can replace the default button

button_success.png

btn btn-success

Button indicating a successful or positive behavior

button_warning.png

btn btn-warning

Warning button

button_danger.png

btn btn-danger

Button indicating danger or a negative effect

button_inverse.png

btn btn-inverse

Dark gray button that can be used generally without any special meaning

The following table shows the default form designs of Bootstrap.

figure_5.png

Figure 5. CSS Class for Form.

Initially, Bootstrap did not support Internet Explorer. However, it has been changed to be compatible with Internet Explorer 7 and above. Therefore, form design for Internet Explorer is not identical according to the version. A minor difference may be seen according to CSS support, such as gradation and rounded border. However, the overall layout and colors remain the same.

figure_6.png

Figure 6. Comparison of Examples of Expressing Form Design in Internet Explorer.

CSS Reset uses Nicolas Gallagher's normalize.css and UI icon image uses a set of icons provided by Glyphicons. The icon set is a single image in which the CSS Sprite technique is used.

figure_7.png

Figure 7. Glyphicons Icon Set.

The following is an example of a UI component where the icon set is applied.

figure_8.png

Figure 8. UI Component with Icon Set.

Bootstrap CSS is written in LESS so it is easy to modify and reproduce a theme. This will be discussed later.

UI Component and jQuery Plug-in

There are UI patterns that are frequently used for producing webpages. UI components refers to a bundle of markup, CSS and JavaScript for easy pattern reuse.

Bootstrap has a default CSS that provides a variety of easy-to-use UI components. Some components that require dynamic interaction can be controlled by jQuery plug-in type JavaScript.

A component that uses the default CSS has the button group, dropdown list, navigation, tab, Move Page button, thumbnail layout, warning display and close icon. For a more detailed component list and examples, see http://twitter.github.com/bootstrap/components.html.

Components that control the interaction by using the jQuery plug-in are modal layer, dropdown, toggle tap and tooltip. For a more detailed component list and examples, see http://twitter.github.com/bootstrap/javascript.html.

 

Note:

NHN has open sourced UIO Factory, which provides developers a static UI pattern set, as well as Jindo framework-based Jindo Component which provides components for dynamic UI.

 

LESS

Different from general programming language, CSS has no inheritance or variable. Therefore, developers should modify the code when they need to modify just the screen height. It is quite cumbersome to write and manage CSS. To solve this problem, the CSS preprocessors have been developed.

CSS preprocessors have self-defined syntax by expanding the existing CSS syntax. The expanded syntax allows for describing variables, mixin, inheritance, operation, and function, and creating the final CSS that is compatible with the browser by compiling the code written with the expanded CSS. Some people have been inconvenienced by not having dynamic and object-oriented concept from CSS3.

The most popular CSS preprocessors are LESS, Sass and Stylus, and the syntax and functions are similar. Bootstrap uses LESS as its CSS preprocessor.

Even though it has significant benefits, most domestic sites have not applied the CSS preprocessors so far. As well as the inconvenience of compiling, in most cases, homepage design has been outsourced just for one-time so the existing CSS has not been reused and there are not many professionals who can create well-structured markup and CSS. In foreign countries, after releasing Bootstrap on Github, an active movement for applying CSS preprocessors is made and many developers started to create projects for which CSS preprocessors are changed to Sass or Stylus instead of LESS.

Let's discuss LESS in detail.

LESS Syntax

LESS syntax uses a syntax that expands the functions only on the standard CSS syntax.

Variable Declaration

To declare a variable, use the @ symbol.

 

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;

body {
  color: @mainColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

 

Mixin Function

You can create a mixin function similar to the class selector as shown below.

 

/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}

.generic-error {
padding: 20px;
margin: 4px;
.error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

 

Inheritance

LESS defines the mixin function as a class selector. Therefore, the general class selector can be used as a mixin function so that inheritance can be expressed as shown below.

 

.block {
margin: 10px 5px;
padding: 2px;
}

p {
.block; /* Inherit styles from '.block' */
border: 1px solid #EEE;
}
ul, ol {
.block; /* Inherit styles from '.block' */
color: #333;
text-transform: uppercase;
}

 

Operator

A simple operator can be used for the operable attributes as shown below.

 

body {
margin: (14px/2);
top: 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}

 

Nested Selector

Nested selector is expressed as shown below.

 

section {
margin: 10px;

nav {
height: 25px;

a {
color: #0982C1;

&:hover {
text-decoration: underline;
}
}
}
}

 

When compiling a nested selector, the following CSS is made.

 

section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}

 

Bootstrap LESS

There are a lot of pre-defined LESS variables and mixins related to the layouts and components. By modifying the predefined variables and mixins, it is simple to change and create a variety of themes.

The following is an example of LESS variables and values defined by Bootstrap by default. For more details, see http://twitter.github.com/bootstrap/less.html#variables.

figure_9.png

Figure 9. A Variety of LESS Variables of Bootstrap.

The following is an example defined in Bootstrap by default. For more details, see http://twitter.github.com/bootstrap/less.html#mixins.

figure_11.png

Figure 10. A Variety of LESS Mixins of Bootstrap.

LESS Compiling

LESS compiling is classified into client side and server side.

For client side compiling, the less.js file is saved in the Web server and linked as shown below.

 

 

<link rel="stylesheet/less" type="texr/css" href="bootstrap.less">
<script type="text/javascript" src="less.js"></script>

 

For server side compiling, download the compiler from the node.js package manager and then install and use it.

 

$ npm install –g less
$ lessc bootstrap.less > bootstrap.css

 

Customizing

The Bootstrap homepage allows developers to customize a set of CSS and jQuery plug-in by changing the variables applied to LESS and selecting the desired CSS and jQuery plug-in. You can select the components and jQuery plug-ins and download the desired CSS and jQuery JavaScript.

figure_12.png

Figure 11. Bootstrap Customizing Page.

Even though there is no LESS compiler, you can change the values applied to the LESS variables as desired on the Customizing Page.

figure_13.png

Figure 12. LESS Variable Value Customizing.

Select the components and jQuery plug-ins, modify the LESS variable values, and then click the Download button to download the .zip file compressing the selected CSS and JavaScript.

figure_14.png

Figure 13. Customizing Result Download.

As well as the customizing page, you can use a variety of themes from http://bootswatch.com/, http://wrapbootstrap.com/, and http://stylebootstrap.info/.

Conclusion

If we take a deeper look into Bootstrap from Twitter, we can see very little new technology. There seems to be nothing special. Nevertheless, Bootstrap is very popular which is proved by the number of watches and forks of Bootstrap project on Github. Also there are a variety of Bootstrap-related sites. There are a large number of well designed components accompanied by a set of jQuery plugins. It is a great framework if you want to build beautiful Web sites quickly.

By Kyungil Park, Senior Software Engineer, NHN Platform Ajax Team, NHN Corporation.

About the author:

I develop the JavaScript CI server and a variety of tools in NHN Platform Ajax Team. I like everything related to development. Dreaming of being a gray-haired developer...

References

 

  1. Bootstrap, from Twitter: http://twitter.github.com/bootstrap/
  2. Stepping Out Width Bootstrap from Twitter: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/
  3. CSS3 Media Queries: http://www.w3.org/TR/css3-mediaqueries/
  4. Sass vs. LESS vs. Stylus: http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
  5. 20 Resources for Bootstrap Lovers: http://designshack.net/articles/css/20-awesome-resources-for-twitter-bootstrap-lovers/


comments powered by Disqus