(Re)Moving Sizes/Add Dummy sizes

This commit is contained in:
reverend 2021-01-19 23:36:56 +01:00
parent 3dfc19111b
commit d070cc07bf
7 changed files with 29 additions and 153 deletions

View File

@ -1,7 +1,7 @@
@import 'sizes/_sizes'
@import 'contentCrop/_contentCrop'
@import 'fullWidthContent/_fullWidthContent'
@import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid'
@import 'fan/_fan'
@import 'alignment/_alignment'
@import 'alignment/_alignment'
@import 'dummy/_dummy'

View File

@ -0,0 +1,15 @@
+RV-Block('RV-Dummy')
+RV-Block__Modifier('square')
height 350px
width 350px
+RV-Block__Modifier('portrait')
height 350px
width 150px
+RV-Block__Modifier('landscape')
width 350px
height 150px
+RV-Block__Modifier('red')
background-color #d8583e

View File

View File

@ -90,19 +90,27 @@ RV-FlexRow__Item--fixedSize(width)
*/
RV-FlexRow__Item--half()
+RV-Element__Modifier--name('half')
RV-Sizes--half()
flex-grow 0
flex-shrink 0
flex-basis 50%
RV-FlexRow__Item--third()
+RV-Element__Modifier--name('third')
RV-Sizes--third()
flex-grow 0
flex-shrink 0
flex-basis (100/3)%
RV-FlexRow__Item--quarter()
+RV-Element__Modifier--name('quarter')
RV-Sizes--quarter()
flex-grow 0
flex-shrink 0
flex-basis 25%
RV-FlexRow__Item--content()
+RV-Element__Modifier--name('content')
RV-Sizes--content()
flex-grow 0
flex-shrink 0
flex-basis max-content
/* ##########
* Block

View File

@ -1,51 +0,0 @@
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()

View File

@ -1,96 +0,0 @@
<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>