Grid init

This commit is contained in:
Jeremy Thomas
2018-01-30 14:42:17 +00:00
parent 523d9351a6
commit 6d9005ad2a
8 changed files with 975 additions and 1946 deletions

View File

@@ -1,4 +1,5 @@
@charset "utf-8"
@import "columns.sass"
@import "grid.sass"
@import "tiles.sass"

39
sass/grid/grid.sass Normal file
View File

@@ -0,0 +1,39 @@
.grid
+block
display: grid
grid-column-gap: 0.75rem
grid-column-gap: 1px
grid-row-gap: 0.75rem
grid-row-gap: 1px
$var: #{"1fr"}
@for $i from 1 through 5
&.has-#{$i + 1}-columns
grid-template-columns: #{append($var, 1fr)}
$var: append($var, #{"1fr"})
.cell
background-color: $primary
border-radius: $radius-large
color: $link-invert
padding: 1rem
@for $i from 1 through 6
&.is-#{$i}-wide
grid-column: span $i
// Colors
&:nth-child(7n-6)
background-color: $purple
&:nth-child(7n-5)
background-color: $link
&:nth-child(7n-4)
background-color: $info
&:nth-child(7n-3)
background-color: $primary
&:nth-child(7n-2)
background-color: $success
&:nth-child(7n-1)
background-color: $warning
color: $warning-invert
&:nth-child(7n)
background-color: $danger