Switching to BEM Generator

components/00_ContentShape/aspectRatio/_aspectRatio.styl

@@ -1,16 +1,41 @@
+/**
+ * Mixins to maintain aspect ratio of an element.
+ */
 RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
-	RV-CSSParameter({
+	+RV-Block__Modifier--name('XtoY')
-		aspectX: aspectX,
+		RV-CSSParameter({
-		aspectY: aspectY
+			aspectX: aspectX,
-	})
+			aspectY: aspectY
-	
+		})
-	padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX)
-	&:last-child
-		margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX)
 		
-	RV-Utils__ElementAmount(1, @(index, totale){
+		padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX)
-		margin-bottom 0px
+		&:last-child
-	})
+			margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX)
+			
+		RV-Utils__ElementAmount(1, @(index, totale){
+			margin-bottom 0px
+		})
+
+RV-AspectRatio--1to2()
+	+RV-Block__Modifier('1to2')
+		RV-AspectRatio--XtoY(1, 2)
+		
+RV-AspectRatio--2to1()
+	+RV-Block__Modifier('2to1')
+		RV-AspectRatio--XtoY(2, 1)
+	
+RV-AspectRatio--3to2()
+	+RV-Block__Modifier('3to2')
+		RV-AspectRatio--XtoY(3, 2)
+		
+RV-AspectRatio--4to3()
+	+RV-Block__Modifier('4to3')
+		RV-AspectRatio--XtoY(4, 3)
+		
+RV-AspectRatio--16to9()
+	+RV-Block__Modifier('16to9')
+		RV-AspectRatio--XtoY(16, 9)
+
 
 RV-AspectRatio()
 	position relative
@@ -26,36 +51,20 @@ RV-AspectRatio()
 		bottom 0
 		right 0
 
-RV-AspectRatio--1to2()
++RV-Block('RV-AspectRatio')
-	RV-AspectRatio--XtoY(1, 2)
-		
-RV-AspectRatio--2to1()
-	RV-AspectRatio--XtoY(2, 1)
-	
-RV-AspectRatio--3to2()
-	RV-AspectRatio--XtoY(3, 2)
-		
-RV-AspectRatio--4to3()
-	RV-AspectRatio--XtoY(4, 3)
-		
-RV-AspectRatio--16to9()
-	RV-AspectRatio--XtoY(16, 9)
-
-
-.RV-AspectRatio
 	RV-AspectRatio()
 	
-	&--1to2
+	+RV-Block__Modifier()
 		RV-AspectRatio--1to2()
 	
-	&--2to1
+	+RV-Block__Modifier()
 		RV-AspectRatio--2to1()
 		
-	&--3to2
+	+RV-Block__Modifier()
 		RV-AspectRatio--3to2()
 		
-	&--4to3
+	+RV-Block__Modifier()
 		RV-AspectRatio--4to3()
 		
-	&--16to9
+	+RV-Block__Modifier()
 		RV-AspectRatio--16to9()

components/00_ContentShape/focalPoint/_focalPoint.styl

@@ -1,4 +1,37 @@
-// FocalPoint in percentage
+/**
+ * This mixins helps you positioning objects (i.e. images, videos) to a 'focal point'.
+ * A focal point is a manual choosen point in an object that will be in the center of the cropped object.
+ * If the object is not cropped, the focal point does not apply. Best used with RV-AspectRatio.
+ * The focal point is given in percentages relative to the objects size.
+ 
+ * To set the focal point either use one the the predefined classes or set them using inline CSS:
+ * class="RV-FocalPoint" style="--focalX: 44%; --focalY: 16.66%"
+ * 
+ */
+RV-FocalPoint--upperHalf()
+	+RV-Block__Modifier--name('upperHalf')
+		RV-CSSParameter({
+			focalY: 25%
+		})
+
+RV-FocalPoint--lowerHalf()
+	+RV-Block__Modifier--name('lowerHalf')
+		RV-CSSParameter({
+			focalY: 75%
+		})
+
+RV-FocalPoint--leftHalf()
+	+RV-Block__Modifier--name('leftHalf')
+		RV-CSSParameter({
+			focalX: 25%
+		})
+
+RV-FocalPoint--rightHalf()
+	+RV-Block__Modifier--name('rightHalf')
+		RV-CSSParameter({
+			focalX: 75%
+		})
+
 RV-FocalPoint(focalX=50%, focalY=50%)
 	RV-CSSParameter({
 		focalX: focalX,
@@ -10,39 +43,19 @@ RV-FocalPoint(focalX=50%, focalY=50%)
 	object-fit cover
 	object-position --focalX --focalY
 
-RV-FocalPoint--upperHalf()
++RV-Block('RV-FocalPoint')
-	RV-CSSParameter({
-		focalY: 25%
-	})
-
-RV-FocalPoint--lowerHalf()
-	RV-CSSParameter({
-		focalY: 75%
-	})
-
-RV-FocalPoint--leftHalf()
-	RV-CSSParameter({
-		focalX: 25%
-	})
-
-RV-FocalPoint--rightHalf()
-	RV-CSSParameter({
-		focalX: 75%
-	})
-
-.RV-FocalPoint
 	RV-FocalPoint()
 	
-	&--upperHalf
+	+RV-Block__Modifier()
 		RV-FocalPoint--upperHalf()
 	
-	&--lowerHalf
+	+RV-Block__Modifier()
 		RV-FocalPoint--lowerHalf()
 	
-	&--leftHalf	
+	+RV-Block__Modifier()
 		RV-FocalPoint--leftHalf()
 	
-	&--rightHalf
+	+RV-Block__Modifier()
 		RV-FocalPoint--rightHalf()	
 
 	

components/00_ContentShape/shape/_shape.styl

@@ -1,34 +1,45 @@
+/**
+ * This mixins lets to shape elements to squares or circles.
+ * Note: Even if the class RV-Shape itself is not nessecary (at this point)
+ * you still should use it to maintain compatiblity:
+ * CSS: class="RV-Shape RV-Shape--square"
+ * Stylues: 
+ *	RV-Shape()
+ *	RV-Shape--square()
+ * You may want to combine this mixin with RV-FocalPoint.
+ */
 RV-Shape--square()
-	padding-top 100%
+	+RV-Block__Modifier--name('square')
-	width 100%
+		padding-top 100%
-	position relative
+		width 100%
-	
+		position relative
-	*
-		position absolute
-		top 0
-		left 0
-		bottom 0
-		right 0
 		
+		*
+			position absolute
+			top 0
+			left 0
+			bottom 0
+			right 0
+
 RV-Shape--circle()
-	padding-top 100%
+	+RV-Block__Modifier--name('circle')	
-	width 100%
+		padding-top 100%
-	position relative
+		width 100%
+		position relative
 
-	&, *
+		&, *
-		border-radius 50%
+			border-radius 50%
-	
+		
-	*
+		*
-		position absolute
+			position absolute
-		top 0
+			top 0
-		left 0
+			left 0
-		bottom 0
+			bottom 0
-		right 0
+			right 0
 
-.RV-Shape
++RV-Block('RV-Shape')
-	
+	+RV-Block__Modifier()
-	&--square
 		RV-Shape--square()
 		
-	&--circle
+	+RV-Block__Modifier()
 		RV-Shape--circle()