giant robots smashing into other giant robots
Written by thoughtbot
Quick start your Bourbon and Neat
As a designer, initializing a new project with dependencies, gems and general command line head-scratching can be a hassle, especially if you just want to get going with the actual designing and front-end coding.
thoughtbot built the Sass mixin libraries Bourbon and Neat to make the front-end coding consistent, fast and more fun. To have you focus on the design rather than vendor prefixes, re-inventions of the wheel or breaking grids.
Although these libraries are fairly simple to install and use, the screencasts below might make the transition into taking advantage of the Bourbon and Neat mixins even smoother. Sometimes you just want to start the car and drive without having to go through every part of the motor, so if you are a visual learner you may enjoy these screencast tutorials:
Installing Bourbon for a non-rails project
Installing Neat for a non-rails project
Installing Bourbon for a rails project
Installing Neat for a rails project
To learn more about what Bourbon and Neat can do, go here for Bourbon and here for Neat.
Introducing Bourbon Neat, a Sass-based responsive grid framework
Bourbon Neat—or Neat for short—is a lightweight, open source fluid grid framework built on top of Sass and Bourbon with an emphasis on flexibility and ease of use. The framework comes with sensible defaults and useful mixins to help get both developers and designers up and running in minutes.
For instance, applying a grid-based layout to this markup…
<body>
<section class="blog">
<aside></aside>
<article></article>
</section>
</body>
…is only two mixins away:
section.blog {
@include outer-container;
aside {
@include span-columns(4);
}
article {
@include span-columns(8);
}
}
And the result would be:
Here are some live examples of what you can build with Neat.
Why another grid framework?
We built Neat with the aim of promoting clean and semantic markup; it relies entirely on Sass mixins and does not pollute the HTML with presentation classes and extra wrapping divs. It is less explicit—as in requires fewer mixins—than most other Sass-based frameworks and comes with built-in table-cell layout support.
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. We also believe that giving designers the ability to override the default behavior without hassle is key.
Getting Started
To start using Neat in one of your existing projects, place the /neat directory in your main stylesheets folder and make sure you have Bourbon installed. Import both mixin libraries in this order:
@import "bourbon/bourbon";
@import "neat/neat";
Although not required, you are welcome to override the default settings, namely $grid-columns and $max-width, by redefining them in your site-wide _variables.scss and importing it before Neat:
@import "bourbon/bourbon";
@import "variables";
@import "neat/neat";
Ruby Gem
For Rails apps, use the gem instead. In your Gemfile :
gem 'neat'
After running bundle install you will be able to use Bourbon and Neat together.
If you get this error:
Bundler could not find compatible versions for gem "sass"
Run:
bundle update sass
Within your application.css.scss file place the following:
@import "bourbon";
@import "neat";
Neat is fully responsive
Using Sass 3.2 block mixins, Neat makes it extremely easy to build responsive layouts. The breakpoint() mixin allows you to change the total number of columns in the grid for each media query. You can store these values in project-wide variables to DRY up your code:
$mobile: max-width 480px 4;
When used as a breakpoint() argument, $mobile instructs Neat to use a 4 column grid in mobile-size viewports:
.my-class {
@include breakpoint($mobile) {
@include span-columns(2);
}
}
Would compile to:
@media screen and (max-width: 480px) {
.my-class {
display: block;
float: left;
margin-right: 7.42297%;
width: 46.28851%; // 2 columns of the total 4
}
.my-class:last-child {
margin-right: 0;
}
}
Feel free to refer to the documentation for more on how to use breakpoint() and all the other mixins. Don’t forget to check out the examples for some inspiration.
Now go get Neat and build something awesome.
Bring your grid to Yoga class
I’ll have to admit that, for years, I have resisted designing with flexible (fluid) layout mostly because I didn’t want to figure out all the math to make it work properly. My other problem was that, at certain sizes, the design just seemed to fall apart. For the longest time I was unconvinced that it was worth all of the effort that it would take to get the grid working correctly and looking good.
After reading Ethan Marcotte’s article and book on responsive design, I was convinced to try it again. I thought that I could amend the grid-width function already in Bourbon to my needs by giving the variables percentage value. I was wrong. It didn’t handle sub-containers because the ratio between columns and gutters changes.
I could still use Sass to do the math ( target ÷ container = percentage ). I gave the grid-width function a makeover to accommodate this and the result is flex-grid.
Getting Started
Start off by declaring a couple variables for the function. $fg-max-columns is the total number of columns in your grid. $fg-column and $fg-gutter define the relationship between column and gutter. I use pixels here because it is what I am most accustomed to.
// 960 12 column grid $fg-max-columns: 12; $fg-column: 60px; $fg-gutter: 20px;
The function takes two values: the number of columns that you want the element to span and its container column (which defaults to $fg-max-columns). This way the function allows you to nest containers without losing the relationship between column and gutter. For example:
body {
margin: 0 auto;
max-width: 1400px;
width: flex-grid(12);
section {
float: left;
width: flex-grid(8); // No second value needed since it's inside the main container
article {
float: left;
width: flex-grid(6, 8); // Since the article is inside the 8 column section
}
aside {
float: left;
width: flex-grid(2, 8);
}
}
}
Gutters
You’ll notice the grid doesn’t have any gutters yet. They too can take two arguments, a container column count and gutter width. Container is set to your default max columns ($fg-max-columns) and gutter is set to $fg-gutter, which you’ll almost never need to change.
section {
float: left;
margin-right: flex-gutter();
width: flex-grid(8);
article {
float: left;
margin-right: flex-gutter();
width: flex-grid(6, 8);
}
aside {
float: left;
width: flex-grid(2, 8);
}
}
The last touch
I add a max-width to my main container, mostly for me because I’m usually browsing at full screen on a 30” monitor. Since the grid is totally percentage based, I usually look to where the line-length becomes too long.
body {
margin: 0 auto;
width: flex-grid(12);
max-width: 1400px;
}
Showing off
Over the last few months we have been looking for another designer to join our team. We’ve seen a bunch of portfolios ranging in experience and style. I’ve found it intriguing to see how other designers present themselves and their work through their portfolio.
When it comes down to it you want your portfolio to show your work in the best light possible. You want to make the person hiring to be looking for more and eager to talk to you. Here are a few things that I am always looking for in portfolios.
Master the basics
I can’t put enough emphasis on design basics in both your portfolio and the work that you decide to put into it. There are in particular two things that I am really looking for: a proper grid and outstanding typography. You should have a solid understanding of both and be able to show it in your portfolio.
A grid is something no design should be without and there is no excuse not to use one for your portfolio. Its benefits are well documented and accepted; it adds form structure and flow. If you think you need help in this area pick up Grid Systems: Principles of Organizing Type by Kimberly Elam.
Choose a solid typeface and set it perfectly. Pay close attention to line-height, letter-spacing and the hierarchy in your type. I feel like every designer should have a copy of Robert Bringhurst’s Elements of Typographic Style, and have read it at least twice.
Best work and only the best
Don’t show anything less than your very best work. If that means that you can only have one portfolio piece then you only have one. Don’t just put in a bunch of work that doesn’t show your full capabilities. The work in your portfolio site should be shown well. It seems obvious but don’t have lots of distractions and useless ornaments around it unless it serves to better show your work.
Client work proves that you’ve done it before. It indicates that you can handle clients, handle project timelines and everything that comes with being a designer on a team.
If you don’t have this kind of work look for projects that you have done that might fill that gap. They can range from a goofy tumblr account, to contributing to open source, to maintaining a blog. They show that you have a passion for this thing you want to do, that you are eager to learn and that you eat, drink and breathe this stuff. Even if you have a bunch of great client work it’s still great to see projects that you have started or contributed to showing your passion for your work.
Play to your strengths
All in all, you want to play to your strengths. If you are right out of school you won’t have much client/in-house experience so play up those projects you take on in your free time. If you have a bunch of solid work select the few you consider the very best and switch out pieces depending on the job you are looking to get. Make sure that who you are and your core design principles are reflected in the design of your portfolio and the pieces that you have chosen for the portfolio.
Need a review?
I’d like to start giving portfolio reviews if there is an interest in it. It’s something that I wish I had the opportunity to have when I built my first portfolio (it was pretty bad). So if you are in the Boston area, come to the next Design with Boston. Just ask me and we can sit down and go over it sometime during the night.
To em, or to err.
There’s been some talk about ditching ems as the proper unit for measuring type in stylesheets. This is as many things are; while possible, probably not a great idea.
Units allow us to speak on common ground. Almost everything has a unit of measure. For type, we use ems. so what’s an ‘em’?
em: the square of a body of any size of type
The argument for ditching ems suggests instead defining font size in pixels. How 1999 of you. Pixels are a unit of measure for bitmap images. This may shock some of you, but images and type are not the same. Think about it this way - would you measure BAC in dB?
IE6 doesn’t allow resizing of pixel-sized type. There’s a reason for this. How do you resize a pixel? Better yet, how do you easily standardize something like that?
So we’ve covered why not to use pixels - but why ems? Because they’re relative units. Get back here, coward!
This can be easy.
Let’s start with a simple case. We set our base text-size to 10px, or 1em (62.5% of 16px which is a typical browser default). That makes the following math a bit friendlier.
body {
font-size: 62.5%
}
Next we decide a typographic scale.
h1 {
font-size: 2.4em;
}
p {
font-size: 1.2em;
}
This part is optional, but the classic scale has worked well for type setters for centuries. I’d recommend sticking to one. Next we define a standard line-height of 1.8em.
h1 {
font-size: 2.4em;
line-height: .75em;
}
p {
font-size: 1.2em;
line-height: 1.5em;
}
To get these values, divide your font-size by the desired line-height value. For example, take 1.8 (our line-height) and divide by 2.4 (the font-size of h1). Your result (.75) is the line-height for h1.
So far, basic arithmetic. Still with us? Great! Let’s add a ‘line’ between each paragraph, and set some appropriate margins on our headers.
h1 {
font-size: 2.4em;
line-height: .75em;
margin: .75em 0;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
I bet I know what you’re thinking. Where does he come up with these crazy numbers? Hint: Check the line-height value.
Okay, so now let’s handle the heckler in the back of the room. Here’s how I’d probably handle some pesky h2’s.
h1 {
font-size: 2.4em;
line-height: 0.75em;
margin: .75em 0;
}
h2 {
font-size: 1.8em;
line-height: 1em;
margin: 1em 0;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
It fits in our typographic scale. Our design holds up. If you’re curious about how all this looks I’ve thrown together a quick example using h3’s as well. My solution? Knock all the headers up one notch on the scale.
Things can get out of hand if you start with unsound values, or start mixing units of measure. But stick to your guns! It lends tremendous persuasive resources, and provides benefits that justify the foresight of this technique.
