Add grid modules

This commit is contained in:
Jeremy Thomas 2016-09-22 23:23:30 +01:00
parent 76b76284b8
commit 2673f2b0f0
6 changed files with 909 additions and 894 deletions

1
bulma.sass vendored
View File

@ -3,4 +3,5 @@
@import "sass/base/base.sass" @import "sass/base/base.sass"
@import "sass/elements/elements.sass" @import "sass/elements/elements.sass"
@import "sass/components/components.sass" @import "sass/components/components.sass"
@import "sass/grid/grid.sass"
@import "sass/layout/layout.sass" @import "sass/layout/layout.sass"

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,6 @@
@charset "utf-8" @charset "utf-8"
@import "card" @import "card"
@import "grid"
@import "highlight" @import "highlight"
@import "level" @import "level"
@import "media" @import "media"

View File

@ -251,35 +251,3 @@
// Modifiers // Modifiers
&.is-desktop &.is-desktop
display: flex display: flex
.tile
align-items: stretch
flex-basis: auto
flex-grow: 1
flex-shrink: 1
min-height: min-content
// Modifiers
&.is-ancestor
margin-left: -10px
margin-right: -10px
margin-top: -10px
&:last-child
margin-bottom: -10px
&:not(:last-child)
margin-bottom: 10px
&.is-child
margin: 0 !important
&.is-parent
padding: 10px
&.is-vertical
flex-direction: column
& > .tile.is-child:not(:last-child)
margin-bottom: 20px !important
// Responsiveness
+tablet
&:not(.is-child)
display: flex
@for $i from 1 through 12
&.is-#{$i}
flex: none
width: ($i / 12) * 100%

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

@ -0,0 +1,4 @@
@charset "utf-8"
@import "columns"
@import "tiles"

34
sass/grid/tiles.sass Normal file
View File

@ -0,0 +1,34 @@
@import "../utilities/mixins.sass"
@import "../utilities/variables.sass"
.tile
align-items: stretch
flex-basis: auto
flex-grow: 1
flex-shrink: 1
min-height: min-content
// Modifiers
&.is-ancestor
margin-left: -10px
margin-right: -10px
margin-top: -10px
&:last-child
margin-bottom: -10px
&:not(:last-child)
margin-bottom: 10px
&.is-child
margin: 0 !important
&.is-parent
padding: 10px
&.is-vertical
flex-direction: column
& > .tile.is-child:not(:last-child)
margin-bottom: 20px !important
// Responsiveness
+tablet
&:not(.is-child)
display: flex
@for $i from 1 through 12
&.is-#{$i}
flex: none
width: ($i / 12) * 100%