(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 'contentCrop/_contentCrop'
@import 'fullWidthContent/_fullWidthContent' @import 'fullWidthContent/_fullWidthContent'
@import 'flexRow/_flexRow' @import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid' @import 'flexGrid/_flexGrid'
@import 'fan/_fan' @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-FlexRow__Item--half()
+RV-Element__Modifier--name('half') +RV-Element__Modifier--name('half')
RV-Sizes--half() flex-grow 0
flex-shrink 0
flex-basis 50%
RV-FlexRow__Item--third() RV-FlexRow__Item--third()
+RV-Element__Modifier--name('third') +RV-Element__Modifier--name('third')
RV-Sizes--third() flex-grow 0
flex-shrink 0
flex-basis (100/3)%
RV-FlexRow__Item--quarter() RV-FlexRow__Item--quarter()
+RV-Element__Modifier--name('quarter') +RV-Element__Modifier--name('quarter')
RV-Sizes--quarter() flex-grow 0
flex-shrink 0
flex-basis 25%
RV-FlexRow__Item--content() RV-FlexRow__Item--content()
+RV-Element__Modifier--name('content') +RV-Element__Modifier--name('content')
RV-Sizes--content() flex-grow 0
flex-shrink 0
flex-basis max-content
/* ########## /* ##########
* Block * 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>