Skip to content

Instantly share code, notes, and snippets.

@Sergioamjr
Last active December 6, 2018 14:35
Show Gist options
  • Save Sergioamjr/3503fc2fcd6c799270ffb7bd211531f5 to your computer and use it in GitHub Desktop.
Save Sergioamjr/3503fc2fcd6c799270ffb7bd211531f5 to your computer and use it in GitHub Desktop.
Sistema de Grid com Stylus
.container {
margin 0 auto
padding 0 15px
max-width 1200px
}
.grid {
display flex
flex-wrap wrap
margin 0 -15px
& > div {
width 100%
box-sizing border-box
padding 0 15px
}
}
generateColumn(prefix, x) {
for n in (1..x) {
.{prefix}-{n}-{x} {
width ((0% + n / x * 100));
}
}
}
.grid {
generateColumn('xs', 12)
}
@media screen and (min-width: 768px) {
.grid {
generateColumn('sm', 12)
}
}
@media screen and (min-width: 992px) {
.grid {
generateColumn('md', 12)
}
}
@media screen and (min-width: 1200px) {
.grid {
generateColumn('lg', 12)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment