A Sass framework that empowers you to create flexible, clear, and semantic website layouts.
Download Version 0.9.1or read the documentation
A Sass framework that empowers you to create flexible, clear, and semantic website layouts.
Download Version 0.9.1Neutron does more than just let you build your layout quickly, it lets you maintain your work or change direction entirely with much less effort than other frameworks require. This flexibility lets you iterate faster and easier, your code can now keep up with the design changes that happen through the life of a project.
@include columns(); // Try changing the column layout yourself!
Neutron removes the need to litter your HTML with messy and confusing classes, leaving you with clear and clean code. Want to change the number of columns? No need to change classes scattered throughout your HTML, the number of columns is determined in your CSS right where it belongs.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6">
<h1>Hello</h1>
</div>
<div class="col-xs-12 col-md-6">
<h1>World</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="two columns">
<h1>Hello</h1>
</div>
<div class="two columns">
<h1>World</h1>
</div>
</div>
</div>
<div class="row">
<div class="small-12 large-6 columns">
<h1>Hello</h1>
</div>
<div class="small-12 large-6 columns">
<h1>World</h1>
</div>
</div>
<section>
<div>
<h1>Hello</h1>
</div>
<div>
<h1>World</h1>
</div>
</section>
section {
columns(1)
@include breakpoint(from-tablet) {
columns(2)
}
}
Rethinking Neutron to work the way you think helped us make Neutron more powerful, not just easier to use. Instead of pushing or pulling elements to fit into your design, you can simply use order() and make your design match the way you imagined it. Because Neutron makes no unnecessary assumptions about how you work, we were able to add essential features like real flush margins that other frameworks have to fake or simulate or not support at all.
1
2
3
4
5
@include columns(5);
order() applied1
2
3
4
5
@include columns(5, $order:(5,4,1,3,2));