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

Renaming Dicts according to atomic design

Browse Source
This commit is contained in:
reverend
2021-01-17 22:54:33 +01:00
parent 4ac61a8224
commit 64b21a2c81
49 changed files with 410 additions and 829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/01_Layouts/_layouts.styl
View File

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

61
components/01_Layouts/alignment/_alignment.styl
View File

@@ -1,61 +0,0 @@
RV-Alignment--top()
+RV-Block__Modifier--name('top')
display grid
align-content start
RV-Alignment--bottom()
+RV-Block__Modifier--name('bottom')
display grid
align-content end
RV-Alignment--left()
+RV-Block__Modifier--name('left')
display grid
justify-content start
RV-Alignment--right()
+RV-Block__Modifier--name('right')
display grid
justify-content: end
RV-Alignment--horizontalCenter()
+RV-Block__Modifier--name('horizontalCenter')
display grid
justify-content center
RV-Alignment--verticalCenter()
+RV-Block__Modifier--name('verticalCenter')
display grid
align-items center
RV-Alignment--center()
+RV-Block__Modifier--name('center')
RV-Alignment--horizontalCenter()
RV-Alignment--verticalCenter()
RV-Alignment()
display grid
+RV-Block('RV-Alignment')
RV-Alignment()
+RV-Block__Modifier()
RV-Alignment--top()
+RV-Block__Modifier()
RV-Alignment--bottom()
+RV-Block__Modifier()
RV-Alignment--left()
+RV-Block__Modifier()
RV-Alignment--right()
+RV-Block__Modifier()
RV-Alignment--horizontalCenter()
+RV-Block__Modifier()
RV-Alignment--verticalCenter()
+RV-Block__Modifier()
RV-Alignment--center()

1
components/01_Layouts/alignment/alignment.config.json
View File

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

20
components/01_Layouts/alignment/alignment.hbs
View File

@@ -1,20 +0,0 @@
<div class="RV-Alignment__Container RV-Alignment__Container--verticalCenter RV-Spacing__Outer--medium">
<div class="RV-FlexRow__Container">
<div class="RV-FlexRow__Item">Im a text</div>
<div class="RV-FlexRow__Item RV-FlexRow__Item--fixedSize"><span class="RV-Iconized__Container">
<svg class="RV-Iconized__Icon--small" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 482.136 482.135" style="enable-background:new 0 0 482.136 482.135;"
xml:space="preserve">
<g>
<path d="M455.482,198.184L326.829,326.832c-35.535,35.54-93.108,35.54-128.646,0l-42.881-42.886l42.881-42.876l42.884,42.876
c11.845,11.822,31.064,11.846,42.886,0l128.644-128.643c11.816-11.831,11.816-31.066,0-42.9l-42.881-42.881
c-11.822-11.814-31.064-11.814-42.887,0l-45.928,45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526
c35.535-35.521,93.136-35.521,128.644,0l42.886,42.881C491.018,105.045,491.018,162.663,455.482,198.184z M201.206,366.698
l-45.903,45.9c-11.845,11.846-31.064,11.817-42.881,0l-42.884-42.881c-11.845-11.821-11.845-31.041,0-42.886l128.646-128.648
c11.819-11.814,31.069-11.814,42.884,0l42.886,42.886l42.876-42.886l-42.876-42.881c-35.54-35.521-93.113-35.521-128.65,0
L26.655,283.946c-35.538,35.545-35.538,93.146,0,128.652l42.883,42.882c35.51,35.54,93.11,35.54,128.646,0l72.496-72.499
C246.724,384.578,222.588,379.197,201.206,366.698z"/>
</g>
</svg>
</span></div>
</div>
</div>

196
components/01_Layouts/contentCrop/_contentCrop.styl
View File

@@ -1,196 +0,0 @@
RV-ContentCrop--bottom()
+RV-Block__Modifier--name('bottom')
.RV-Image *
object-position bottom
RV-ContentCrop--top()
+RV-Block__Modifier--name('top')
.RV-Image *
object-position top
RV-ContentCrop--right()
+RV-Block__Modifier--name('right')
.RV-Image *
object-position right
RV-ContentCrop--left()
+RV-Block__Modifier--name('left')
.RV-Image *
object-position left
RV-ContentCrop--center()
+RV-Block__Modifier--name('center')
.RV-Image *
object-position center
RV-ContentCrop--square()
+RV-Block__Modifier--name('square')
width 100%
padding-top 100%
position relative
.RV-Image *,
div
position absolute
top 0
left 0
bottom 0
right 0
RV-ContentCrop--circle()
+RV-Block__Modifier--name('circle')
RV-ContentCrop__Square()
border-radius 50%
RV-ContentCrop--XtoY(x=1, y=1)
RV-CSSParameter({
x: x,
y: y
})
+RV-Block__Modifier--name('XtoY')
width 100%
padding-top 100% * (y / x)
position relative
.RV-Image *
object-fit cover
position absolute
top 0
left 0
bottom 0
right 0
RV-ContentCrop--1to2()
+RV-Block__Modifier--name('1to2')
RV-ContentCrop__XtoY(1, 2)
RV-ContentCrop--2to1()
+RV-Block__Modifier--name('2to1')
RV-ContentCrop__XtoY(2, 1)
RV-ContentCrop--4to3()
+RV-Block__Modifier--name('4to3')
RV-ContentCrop__XtoY(4, 3)
RV-ContentCrop--16to9()
+RV-Block__Modifier--name('16to9')
RV-ContentCrop__XtoY(16, 9)
RV-ContentCrop--3to2()
+RV-Block__Modifier--name('3to2')
RV-ContentCrop__XtoY(3, 2)
RV-ContentCrop__Image()
+RV-Element--name('Image')
.RV-Image *, .RV-Image
width 100%
height 100%
object-fit cover
display block
RV-ContentCrop__Text--fade(background-color=white)
+RV-Element__Modifier--name('fade')
&:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content ' '
opacity 0.8
position relative
top -25%
width 100%
height 25%
z-index 10
RV-ContentCrop__Text--ellipsis(background-color=white)
+RV-Element__Modifier--name('ellipsis')
&:after
position relative
display block
bottom 1.2em
left calc(100% - 3ch)
content '...'
font-size 1.2em
min-width 2em
background-color background-color
padding 0 2px
RV-ContentCrop__Text(line-height=1.1, background-color=white)
+RV-Element--name('Text')
--cc 'text'
& .RV-Text
overflow hidden
display block
text-overflow ellipsis
// Determining the max line count and caclulating the height
line-height line-height
position relative
background-color background-color
max-height floor(100% / line-height / 16) * line-height * 16
padding 0
margin 0
*
margin 0
padding-bottom line-height * 16px
*:last-child
padding-bottom unset
RV-ContentCrop(line-height=1.1)
line-height = calc(line-height * 1.1)
background-color = white
display block
overflow hidden
+RV-Block('RV-ContentCrop')
line-height = 1.1
RV-ContentCrop(line-height)
+RV-Element()
RV-ContentCrop__Image()
+RV-Element()
RV-ContentCrop__Text(line-height)
+RV-Element__Modifier()
RV-ContentCrop__Text--ellipsis()
+RV-Element__Modifier()
RV-ContentCrop__Text--fade()
+RV-Block__Modifier()
RV-ContentCrop--bottom()
+RV-Block__Modifier()
RV-ContentCrop--top()
+RV-Block__Modifier()
RV-ContentCrop--right()
+RV-Block__Modifier()
RV-ContentCrop--left()
+RV-Block__Modifier()
RV-ContentCrop--center()
+RV-Block__Modifier()
RV-ContentCrop--square()
+RV-Block__Modifier()
RV-ContentCrop--1to2()
+RV-Block__Modifier()
RV-ContentCrop--2to1()
+RV-Block__Modifier()
RV-ContentCrop--4to3()
+RV-Block__Modifier()
RV-ContentCrop--16to9()
+RV-Block__Modifier()
RV-ContentCrop--3to2()

1
components/01_Layouts/contentCrop/contentCrop.config.json
View File

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

119
components/01_Layouts/contentCrop/contentCrop.hbs
View File

@@ -1,119 +0,0 @@
<h2>Square</h2>
<div class="square RV-ContentCrop">
<div class="RV-Image"><img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
<br>
<div class="square RV-ContentCrop RV-ContentCrop--ellipsis">
<div class="RV-Text">
<p>You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
</div>
<br>
<div class="square RV-ContentCrop">
<div class="portrait red"></div>
</div>
<br>
<h2>Landscape</h2>
<div class="landscape RV-ContentCrop">
<div class="RV-Image"><img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
<div class="landscape RV-ContentCrop RV-ContentCrop--ellipsis">
<div class="RV-Text">
<p>You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
</div>
<br>
<div class="landscape RV-ContentCrop">
<div class="portrait red"></div>
</div>
<br>
<h2>Portrait</h2>
<div class="portrait RV-ContentCrop">
<div class="RV-Image"><img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
<br>
<div class="portrait RV-ContentCrop RV-ContentCrop--fade">
<div class="RV-Text">
<p>Some Text</p>
<p>More Text</p>
<p>You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
</div>
<br>
<div class="portrait RV-ContentCrop">
<div class="landscape red"></div>
</div>
<br>
<h2>Full width</h2>
<div class="full-width RV-ContentCrop">
<div class="RV-Image">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
</div>
</div>
<br>
<div class="ull-width RV-ContentCrop RV-ContentCrop--ellipsis">
<p>You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
<br>
<div class="full-width RV-ContentCrop">
<div class="portrait red"></div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--square">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<br><br>
<div>
<div class="RV-ContentCrop RV-ContentCrop--circle">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div class="RV-ContentCrop--square">
<div>
<p>You could see there was text coming out of her eyes, text coming out of her wherever. Trump Ipsum is calling for a total and complete shutdown of Muslim text entering your website. Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.</p>
</div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--1to2">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--2to1">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--4to3">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--16to9">
<div class="RV-Image"> <img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/></div>
</div>
</div>
<div>
<div class="RV-ContentCrop RV-ContentCrop--3to2">
<div class="RV-Image">
<img src="https://4.bp.blogspot.com/-BlvBzRWyTp0/T1O_L3qrf1I/AAAAAAAAEBY/m5VTaH6AOe4/s640/cute-bunny-pictures-006.jpg"/>
</div>
</div>
</div>

129
components/01_Layouts/fan/_fan.styl
View File

@@ -1,129 +0,0 @@
/*
* A Fan is a layout that consists of two parts:
* The base and the surface, named after a hand fan.
* The base is always left handed, where as the surface
* can be right of the base or below.
*/
/* ######################
* Block Modifiers Mixins
* ###################### */
/*
* Base on the left, Surface on the right
* Base is fixed, given size, Surface is given height
* but will fill the parent's width
*/
RV-Fan--horizontal(base-height, base-width)
+RV-Block__Modifier--name('horizontal')
flex-direction row
+RV-Element('Surface')
min-width base-width
height base-height
/*
* Base above, Surfce below
* Base is fixed, given size, base is given width
* minimal height is given height, will grow with content
*/
RV-Fan--vertical(base-height, base-width)
+RV-Block__Modifier--name('vertical')
flex-direction column
width max-content
+RV-Element('Surface')
width base-width
min-height base-height
/*
* Initialy horizontal, changes to vertical when
* the width of the parent is less than 2 x base-width
* Width of the base and surface in vertical are base-width
*/
RV-Fan--auto(base-height, base-width)
+RV-Block__Modifier--name('auto')
flex-flow row wrap
+RV-Element('Surface')
width 'calc(100% - %s)' % base-width
min-width base-width
height base-height
/*
* Also initialy horizontal, changes to vertical when
* the width of the parent is less than 2 x base-width
* Width of the base and the surface in vertical mode
* are 100% of the parent width
*/
RV-Fan--fullWidth(base-height, base-width)
+RV-Block__Modifier--name('fullWidth')
RV-Fan--auto(base-height, base-width)
+RV-Element('Base')
flex-grow 1
+RV-Element('Surface')
flex-grow 1
/* ###############
* Element Mixins
* ############### */
RV-Fan__Base(base-height, base-width)
+RV-Element--name('Base')
height base-height
width base-width
flex 0 0 auto
RV-Fan__Surface--fixedHeight(height)
+RV-Element__Modifier--name('fixedHeight')
height height
RV-Fan__Surface--fixedWidth(width)
+RV-Element__Modifier--name('fixedWidth')
max-width width
RV-Fan__Surface()
+RV-Element--name('Surface')
RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Image()
/* ############
* Block Mixin
* ############ */
RV-Fan()
display flex
/* #########
* CSS-Class
* ######### */
+RV-Block('RV-Fan')
RV-CSSParameter({
base-height: 280px,
base-width: 320px
})
RV-Fan()
+RV-Element()
RV-Fan__Surface()
+RV-Element__Modifier()
RV-Fan__Surface--fixedWidth(base-width)
+RV-Element__Modifier()
RV-Fan__Surface--fixedHeight(base-height)
+RV-Element()
RV-Fan__Base(base-height, base-width)
+RV-Block__Modifier()
RV-Fan--fullWidth(base-height, base-width)
+RV-Block__Modifier()
RV-Fan--vertical(base-height, base-width)
+RV-Block__Modifier()
RV-Fan--horizontal(base-height, base-width)
+RV-Block__Modifier()
RV-Fan--auto(base-height, base-width)

1
components/01_Layouts/fan/fan.config.json
View File

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

90
components/01_Layouts/fan/fan.hbs
View File

@@ -1,90 +0,0 @@
<div class="RV-Fan RV-Fan--horizontal">
<div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface">
<div class="RV-Text"> <p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div>
</div>
<br><br>
<div class="RV-Fan RV-Fan--auto">
<div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface">
<div class="RV-Text">
<p>Some content here</p>
<p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div>
</div>
<br><br>
<div class="RV-Fan RV-Fan--fullWidth">
<div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface">
<div class="RV-Text">
<p>Some content here</p>
<p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div>
</div>
<br><br>
<div class="RV-Fan RV-Fan--vertical">
<div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface">
<div class="RV-Text">
<p>Some content here</p>
<p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div>
</div>
<br><br>
<div class="RV-Fan RV-Fan--vertical">
<div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface RV-Fan__Surface--fixedHeight">
<div class="RV-Text">
<p>Some content here</p>
<p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div>
</div>
<br><br>
<div class="RV-Fan RV-Fan--horizontal">
<div class="red RV-Fan__Base"></div>
<div class="green RV-Fan__Surface RV-Fan__Surface--fixedWidth">
<div class="RV-Text">
<p>Some content here</p>
<p>More conthent over here</p>
<p>Et voluptas earum ut. Distinctio qui eaque quo aliquid ipsam ut. Et est sit sed odio aliquam nam. Possimus numquam officiis tenetur quibusdam sint quos sit est. Doloremque hic totam error velit hic. Dolorum labore necessitatibus cumque quisquam voluptate molestiae quae aspernatur.
Quasi vitae cupiditate ducimus nihil. Repudiandae est iste aperiam mollitia et est occaecati at. Nobis ut voluptates tempora quis esse ipsam.
Praesentium facere ea deserunt accusantium velit eos. Eaque non sapiente repellendus facilis omnis eligendi. Deserunt officiis consequatur nihil maiores explicabo. Perspiciatis qui quia et amet.</p></div>
</div>
</div>

53
components/01_Layouts/flexGrid/_flexGrid.styl
View File

@@ -1,53 +0,0 @@
RV-FlexGrid--autoWidth(item-height=300px, item-min-width=300px)
+RV-Block__Modifier--name('autoWidth')
grid-template-columns repeat(auto-fill, minmax(item-min-width, 1fr))
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
grid-auto-rows minmax(item-height, 1fr)
RV-FlexGrid--fixedSize(item-height=300px, item-width=300px)
+RV-Block__Modifier--name('fixedSize')
grid-template-rows repeat(auto-fill, minmax(item-height, 1fr))
grid-auto-rows minmax(item-height, 1fr)
grid-template-columns repeat(auto-fill, item-width)
justify-content space-between
RV-FlexGrid--masonry(item-width=300px)
+RV-Block__Modifier--name('masonry')
display unquote(block)
column-count auto
column-width item-width
+RV-Element('Item')
margin-bottom: var(--inner-spacing);
*{
margin-bottom: unset;
}
RV-FlexGrid__Item()
+RV-Element--name('Item')
pass
RV-FlexGrid()
display grid
+RV-Block('RV-FlexGrid')
RV-CSSParameter({
item-height: 300px,
item-width: 300px
})
RV-FlexGrid()
+RV-Element()
RV-FlexGrid__Item()
+RV-Block__Modifier()
RV-FlexGrid--autoWidth(item-height, item-width)
+RV-Block__Modifier()
RV-FlexGrid--fixedSize(item-height, item-width)
+RV-Block__Modifier()
RV-FlexGrid--masonry(item-width)

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

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

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

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

166
components/01_Layouts/flexRow/_flexRow.styl
View File

@@ -1,166 +0,0 @@
/*
* Classes for easy flexrow usage
*/
/*
* Orientation
*/
RV-FlexRow--horizontal()
+RV-Block__Modifier--name('horizontal')
flex-direction row
RV-FlexRow--vertical()
+RV-Block__Modifier--name('vertical')
flex-direction column
/*
* Breaks from row to column orientation at the given breakpoint
* breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
*/
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
+RV-Block__Modifier--name('breakPoint')
flex-wrap wrap
RV-Reset()
gap 0px
RV-Utils__ElementAmount(@(index, total){
min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
}
)
+RV-Element('Item')
min-width initial
flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
overflow hidden
@media(max-width mediaBreakPoint)
flex-direction row
/*
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
*/
RV-FlexRow--auto()
+RV-Block__Modifier--name('auto')
RV-FlexRow--horizontal()
flex-wrap wrap
/* ##########
* Item class
########### */
RV-FlexRow__Item()
+RV-Element--name('Item')
flex-basis max-content
flex-grow 3
flex-shrink 3
/*
* Varios relative width of items to each other
*/
RV-FlexRow__Item--narrower()
+RV-Element__Modifier--name('narrower')
flex-grow 1
flex-shrink 5
RV-FlexRow__Item--narrow()
+RV-Element__Modifier--name('narrow')
flex-grow 2
flex-shrink 4
RV-FlexRow__Item--wide()
+RV-Element__Modifier--name('wide')
flex-grow 4
flex-shrink 2
RV-FlexRow__Item--wider()
+RV-Element__Modifier--name('wider')
flex-grow 5
flex-shrink 1
/*
* Item has always the given width
*/
RV-FlexRow__Item--fixedSize(width)
+RV-Element__Modifier--name('fixedSize')
RV-Sizes--fixedSize(width)
/*
* Item width relativ to the container
*/
RV-FlexRow__Item--half()
+RV-Element__Modifier--name('half')
RV-Sizes--half()
RV-FlexRow__Item--third()
+RV-Element__Modifier--name('third')
RV-Sizes--third()
RV-FlexRow__Item--quarter()
+RV-Element__Modifier--name('quarter')
RV-Sizes--quarter()
RV-FlexRow__Item--content()
+RV-Element__Modifier--name('content')
RV-Sizes--content()
/* ##########
* Block
########### */
RV-FlexRow()
display flex
height 100%
+RV-Block('RV-FlexRow')
RV-FlexRow()
RV-CSSParameter({
width: 100px
localBreakPoint: 500px,
mediaBreakPoint: 100vw
})
+RV-Element()
RV-FlexRow__Item()
+RV-Element__Modifier()
RV-FlexRow__Item--narrower()
+RV-Element__Modifier()
RV-FlexRow__Item--narrow()
+RV-Element__Modifier()
RV-FlexRow__Item--wide()
+RV-Element__Modifier()
RV-FlexRow__Item--wider()
+RV-Element__Modifier()
RV-FlexRow__Item--fixedSize(width)
+RV-Element__Modifier()
RV-FlexRow__Item--narrower()
+RV-Element__Modifier()
RV-FlexRow__Item--half()
+RV-Element__Modifier()
RV-FlexRow__Item--third()
+RV-Element__Modifier()
RV-FlexRow__Item--quarter()
+RV-Element__Modifier()
RV-FlexRow__Item--content()
+RV-Block__Modifier()
RV-FlexRow--horizontal()
+RV-Block__Modifier()
RV-FlexRow--vertical()
+RV-Block__Modifier()
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
+RV-Block__Modifier()
RV-FlexRow--auto()

1
components/01_Layouts/flexRow/flexRow.config.json
View File

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

38
components/01_Layouts/flexRow/flexRow.hbs
View File

@@ -1,38 +0,0 @@
<div class="RV-FlexRow">
<div class="red RV-FlexRow__Item">Im normal</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--center">Center</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--left"><span>wrapped content left</span></div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div>
</div>
<br></br>
<div class="RV-FlexRow">
<div class="red RV-FlexRow__Item">Im normal</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right RV-FlexRow__Item--fixedSize">Right</div>
</div>
<br><br>
<div class="RV-FlexRow RV-FlexRow--multiRow">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">narrower</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">narrow</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">normal</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">wide</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--wider">wider</div>
</div>
<br><br>
<div class="RV-FlexRow RV-Spacing__Inner--small">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">.</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
</div>
<br><br>
<div class="RV-FlexRow RV-FlexRow--breakPoint">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">sdfkjsakfjsdök</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">blubbber</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
</div>

15
components/01_Layouts/fullWidthContent/_fullWidthContent.styl
View File

@@ -1,15 +0,0 @@
RV-FullWidthContent()
width 100%
RV-FullWidthContent__Item()
+RV-Element--name('Item')
width 100%
RV-ContentCrop__Text()
RV-ContentCrop__Image()
+RV-Block('RV-FullWidthContent')
RV-FullWidthContent()
+RV-Element()
RV-FullWidthContent__Item()

1
components/01_Layouts/fullWidthContent/fullWidthContent.config.json
View File

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

11
components/01_Layouts/fullWidthContent/fullWidthContent.hbs
View File

@@ -1,11 +0,0 @@
<div clas="RV-FullWidthContent__Container">
<div class="RV-FullWidthContent__Item">
<img src="http://via.placeholder.com/780x600"/>
</div>
<div class="RV-FullWidthContent__Item">
<img src="http://via.placeholder.com/360x280"/>
</div>
<div class="RV-FullWidthContent__Item"></div>
<div class="RV-FullWidthContent__Item"></div>
<div class="RV-FullWidthContent__Item"></div>
</div>

51
components/01_Layouts/sizes/_sizes.styl
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()

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

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

96
components/01_Layouts/sizes/sizes.hbs
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>