Just copy the file _UnitGS.scss from GitHub to your Sass directory and start using the grid.
The UnitGS uses Sass, to setup it up go here.
Even better with Compass.
Clean project? Don't have time to learn about all the html best practices, no problem, make your site HTML5 and CSS3 ready with HTML5 Boilerplate.
16px
Browser default settings
20px (The New 1)
1.25em
(default: 16px) The font-size will be set in ems, we respect user settings.
(default: 25) \*A 25 columns grid?
(default: 24) Inactive columns will serve as margin.
(default: 1.5) The line height is calculated based on your base font-size and will define the vertical rythm for the grid.
(default: 1) Value calculated over the line-height.
Note: Unit Grid Sytem uses elastic gutters as it should be. :)
scale(0.8)
1 = 20px
0.8
16px
(default: 1) Scale in and out to adapt to different resolutions.
Note: If you like the default values, you don't have to set them. Just write:
body {
@include init-grid();
}Note: Sketch your layouts before starting the code
Best practice: Define your breakpoint with min-width.
<body>
<header></header>
<nav></nav>
<section id="sectionA"></section>
<section id="sectionB"></section>
<footer></footer>
</body>
</code>header { @include grid-unit(); }
nav { @include grid-unit(); }
section { @include grid-unit(); }
footer { @include grid-unit(); }Tip: Code mobile first.
@media screen and min-width(30em)
{
#sectionA { @include grid-unit(1/2); }
#sectionB { @include grid-unit(1/2, last); }
}Adjust your design to different resolutions and orientations.
Best practice: You can use fractions like 1/2 or 2/3, the grid will calculate the correct numbers of active columns for you.
Note: Declare only what you changed.
Atention: You have te set the grid width, if you don't, it will occupy all active columns.
@media screen and min-width(60em)
{
body { set-scale(1.25); }
header { @include grid-unit(1/3); }
nav { @include grid-unit(2/3, last); }
}Scale down or scale up as you need, the grid will maintain the proportionality of its elements.
The best grids also manage the vertical rythm. But maintaning the vertical rythm in an elastic and responsive design is hard, very hard... that is why the UnitGS gives you the mixin grid-line.
Note: You can do this at the same time that you do the rest of the declarations of styles.
TODO: Here I have separate it to better explain the concept.
Start in the global declaration and change as you go through the media queries.
h1 { @include grid-line(3); } //The font will be 3 times bigger than the base font.
h2 { @include grid-line(2); } //The font will be 2 times bigger than the base font.The grid-line mixin will maintain your vertical rythm, it will adjust values like line-height, etc. as necessary to keep the design in sync.
Even modular scales are very easy to use with the UnitGS.
Tip: To get more information about modular-scales, check ... and ... from ... .
//Activate the grid debug system by setting the global variable $grid-debug.
$grid-debug: true;When the debug mode is activated, all the grid units will have a different color so that you can easily distinguish them.
As you can see, only the two grid units that were updated change colors.
This is perfect to debug your responsive design. Resize your browser and you will see that only the grid units that where updated will change color, allowing you to clearly see where you are making changes.
Curiosity: The colors of the logo came from the colors generated by the debug mode.
If you want, you can activate the debug system in selected areas only.
...
$grid-debug: true; // Activate on enter
... // Area to debug.
$grid-debug: false; // Deactivate on exit
...Note: You can do this and select only the areas you want to debug.
Check the Sass output window, it will give you a lot of information about what is happening.
You can define different trace levels for the debug mode is true and when is false.
By default, in debug-mode all traces will be showned, information, warnings and errors. And when the debug-mode is off, you are only informed about errors.
You will have the line where the trace as been issued for a fast correction.
Example of an information trace:
@include grid-settings();When you set the grid settings, some data is set with defaults and other is calculated for you, the settings will be outputed so that you can have a better perception about what is happening under the hoods.
paste the output here
Example of a warning:
grid-line($padding-top: 1/2, $padding-bottom: 1/4);In this example the paddings summed don't give a whole line, that would break the vertical rythm of the grid. The grid will automaticaly correct the values for you maintaining the 1/2 to 1/4 portortion, but you will be warned and informed about the changes made.
paste the output here
Example of an error:
@include grid-settings($active-columns: 15);
@include grid-unit($width: 1/2);This will generate an error because 15 columns devided by 2 will not give a whole number and that would break the grid.
paste the output here
That's it, you are ready to go.
You have a lot more functionalities in the grid, you can see all about it here. (link to the documentation)
12 columns
@include grid-settings();15 columns
@include grid-settings();16 columns
@include grid-settings();16 + 2 columns
@include grid-settings();Note: to better understand this grid configuration see the Golden Grid System by Joni Korpi.
24 columns
@include grid-settings();24 + 1 columns
@include grid-settings();Note: I will explain this mode in a future article. You can see it in action in my website bernardoantunes.com.
You want to set a max-width for your grid?
Simple, just create an outside container (div) and set its max-width to the value that you want.
When you start wanting to create a nested grid structure in a elastic design, where all the values are set in ems, you start entering in the world of complex math, and it is in this moment that many designers decide to go for other routes that gives them more time for design instead of math.
But it is in this point that the Unit Grid System really shines.
none (default): It is a top level grid unit, it is not contained by other grid units and will contain content.
The margins and the gutters will be set.
@include grid-unit(); // It will set the $container-type to none.container: A grid unit that will contain other grid units but no content.
The margins will be set but no gutters.
@include grid-unit($width: 1/4, $container-type: container);contained: A grid-unit that exists contained inside a container grid unit and that will contain content.
The gutters will be set but no margins.
@include grid-unit($width: 1/4 1/2, $container-type: contained);When setting an contained grid-unit you have to inform the width of the parents containers and the last value is the width of the current grid-unit.
Note: The default calculation mode is relative wich means that in this case the grid unit will occupy 1/8 of the total active grid columns. You can change the mode of calculation to absolute if you prefer.
both: In a deep nested grid, you will create grid-units that are contained and are also containers for others. In this case you just have to set the $container-type to both.
No gutters and no margins.
@include grid-unit($width: 1/4 1/2, $container-type: both);In the world of the ems, when you start messing with the font-size, you are messing with the relative scales of the world of ems. You could use rems, but they are still not supported by all browsers and we don't know if they will ever be.
Lets use this example with a 16px font-size as the default browser font size:
2em > 2em > 2em
Will became respectively:
32px > 64px > 128px
If you would like to set the font-size to:
32px > 16px > 24px
You would have to do set them as this:
2em > 0.5em > 1.5em
And this is just the beggining, because ALL the values are in ems, wich means that you need to calculate all the values of all the mesurements relative to the current ratio.
You can see where it will lead your css calculations to... and it is not a pretty place.
But don't worry, the Unit Grid takes care of this for you. :)
Check this scenario:
<div id="col-A">A
<div id="col-B">B</div>
<div id="col-C">C
<div id="col-D">D</div>
</div>
</div>And we want to set the font-size to:
#col-A { font-size: 1.25em; }
#col-B { font-size: 1.5em; }
#col-C { font-size: 2em; }
#col-D { font-size: 1em; }Based on the base font-size of 16px.
But because of the nested layout, the sizes of the fonts and dimensions will not be as you would like them to be.
To solve this complex and annoying problem, you use the grid in this way.
#col-A { @include grid-unit($font-size: 1.25); }
#col-B { @include grid-unit($font-size: 1.25 1.5); }
#col-C { @include grid-unit($font-size: 1.25 2); }
#col-D { @include grid-unit($font-size: 1.25 2 1); }And everything works as expected, you just need to give the Unit Grid the parent font sizes and the grid does the math for you. Not only to the font-sizes of the text but it also corrects all the dimension values of the grid-unit (line height, gutters, margins, paddings, etc.).
Yes, but you will need to know a litte about how are the grid inner workings.
For example, to create this scenario:
You will need to:
#article-A {
@include grid-unit($container-type: container);
> p {
padding-left: utils-calculate-gutter-width-in-ems();
padding-right: utils-calculate-gutter-width-in-ems();
}
}
#sidenote {
@include grid-unit(1/2, $align: right, $container-type: contained);
margin-left: utils-calculate-gutter-width-in-ems();
}The Unit Grid System explained
image here
Documentation
image here
Go deep, show me the code
image here