Columns are the primary way you will use Neutron to create your layouts. The columns() mixin accepts at minimum the number of columns you want to be set inside your container. Other information needs to be provided if you want to set things like margin, change the default width of a column, or re-arrange the order that the elements are displayed in. With this information columns() calculates and sets the widths of your columns for you.
section {
@include columns(4);
}
div {
@include columns((1,3,1));
}columns()Neutron uses ratios to determine how the available space in a container should be divided between the columns. If you simply want all your columns to have the same width you don't need to supply a ratio, you can just tell Neutron how many columns you want. Unlike Bootstrap or other common framework's col classes, Neutron's ratios don't restrict the widths of your columns or their number. You have have as many or as few in whatever arrangement you like.
columns((30,60))
columns((4,8))
columns((1,2))
columns((3,1,8))
Neutron doesn't force you to think about your layout in a particular way. If you're comfortable using a bootstrap-style grid, you can continue thinking that way. Neutron's ratio declarations are flexible enough to accommodate many ways of thinking about layouts, from percentages to 12 column grids.
columns((1,11))
columns((2,10))
columns((3,9))
columns((4,8))
columns((5,7))
columns((6,6))
columns(1)
Neutron was built to help, not hinder. We discarded many outmoded design choices when making Neutron. Doing this allowed us to help you make almost any layout you can imagine. When using other frameworks restricted to 12 columns you are unable to create an equal width five column layout. In Neutron it's as simple as columns(5).
columns(5)
Neutron has no restrictions on nesting your columns(). Just add your mixin declaration and it will work as you expect.
section {
@include columns((1,3,1), $target: "div") {
@include columns((1,4), $target: div);
.article {
@include columns(2, $target: div);
}
aside {
@include columns((5,1), $target: div);
}
}
}When declaring columns, sometimes it can be useful to target only some of the child elements in your container. This is where $target comes in, you can pass the name of the specific element you want targeted and then only those will become columns. Neutron will ignore the other elements in the container.
section {
@include columns((1,3,1), $target: "div");
}Often you'll want to apply additional styles to your columns. Neutron allows you to do this without needing to add an extra selector. Add your styles inside the columns() block and they will be applied to each of the columns for that declaration. This way you can be sure that your styles are only being applied to the elements you want them to.
section {
@include columns((1,3,1)) {
background: #EEE;
padding: 0 16px;
}
}columns() aliasesYou might not be used to thinking in columns(), or maybe you just don't want to have to type all seven characters each time you use columns. We've added a number of aliases for the columns() mixin so you can choose what suits you best and get back to making your layout. All these aliases behave identically to columns(), they're even calling the same mixin. No matter which one you use, your columns will be declared just how you want them.
section {
@include columns(2);
@include column(2);
@include col(2);
}Sometimes you want to change the alignment of your container. When you do, you don't want to have to write out the same mixin all over again. container-alignment() lets you change just the alignment of your container without affecting the other settings you've already declared in columns().
$align:right
$align:center
section {
@include columns((1,2), $container-align: "center");
@include breakpoint(from-desktop) {
@include container-align("right");
}
}Sometimes you'll need to change the width of your column containers, especially with responsive layouts. When you do, you don't want to have to re-declare your columns() mixin all over again. container-width() lets you change just the width of your container without affecting the other settings you've already declared in columns().
$container-width:80%
section {
@include columns((1,2), $container-width: 100%);
@include breakpoint(from-desktop) {
@include container-width(80%);
}
}order() is Neutron's solution to the complicated mess caused by push and pull classes that other frameworks favour. Similar to flexbox's order property, order() lets you rearrange the order of your columns, something often desired in responsive layouts.
This feature can be used by supplying columns() with your desired order or by using the separate order() command. If you use the separate order command you will need to provide the column ratio and margin options given to the columns() mixin.
1
2
3
section {
@include columns((1,4,1), $order: (2,1,3));
@include breakpoint(from-desktop) {
@include order($order: (3,2,1), $columns: (1,2,1));
}
}Controlling the gutters of your columns can be done easily with columns(). You can add margins to each of your columns using the $margin: 8px parameter, and control if you have flush margins using the $flush-margin: false parameter.
section {
@include columns((1,4,1), $margin: 8px);
@include breakpoint(from-tablet) {
@include order((1,4,1), $margin: 2%);
}
}section {
@include columns((1,4,1), $flush-margin: false);
}Setting your columns so the left and right padding is disabled on the first and last columns respectively is made simple. Just pass the $flush-padding: true parameter to the columns() mixin and you're done.
Lorem ipsum dolor sit amet, conse ctetur adip isicing elit. Inv entore ten etur nobis nostrum sint sus cipit numqu am assum enda minus fugit pari atur, mol estiae debitis, quaerat dicta volupt atibus iusto vero ad, asper natur velit ullam.
Lorem ipsum dolor sit amet, conse ctetur adip isicing elit. Inv entore ten etur nobis nostrum sint sus cipit numqu am assum enda minus fugit pari atur, mol estiae debitis, quaerat dicta volupt atibus iusto vero ad, asper natur velit ullam.
Lorem ipsum dolor sit amet, conse ctetur adip isicing elit. Inv entore ten etur nobis nostrum sint sus cipit numqu am assum enda minus fugit pari atur, mol estiae debitis, quaerat dicta volupt atibus iusto vero ad, asper natur velit ullam.
section {
@include columns((1,4,1), $flush-padding: true);
}Making your website is essential in today's world of many and varied device sizes. Neutron already gets you halfway there with columns() but often you need to be more specific about how your website changes across different devices. Neutron helps make this as simple as possible with a number of helpful mixins that abstract away the implementation details and let you stay focused on your layout.
breakpoint()The breakpoint() mixin helps you create media queries that apply styles to a specific breakpoint or range of device sizes, or specific device resolutions. To get it working all you need to do is supply breakpoint() with a breakpoint, pixel ratio, or a valid media type or feature argument, and it will take care of the rest.
Phone
Phablet
Tablet
Desktop Small
Desktop Medium
Desktop Large
Resize your window to see the different breakpoints. These are only the default breakpoints, feel free to add your own as required.
section {
@include columns((1,2,1), $order: (2,1,3));
@include breakpoint(from-desktop) {
@include order($order: (3,2,1), $columns: (1,2,1));
}
}section {
@include columns((1,2,1), $order: (2,1,3));
@include breakpoint($breakpoint:from-desktop, $resolution:2) {
@include order($order: (3,2,1), $columns: (1,2,1));
}
}section {
@include columns((1,2,1)) {
background: #000;
color: #FFF;
};
@include breakpoint($media-type: "print") {
@include columns((1,2,1)) {
background: none;
color: #000;
};
}
}section {
@include columns(1);
@include breakpoint($media-feature: "orientation: landscape") {
@include columns(2);
}
}show() and hide()To get your layout looking good responsively sometimes you need to hide or show elements at certain breakpoints. The show() and hide() mixins help make this easy. Simply include the breakpoints you want the show or hide effects to be applied to and Neutron takes care of the rest.
Visible only on Phone sizes
Visible only on Phablet sizes
Visible only on Tablet sizes
Visible only on Desktop Small sizes
Visible only on Desktop Medium sizes
Visible only on Desktop Large sizes
aside {
@include hide(mobile);
}aside {
@include hide;
@include show(desktop);
}clear-fixclear-fix is a simple utility mixin that helps you better manage layouts that use floats. This forces parent elements to extend to the full height of it's child content.
section {
padding: 16px;
@include clear-fix;
}