reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Converting Layouts to new BEM-Generator

Browse Source
This commit is contained in:
reverend
2021-01-17 19:31:19 +01:00
parent eca0624fd3
commit c990a740b0
9 changed files with 457 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
components/01_Layouts/flexGrid/_flexGrid.styl
View File

@@ -1,51 +1,54 @@
RV-FlexGrid__Container()
RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
+RV-Block__Modifier--name('autoWidth')
grid-template-columns repeat(auto-fill, minmax(item-min-width, 1fr))
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
grid-auto-rows minmax(item-height, 1fr)
RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
+RV-Block__Modifier--name('fixedSize')
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
grid-auto-rows minmax(item-height, 1fr)
grid-template-columns repeat(auto-fill, item-width)
justify-content space-between
RV-FlexGrid--masonry(item-width=300px)
+RV-Block__Modifier--name('masonry')
display unquote(block)
column-count auto
column-width item-width
gap 0
+RV-Element('Item')
margin-bottom: var(--inner-spacing);
*{
margin-bottom: unset;
}
RV-FlexGrid__Item()
+RV-Element--name('Item')
pass
RV-FlexGrid()
display grid
RV-FlexGrid__Container--autoWidth(item-height=300px, item-min-width=300px)
grid-template-columns repeat(auto-fill, minmax(item-min-width, 1fr))
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
grid-auto-rows minmax(item-height, 1fr)
RV-FlexGrid__Container--fixedSize(item-height=300px, item-width=300px)
RV-FlexGrid__Container--autoWidth(item-height, item-width)
grid-template-columns repeat(auto-fill, item-width)
justify-content space-between
RV-FlexGrid__Container--masonry(item-width=300px)
display unquote(block)
column-count auto
column-width item-width
RV-Utils__Hook--throw('masonry_grid', @(gap){
*{
margin-bottom: gap;
*{
margin-bottom: unset;
}
}
}
)
RV-FlexGrid--shorthands(prefix='&')
{prefix}__Container
&--autoWidth
RV-FlexGrid__Container--autoWidth()
&--fixedSize
RV-FlexGrid__Container--fixedSize()
&--masonry
RV-FlexGrid__Container--masonry()
RV-FlexGrid(prefix='&')
{prefix}__Container
RV-FlexGrid__Container()
{prefix}__Item
RV-Alignment()
.RV-FlexGrid
+RV-Block('RV-FlexGrid')
RV-CSSParameter({
item-height: 300px,
item-width: 300px
})
RV-FlexGrid()
RV-FlexGrid--shorthands()
+RV-Element()
RV-FlexGrid__Item()
+RV-Block__Modifier()
RV-FlexGrid--autoWidth(item-height, item-width)
+RV-Block__Modifier()
RV-FlexGrid--fixedSize(item-height, item-width)
+RV-Block__Modifier()
RV-FlexGrid--masonry(item-width)

8
components/01_Layouts/flexGrid/flexGrid.hbs
View File

@@ -1,4 +1,4 @@
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--autoWidth">
<div class="RV-FlexGrid RV-FlexGrid--autoWidth">
<div class="red RV-FlexGrid__Item">Heres</div>
<div class="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item">totally</div>
@@ -15,7 +15,7 @@
<br><br>
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--fixedSize">
<div class="RV-FlexGrid RV-FlexGrid--fixedSize">
<div class="red RV-FlexGrid__Item">Heres</div>
<div class="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item">totally</div>
@@ -32,7 +32,7 @@
<br><br>
<div class="RV-FlexGrid__Container RV-FlexGrid__Container--masonry RV-Spacing__Inner--small">
<div class="RV-FlexGrid RV-FlexGrid--masonry">
<div class="red RV-FlexGrid__Item">Heres</div>
<div class="green RV-FlexGrid__Item">some</div>
<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--right">totally (right)</div>
@@ -45,4 +45,4 @@
<div class="green RV-FlexGrid__Item">you</div>
<div class="red RV-FlexGrid__Item">to</div>
<div class="green RV-FlexGrid__Item">enjoy</div>
</div>
</div>