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

Reordering, Layouts now No 1

Browse Source
This commit is contained in:
reverend
2021-01-17 22:57:31 +01:00
parent 64b21a2c81
commit ffa284b01f
41 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/01_Layouts/sizes/_sizes.styl Normal file
View File

@@ -0,0 +1,51 @@
RV-Sizes--half()
+RV-Block__Modifier--name('half')
flex-grow 0
flex-shrink 0
flex-basis 50%
width 50%
RV-Sizes--third()
+RV-Block__Modifier--name('third')
flex-grow 0
flex-shrink 0
flex-basis (100/3)%
width (100/3)%
RV-Sizes--quarter()
+RV-Block__Modifier--name('quarter')
flex-grow 0
flex-shrink 0
flex-basis 25%
width 25%
RV-Sizes--fixedSize(width=100px)
+RV-Block__Modifier--name('fixedSize')
flex-grow 0
flex-shrink 0
width min-content
flex-basis width
RV-Sizes--content()
+RV-Block__Modifier--name('content')
flex-grow 0
flex-shrink 0
width max-content
flex-basis max-content
+RV-Block('RV-Sizes')
+RV-Block__Modifier()
RV-Sizes--half()
+RV-Block__Modifier()
RV-Sizes--third()
+RV-Block__Modifier()
RV-Sizes--quarter()
+RV-Block__Modifier()
RV-Sizes--fixedSize()
+RV-Block__Modifier()
RV-Sizes--content()

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

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

96
components/01_Layouts/sizes/sizes.hbs Normal file
View File

@@ -0,0 +1,96 @@
<div class="grid">
<div>
<div class="red RV-Sizes--half">
non flexbox, half size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div>
<div class="red RV-Sizes--third">
non flexbox, third size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div>
<div class="red RV-Sizes--quarter">
non flexbox, quarter size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div>
<div class="red RV-Sizes--fixedSize" style="width: 150px;">
non flexbox, fixed size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div>
<div class="red RV-Sizes--content">
non flexbox, content size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br><br>
using flexbox<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--half">
non flexbox, half size
</div>
<div class="green RV-Sizes--quarter">
non flexbox, quarter size
</div>
<inline class="red">
other, no class
</inline>
</div>
<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--third">
non flexbox, third size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--quarter">
non flexbox, quarter size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--fixedSize" style="width: 150px;">
non flexbox, fixed size
</div>
<inline class="green">
other, no class
</inline>
</div>
<br>
<div class="RV-FlexRow__Container">
<div class="red RV-Sizes--content">
non flexbox, content size
</div>
<inline class="green">
other, no class
</inline>
</div>
</div>