Switching to BEM Generator

components/00_ContentShape/aspectRatio/_aspectRatio.styl

@@ -1,4 +1,8 @@
+/**
+ * Mixins to maintain aspect ratio of an element.
+ */
 RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
+	+RV-Block__Modifier--name('XtoY')
 		RV-CSSParameter({
 			aspectX: aspectX,
 			aspectY: aspectY
@@ -12,6 +16,27 @@ RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
 			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
 	overflow hidden
@@ -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,4 +1,15 @@
+/**
+ * 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()
+	+RV-Block__Modifier--name('square')
 		padding-top 100%
 		width 100%
 		position relative
@@ -11,6 +22,7 @@ RV-Shape--square()
 			right 0
 
 RV-Shape--circle()
+	+RV-Block__Modifier--name('circle')	
 		padding-top 100%
 		width 100%
 		position relative
@@ -25,10 +37,9 @@ RV-Shape--circle()
 			bottom 0
 			right 0
 
-.RV-Shape
++RV-Block('RV-Shape')
-	
+	+RV-Block__Modifier()
-	&--square
 		RV-Shape--square()
 		
-	&--circle
+	+RV-Block__Modifier()
 		RV-Shape--circle()