Responsive Web design Examples With Source code

Compiled, this will create a gradient using hex or RGB colours as arguments. Up to 10 colour-stops are supported – and the gradient can even be rotated by degrees. Bourbon makes development for HiDPI devices easier too. Using the hidpi media query mixin, we can create a breakpoint that will specifically target HiDPI devices:

1. @include hidpi(1.5) {

The raw CSS output of the above declaration highlights the efficiency of CSS preprocessors in general:

1. @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
2. only screen and (min-moz-device-pixel-ratio: 1.5),
3. only screen and (-o-min-device-pixel-ratio: 1.5/1),
4. only screen and (min-resolution: 144dpi),
5. only screen and (min-resolution: 1.5dppx) {

Bourbon also includes a number of useful 'add-ons' to speed up development. Well-designed buttons can easily be created with a few lines of code. Again, hex or RGB values may be passed as arguments:

1. button {
2. @include button(#ff0000);

You may be happy to learn that Bourbon recognises certain web typefaces, too. We're provided with shorthand for creating font stacks that reference some of the most popular choices. Using the font-family add-on, we can declare:

You can probably guess the CSS output:

1. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Pretty handy, right? It's not mind-blowing, but it saves time.

Bourbon also includes a very useful image-replacement mixin for hiding text, which is intended to be an alternative to the classic text-indent technique. To use, include the following line in your code and follow it with a backgroundimage declaration:

We can take a look at Bourbon's source code to see what's going on behind the scenes:

1. @mixin hide-text {
2. color: transparent;
3. font: 0/0 a;
4. text-shadow: none;

Upon examination, it's clear that Bourbon's techniques are simple. Could you write these mixins yourself and include them in your own project? Absolutely. Would you want to? Let the scope of your endeavour decide.

Neat's grid framework has many useful shortcuts for coding responsive layouts

Closing time

In short, Bourbon provides a solid foundation for speeding up development of CSS3 features. It's simple enough to comprehend within a few minutes, yet powerful enough to be used alone on large projects. However, the true power of Bourbon is evident when used in tandem with its grid framework, Neat.

Neat

Rather than filling your HTML markup with grid structure classes, Neat enables you to use Sass mixins to define column counts, grid spans and breakpoints within your own Sass. This also allows for dynamically altering column counts at different breakpoints.

Getting started

Installation is much the same as Bourbon. (If you just want to read about Neat's excellent features, feel free to skip to the next section.) After ensuring you have installed Sass and Bourbon, run:

gem install neat

Then cd into your scss directory, and run:

neat install

Also include the following line at the top of your main scss style sheet:

@import "neat/neat";

You're ready to start using Neat.

Built upon a 12-column grid, Neat allows for flexible layouts with few limitations

The grid

According to Thoughtbot, "the main motivation behind Neat is allowing anyone to build fluid, entirely semantic grid layouts without having to wade through hundreds of lines of documentation." If you can count to 12, you're already halfway to comprehending Neat. Take a look at the markup for a standard twocolumn layout:

1. Neat is an open source semantic grid framework
2. built on top of Sass and Bourbon…
3. Discover more at neat.bourbon.io