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

Using Variants

Browse Source
This commit is contained in:
reverend
2021-01-19 23:37:23 +01:00
parent d070cc07bf
commit 7b54ad4c42
4 changed files with 124 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/01_Layouts/flexGrid/flexGrid.config.json
View File

@@ -1 +1,23 @@
{}
{
"title": "FlexGRid",
"variants": [
{
"name": "AutoWidth",
"context": {
"modifier": "--autoWidth"
}
},
{
"name": "FixedSize",
"context": {
"modifier": "--fixedSize"
}
},
{
"name": "Masonry",
"context": {
"modifier": "--masonry"
}
}
]
}

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

@@ -1,48 +1,52 @@
<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>
<div class="green RV-FlexGrid__Item">awesome</div>
<div class="red RV-FlexGrid__Item">content</div>
<div class="green RV-FlexGrid__Item">for</div>
<div class="red RV-FlexGrid__Item">you</div>
<div class="green RV-FlexGrid__Item">only</div>
<div class="red RV-FlexGrid__Item">for</div>
<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>
<br><br>
<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>
<div class="green RV-FlexGrid__Item">awesome</div>
<div class="red RV-FlexGrid__Item">content</div>
<div class="green RV-FlexGrid__Item">for</div>
<div class="red RV-FlexGrid__Item">you</div>
<div class="green RV-FlexGrid__Item">only</div>
<div class="red RV-FlexGrid__Item">for</div>
<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>
<br><br>
<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>
<div class="green RV-FlexGrid__Item RV-FlexGrid__Item--center">awesome</div>
<div class="red RV-FlexGrid__Item">content</div>
<div class="green RV-FlexGrid__Item">for</div>
<div class="red RV-FlexGrid__Item">you <br>(im sneaking in some height)</div>
<div class="green RV-FlexGrid__Item">only</div>
<div class="red RV-FlexGrid__Item RV-FlexGrid__Item--fixedSize">fixed for</div>
<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 class="RV-FlexGrid RV-FlexGrid{{modifier}} RV-Spacing__Inner--medium">
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/square.jpeg'}}"/>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--simple RV-Spacing__Inner--medium">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/portrait.jpeg'}}"/>
</div>
</div>
</div>