Skip to content

Instantly share code, notes, and snippets.

@artemsheludko
Last active June 5, 2018 11:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save artemsheludko/86c943d65a4c799f80d42ada60c9dc43 to your computer and use it in GitHub Desktop.
Save artemsheludko/86c943d65a4c799f80d42ada60c9dc43 to your computer and use it in GitHub Desktop.
Пример сетки для Jekyll проектов.
// G R I D
$columns: 12
$container-offset: $base-spacing-unit
.o-container
width: 100%
padding-left: $container-offset
padding-right: $container-offset
margin: 0 auto
@media(min-width: 576px)
max-width: 540px
@media(min-width: 768px)
max-width: 720px
@media(min-width: 992px)
max-width: 960px
@media(min-width: 1200px)
max-width: 1140px
.o-row
display: flex
box-sizing: border-box
display: flex
flex: 0 1 auto
flex-direction: row
flex-wrap: wrap
margin-left: ($base-spacing-unit * -1)
margin-right: ($base-spacing-unit * -1)
.o-col
margin-left: $base-spacing-unit
margin-right: $base-spacing-unit
[class^="o-col-"]
flex: auto
// M O B I L E
@for $i from 0 through $columns
.o-col-#{$i}
width: percentage( $i / $columns )
@for $i from 0 through $columns
.o-push-#{$i}
margin-left: percentage( $i / $columns )
@for $i from 0 through $columns
.o-pull-#{$i}
margin-right: percentage( $i / $columns )
// T A B L E T
@media(min-width: 768px)
@for $i from 0 through $columns
.o-col-t-#{$i}
width: percentage( $i / $columns )
@for $i from 0 through $columns
.o-push-t-#{$i}
margin-left: percentage( $i / $columns )
@for $i from 0 through $columns
.o-pull-t-#{$i}
margin-right: percentage( $i / $columns )
// D E S K T O P
@media(min-width: 992px)
@for $i from 0 through $columns
.o-col-d-#{$i}
width: percentage( $i / $columns )
@for $i from 0 through $columns
.o-push-d-#{$i}
margin-left: percentage( $i / $columns )
@for $i from 0 through $columns
.o-pull-d-#{$i}
margin-right: percentage( $i / $columns )
// W I D E
@media(min-width: 1200px)
@for $i from 0 through $columns
.o-col-w-#{$i}
width: percentage( $i / $columns )
@for $i from 0 through $columns
.o-push-w-#{$i}
margin-left: percentage( $i / $columns )
@for $i frwm 0 through $columns
.o-pull-d-#{$i}
margin-right: percentage( $i / $columns )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment