├── README.md
└── grid.scss


/README.md:
--------------------------------------------------------------------------------
1 | # example-css-grid
2 | Example css grid/framework for Toptal blog
3 | 


--------------------------------------------------------------------------------
/grid.scss:
--------------------------------------------------------------------------------
 1 | $grid__bp-sm: 576;
 2 | $grid__bp-md: 768;
 3 | $grid__bp-lg: 992;
 4 | $grid__bp-xl: 1200;
 5 | $grid__cols: 12;
 6 | 
 7 | $map-grid-props: (
 8 |         '': 0,
 9 |         '-sm': $grid__bp-sm,
10 |         '-md': $grid__bp-md,
11 |         '-lg': $grid__bp-lg,
12 |         '-xl': $grid__bp-xl
13 | );
14 | 
15 | @mixin create-mq($breakpoint, $min-or-max) {
16 |   @if($breakpoint == 0) {
17 |     @content;
18 |   } @else {
19 |     @media screen and (#{$min-or-max}-width: $breakpoint *1px) {
20 |       @content;
21 |     }
22 |   }
23 | }
24 | 
25 | @mixin create-col-classes($modifier, $grid-cols, $breakpoint) {
26 |   @include create-mq($breakpoint, 'min') {
27 |     &__col#{$modifier}-offset-0 {
28 |       margin-left: 0;
29 |     }
30 |     @for $i from 1 through $grid-cols {
31 |       &__col#{$modifier}-#{$i} {
32 |         flex-basis: (100 / ($grid-cols / $i) ) * 1%;
33 |       }
34 |       &__col#{$modifier}-offset-#{$i} {
35 |         margin-left: (100 / ($grid-cols / $i) ) * 1%;
36 |       }
37 |     }
38 |   }
39 | }
40 | 
41 | @each $modifier , $breakpoint in $map-grid-props {
42 |   @if($modifier == '') {
43 |     $modifier: '-xs';
44 |   }
45 |   @include create-mq($breakpoint - 1, 'max') {
46 |     .hidden#{$modifier}-down {
47 |       display: none !important;
48 |     }
49 |   }
50 |   @include create-mq($breakpoint, 'min') {
51 |     .hidden#{$modifier}-up {
52 |       display: none !important;
53 |     }
54 |   }
55 | }
56 | 
57 | .container {
58 |   max-width: $grid__bp-md * 1px;
59 |   margin: 0 auto;
60 |   &--fluid {
61 |     margin: 0;
62 |     max-width: 100%;
63 |   }
64 |   &__row {
65 |     display: flex;
66 |     flex-wrap: wrap;
67 |     width: 100%;
68 |   }
69 |   @each $modifier , $breakpoint in $map-grid-props {
70 |     @include create-col-classes($modifier, $grid__cols, $breakpoint);
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------