Hyx is a very powerful and easy to use grid system for less. Think of it like the missing half brother of Jeet.
- Flexible gutter size: you can change it whenever you want and your grid won't break.
- Keeps your DOM clean; hyx.less will not fill your HTML with a bunch of classes.
- Powerful and semantic syntax,
.cols(1/3);means one column of three. - Use only what you need when you need it. This is a tool to build a grid ad-hoc to your needs. You are not stuck with a rigid API or only one way to build your grid.
- Jeet-like syntax. Add the
hyx_extras.lessto receive access tospan();and other fancy stuff.
- Download the latest stable release from http://thinkxl.github.io/hyx.less/ or clone the git repo -
git clone https://github.com/thinkxl/hyx.less.git - Copy
hyx.lessfile from the repo or unzipped folder - Paste it in your less folder
- Import it on your main
style.less
// style.less
@import `hyx`;In the top of style.less, specify some settings:
// ## Grid setup
@gutter: 4%; // global gutter, requiredHyx has been designed to build an entire grid only with one function. It can take a parameter in two ways.
The main function is .cols(@size);, and the two ways that you can input the size of your grid is separated by two syntax styles:
- Same size grid
- Different size grid
This means that all your columns will have the same size, and they need to be separated in the same distance one from each other.
The syntax used to build a grid of three columns could be:
.cols(1/3); // one of three;
// example using it with a class in a semantic named way
.col-1-3 { .cols(1/3); }This means one column of three and the function will have the width of each element in % needed. Hyx.less will automatically assign a margin-right: 0; to the last element. This way, you can avoid using an extra .last class.
With this syntax we are targeting columns of different size, one common scenario is the main content column plus the sidebar one:
.cols(8); // size of eight columns
.cols(4, 0); // size of four columns, plus a `margin-right: 0;`
// example using them with a class well named
.main-content { .cols(8); }
.sidebar { .cols(4, 0); }Just seeing the code it can tell us what is happening, for same size grids we can use 1/3 for one of three, and for one column with the size of eight we can use just 8 as a parameter, let see those in action.
This is better explained in the API section.
style.less
.col-1-3 {
// # Same size syntax
//
// Means one of three elements with the same size.
.cols(1/3);
}
.main {
// # Different size syntax
//
// Means element with the size of eight columns.
.cols(8);
}
.sidebar {
// # Different size last element syntax
//
// Means element with the size of eight columns without gutter.
// The second parameter refers to `margin-right: 0;`.
.cols(4, 0);
}compiled to style.css
.col-1-3 {
float: left;
width: 30.666666666666668%;
margin-right: 4%;
}
.col-1-3:last-child {
margin-right: 0;
}
.main {
float: left;
width: 65.33333333333333%;
margin-right: 4%;
}
.sidebar {
float: left;
width: 30.666666666666668%;
margin-right: 0;
}
index.html
<section>
<div class="row"> <!-- necessary class to wrap the columns -->
<div class="main">
<p>Main content here!</p>
<code>.cols(8);</code>
</div> <!-- .main -->
<aside class="sidebar">
<p>Sidebar</p>
<code>.cols(4);</code>
</aside> <!-- .sidebar -->
</div> <!-- .row -->
<hr />
<div class="row">
<div class="col-1-3">
<p> First column </p>
<code>.cols(1/3);</code>
</div> <!-- .col-1-3 -->
<div class="col-1-3">
<p> Second column </p>
<code>.cols(1/3);</code>
</div> <!-- .col-1-3 -->
<div class="col-1-3">
<p> Third column </p>
<code>.cols(1/3);</code>
</div> <!-- .col-1-3 -->
</div> <!-- .row -->
</section>Notice that the syntax is very similar to Jeet because is its main inspiration for this new version.
(@num, @in-gutter, @global-gutter)
- @num: Number of columns that we want.
- @in-gutter: We use this to set the last element to
margin-right: 0;without loose the precision of the grid size that the@global-gutter;gave us. - @global-gutter: By default this is taken from
@gutterat the// settingswe define in the beginning, if we want an element without gutter at all, we set this to0.
.cols(); Is the core and main function of Hyx, it can create any combination of columns you want in two different syntax's: same size & different size.
.cols(1/3); Meaning one of three, we can use any combination based on a grid of twelve columns, example:
.cols(1/3);one of three.cols(1/4);one of four.cols(1/2);one of two
This function includes &:last-child { margin-right: 0; } inside the class, so we don't have to worry to set margin-right: 0; in the last element.
.cols(4); This create an element with the size of the columns defined, in this example means that we want an element with the size of four columns.
It takes the gutter from the @gutter we define in the // settings to make the correct calculation. For avoid breaking the grid we need to add a second parameter in the last element as I explain below.
.cols(4, 0); This function is to use only for the last element using the different size syntax, the second parameter applies a margin-right: 0; to this element, example:
.main {
.cols(8);
}
.sidebar {
// last element
.cols(4, 0);
}or
.first-of-three {
.cols(4);
}
.second-of-three {
.cols(4);
}
.last-of-three {
// last element
.cols(4, 0);
}So you want a grid without gutter? you got it, you can set the setting @gutter: 0;, but then why I need this ugly function with three parameters?
Because sometimes you need the main @gutter: 4%; as a general setting, but maybe you want a grid inside the website without gutter that won't affect the other grids, right?
.cols(4, 0, 0); Sets @in-gutter: 0; and @global-gutter: 0; so only this element won't have any gutter, and will be so cool.
If you include the hyx_extras.less file, you can use this same function as .span();
.span(4); As explained above, this is a shortcut for .cols(4, 0, 0); to make a grid without gutter.