Buttons

Buttons in LESS Boilerplate are based on both Twitter Bootstrap and Calipso's default buttons. Buttons can be in any of two recommended forms:

1. Anchor tags:

   							<a class = "btn" href = "/url">Link Button</a>
   						

2. Button tags:

   							<button>HTML5 Button</button>
   						

Using the button tag, you don't need to worry about adding a class (you can customize this, of course).

Icons with Buttons

Since we're using icomoon , we have the flexibility to put many buttons with icons:

All we need to do to get icons working is to place an i element within the button:

					<button>Text here <i class
						 = "icon-icon-of-my-choice"></i></button>
				

Grid System

LESS Boilerplate uses a variation of Andy Taylor's newly-retired grid system. The framework has been updated to allow for generation of columns and rows, all based on the user's configuration.

To use the grid system, you will need to understand how rows and columns work. All content that you want to space out needs to first be placed in a row. To do this, all we need to do is assign the class row to any element. For example:

							<div class = "row">{content goes here}</div>
						

Next, any elements that you want to separate in columns need to be assigned a column class. By default, the grid system included starts out with 12 columns. So to have two columns (or to divide the screen in two horizontal parts), we would assign the elements each the class of sixcol. This is because 12 / 6 = 2:

Of course, you can customize your grid system to have however many columns you want, and even the class names. For example, you might want classes to have the span-12 syntax like in Bootstrap. To edit the grid system, simply change any of the variables in the variables.less file:

						
							/*Grid*/
							@num-cols: 12;
							@rowWidth: 100%;
							@container-lateral-padding: @em;
							@col-margin-right: 3.8%;
							@col-unit: ((@rowWidth + @col-margin-right) / @num-cols);
							@col-identifier: "col";

							@col-name-1: "one";
							@col-name-2: "two";
							@col-name-3: "three";
							@col-name-4: "four";
							@col-name-5: "five";
							@col-name-6: "six";
							@col-name-7: "seven";
							@col-name-8: "eight";
							@col-name-9: "nine";
							@col-name-10: "ten";
							@col-name-11: "eleven";
							@col-name-12: "twelve";
							@col-name-13: "thirteen";
							@col-name-14: "fourteen";
							@col-name-15: "fifteen";
							@col-name-16: "sixteen";
							@col-name-17: "seventeen";
							@col-name-18: "eighteen";
							@col-name-19: "nineteen";
							@col-name-20: "twenty";
							@col-name-21: "twentyone";
							@col-name-22: "twentytwo";
							@col-name-23: "twentythree";
							@col-name-24: "twentyfour";

							@col-identifier-named-numbers: false; //example(true): 3col; example(false): col3

							@column-selector-number-at-end: false; //example(true): threecol; example(false): colthree
						
					

Boxes

You've already seen them, but boxes offer a great way to separate your content. The most obvious application is an aside element.

						<aside class = "box"><p>My Content Goes here</p></aside>
					

Output:

Boxes are, by default, rounded. You can configure all of this yourself to better suit your client.

Responsive Design

While it is true that this framework uses a "one-size-fits-all" scheme by default, it's up to you as the developer to use any media queries as necessary. That's why you will find included, a set of all possible media queries, from iPhone to Android devices. The media queries are all empty except for the one set to media query once the browser is smaller than the container size.

Helpers

LESS Boilerplate comes with a set of useful helper classes to help you quickly change the appearance of elements: