Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Simple flexbox based grid system */
- $columns: 12;
- @mixin layout-cols($device) {
- @for $i from 1 through 12 {
- .l-#{$device}-col-#{$i} {
- flex: 0 0 $i / $columns * 100%;
- }
- }
- }
- @mixin responsify {
- /* Common rules */
- .l-container {
- margin-left: auto;
- margin-right: auto;
- .row {
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- justify-content: center;
- @include layout-cols(d);
- }
- }
- /* Tablet rules */
- @media only screen
- and (max-width: 768px) {
- .l-container {
- .row {
- @include layout-cols(t);
- }
- }
- }
- /* Mobile rules */
- @media only screen
- and (max-width: 480px) {
- .l-container{
- .row {
- @include layout-cols(m);
- }
- }
- }
- }
- @include responsify;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement