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

More Scaffold and first layouts

Browse Source
This commit is contained in:
reverend
2020-08-21 16:50:22 +02:00
parent fab49a09fb
commit 232c869d43
20 changed files with 495 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/01_Layouts/flexGrid/_flexGrid.scss Normal file
View File

@@ -0,0 +1,20 @@
RV-FlexGrid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
&--sameHeight {
grid-auto-rows: 1fr;
}
&--spacing {
gap: 10px;
}
}
.RV-FlexGrid__Container {
@extend RV-FlexGrid;
.RV-FlexGrid__Item {
@include align-content;
}
}

1
components/01_Layouts/flexGrid/flexGrid.config.json Normal file
View File

@@ -0,0 +1 @@
{}

31
components/01_Layouts/flexGrid/flexGrid.hbs Normal file
View File

@@ -0,0 +1,31 @@
<div class="RV-FlexGrid__Container">
<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__Container RV-FlexGrid__Container--sameHeight">
<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>