Web Style Guide

HTML Template

HTML5 doctype and viewport scaling for responsive design.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

LESS

What is it and how does it help me?

LESS (http://lesscss.org/) is a preprocessor for CSS. It alows you to......


 

Variables

Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

Below is just a high level overview. There are a lot of things possible within each of these high level components (variables, arguments, scope, functions.....). To view the docs and become more familiar with the possibilities please read through the documentation.

Less

@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}

Compiled CSS

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

Mixins

Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.

Less

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Compiled CSS

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Nested Rules

Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

Less

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Compiled CSS

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Functions & Operations

Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.

Less

@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

Compiled CSS

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

Mobile First

The mobile first approach to web design is a new and important one. Mobile first design came about when responsive design really started to take off. Mobile first is the process of designing for the smallest screen first and adding features and styles as the screen gets larger as opposed to adding all the bells and whistles and trying to remove them from smallers screens.

Working this way helps to promote a few ideas.

  • Content: Designing the mobile site/layout first gives you the oportunity to really evaluate the content. Good, clean and to-the-point content is vital to reach the audence on all devices and help with search engines.
  • Features: Do we really need that feature? If you can avoid the feature bloat on the mobile devices does it really need to be on the desktop version. Designing mobile first will help in making the interface simple and easy to use.

Mobile first does take a little bit of getting used to and a lot of testing. It relies heavily on media queries (@media) to help in adjustements of the UI from screen size to secreen size.

Each component of the site should be treated as an individual. There is no set px widths to create a good design and have it magically work on different screen sizes. You must work and resize what your working on untill it does not look right or breaks and that is where you set your break points.

Let's take a look at an examples from the .less file that styles this style guide. This is the header, it contains the logo on the left and the "Web Style Guide" text on the right.

header {
  .container;
  .clearfix();
  .column-wrapper();
  padding: 40px 0;
	 
  .logo {
	.column(12);
	text-align: center;
	 
	a {
	  display: block;
	  margin: 0 auto 15px;
	  width: 203px;
	  height: 45px;
	  background: transparent url('/assets/images/logo.gif') no-repeat left top;
	  .hide-text;
	}
  }
 
  .title {
    .column(12);
	text-align: center;
		 
	h1 {
	  margin: 0;
      color: @grayLight;
	}
  }
}
 
@media only screen and (min-width: 580px) {
 
  header {
	 
    .logo {
	  .column(2);
	 
	  a {
	    margin: 0;
	  }
    }
 
    .title {
      .column(10,true);
	  text-align: right;
    }
  }
}// END MEDIA QUERY 550px

In the example above you can see by default on all screens (if @media did not exist), both elements, the .logo and .title span 100% since we are using a 12 column grid.

Lookig at the screen size and doing a little testing in the browser, the two items (.logo and .title) come close to colliding at around 580px. So doing a little media querie we can then change the column width (which contain floating) so they sit up next to one another. The second and last column requiring the "true" variable to remove the margin-right from the .title element.

Available Classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

Extra small devices
Phones (<768px) 		Small devices
Tablets (≥768px) 		Medium devices
Desktops (≥992px) 		Large devices
Desktops (≥1200px)
.visible-xs Visible
.visible-sm Visible
.visible-md Visible
.visible-lg Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible