@penskemediacorp/larva-css 1.6.0-alpha.0 → 1.6.0

package/src/02-algorithms/a-children-link-color/a-children-link-color.common.inline.scss

@@ -0,0 +1,15 @@
+@import 'setup';
+
+.lrv-a-children-link-color-black {
+	& > a {
+		color: map-get( $TOKENS-MAP, color-black );
+		color: var( --color-black );
+	}
+}
+
+.lrv-a-children-link-color-brand-primary\:hover {
+	& > a:hover {
+		color: map-get( $TOKENS-MAP, color-brand-primary );
+		color: var( --color-brand-primary );
+	}
+}

package/src/02-algorithms/a-children-link-decoration/a-children-link-decoration.common.inline.scss

@@ -0,0 +1,13 @@
+@import 'setup';
+
+.lrv-a-children-link-decoration-underline {
+	& > a {
+		text-decoration: underline;
+	}
+}
+
+.lrv-a-children-link-decoration-underline\:hover {
+	& > a:hover {
+		text-decoration: underline;
+	}
+}

package/src/02-algorithms/a-counter/a-counter.common.inline.scss

@@ -0,0 +1,26 @@
+.lrv-a-counter {
+	counter-reset: a-counter;
+}
+
+.lrv-a-counter-increment {
+	counter-increment: a-counter;
+}
+
+.lrv-a-counter-before::before {
+	content: counter( a-counter );
+	display: var( --a-counter__display, inline-block);
+	padding: var( --a-counter__padding, initial );
+	background-color: var( --a-counter__background-color, initial );
+	color: var( --a-counter__color, inherit );
+	border-top-right-radius: var( --a-counter__border-top-right-radius, inherit );
+	font-family: var( --a-counter__font-family, inherit );
+	font-size: var( --a-counter__font-size, inherit ); // stylelint-disable-line property-blacklist
+	line-height: var( --a-counter__line-height, 0.7 );
+	font-weight: var( --a-counter__font-weight, inherit ); // stylelint-disable-line property-blacklist
+	z-index: 1;
+	position: var( --a-counter__position, initial );
+	left: var( --a-counter__left, auto );
+	top: var( --a-counter__top, auto );
+	right: var( --a-counter__right, auto );
+	bottom: var( --a-counter__bottom, auto );
+}

package/src/02-algorithms/a-crop/README.md

@@ -1,31 +1,35 @@
-# Crop
+# a-crop
 
 The cropping algorithm applies an aspect ratio to a element containing an image, and will crop the contained image to the aspect ratio. It uses background-size: cover, padding, and absolute positioning to do this. 
 
-The classes output by the generator are `.pmc-a-crop-WIDTHxHEIGHT`, so a 16x9 cropped image would use the class `.pmc-a-crop-16x9`.
+The classes output by the generator are `.a-crop-WIDTHxHEIGHT`, so a 16x9 cropped image would use the class `.a-crop-16x9`.
 
-The available aspect ratios output from this package are:
+## Available Classes
 
-```
-.pmc-a-crop-1x1
-.pmc-a-crop-2x1
-.pmc-a-crop-2x3
-.pmc-a-crop-4x3
-.pmc-a-crop-16x9
-.pmc-a-crop-3x4
-```
+Reference the Sass list in a-crop.common.inline.scss to see a list of a-crop classes provided by Larva CSS.
+
+## Algorithm Source
 
 The source for the cropping algorithm is:
+
 ```
-.pmc-a-crop-16x9 {
+.lrv-a-crop-16x9 {
 	position: relative;
 	padding-bottom: calc( ( 9 / 16 ) * 100%); 
 }
 
-.pmc-a-crop-16x9 img {
+.lrv-a-crop-16x9 img {
 	position: absolute;
 	width: 100%;
 	height: 100%;
 	object-fit: cover; 
 }
 ```
+
+## Extendable?
+
+**Do no extend `a-crop`**. Create a separate algorithm, or use utilities for properties like the following:
+
+* object-fit - change the scaling behavior of the image e.g. `u-object-fit-contain`.
+* object-position - change the alignment of a cropped image, e.g. align it to the top rather than center.
+* background-color – update the background color that may appear while an image is loading.

package/src/02-algorithms/a-crop/a-crop.common.inline.scss

@@ -1,12 +1,97 @@
-@import '@penskemediacorp/larva-scss/dist/generators';
-
-@include pmc-a-crop(
-	(
-		'1x1': (1, 1),
-		'2x1': (2, 2),
-		'2x3': (3, 2),
-		'4x3': (4, 3),
-		'16x9': (16, 9),
-		'3x4': (3, 4)
-	)
-);
+@import 'setup';
+
+$aspect-ratios: (
+	'1x1': (1, 1),
+	'2x1': (2, 1),
+	'2x3': (2, 3),
+	'3x2': (3, 2),
+	'4x3': (4, 3),
+	'16x9': (16, 9),
+	'5x1': (5, 1),
+	'5x2': (5, 2),
+	'3x4': (3, 4)
+);
+
+@include a-crop( $aspect-ratios, $NAMESPACE: 'lrv-' );
+
+.lrv-a-crop-contain img { // Required for a-crop
+	object-fit: contain;
+}
+
+.lrv-a-crop-1x1\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+	 
+		position: relative;
+		padding-bottom: 100%;
+
+		img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+		 
+	}
+}
+
+.lrv-a-crop-1x1\@tablet {
+	@include pmc-breakpoint( tablet ) {
+	 
+		position: relative;
+		padding-bottom: 100%;
+
+		img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+		 
+	}
+}
+
+.lrv-a-crop-1x1\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+	 
+		position: relative;
+		padding-bottom: 100%;
+
+		img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		} 
+	}
+}
+
+.lrv-a-crop-3x2\@desktop-xl {
+	@include pmc-breakpoint( desktop-xl ) {
+	 
+		position: relative;
+		padding-bottom: calc( ( 2 / 3 ) * 100% );
+
+		img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		} 
+	}
+}
+
+
+.lrv-a-crop-3x2\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+	 
+		position: relative;
+		padding-bottom: calc( ( 2 / 3 ) * 100% );
+
+		img {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		} 
+	}
+}

package/src/02-algorithms/a-crop/a-crop.html

@@ -9,11 +9,11 @@
 </head>
 <body>
 
-	<div class="pmc-a-crop-16x9" style="width: 600px;">
+	<div class="lrv-a-crop-16x9" style="width: 600px;">
 		<img src="https://pmcdeadline2.files.wordpress.com/2019/07/jonathan-majors.jpg" alt="">
 	</div>
 	<hr>
-	<div class="pmc-a-crop-3x4" style="width: 400px;">
+	<div class="lrv-a-crop-3x4" style="width: 400px;">
 		<img src="https://pmcdeadline2.files.wordpress.com/2019/07/jonathan-majors.jpg" alt="">
 	</div>
 

package/src/02-algorithms/a-floated/a-floated.common.inline.scss

@@ -0,0 +1,32 @@
+@import '@penskemediacorp/larva-scss/dist/tools';
+
+.lrv-a-floated-parent::before,
+.lrv-a-floated-parent::after {
+	content: '';
+	display: table;
+}
+
+.lrv-a-floated-parent::after {
+	clear: both;
+}
+
+.lrv-a-floated-parent {
+	zoom: 1;
+}
+
+.lrv-a-floated-left {
+	float: left;
+}
+
+.lrv-a-floated-left\@tablet {
+
+	@include pmc-breakpoint( tablet ) {
+		float: left;
+	}
+}
+
+.lrv-a-floated-right\@tablet {
+	@include pmc-breakpoint(tablet) {
+		float: right;
+	}
+}

package/src/02-algorithms/a-font/a-font.common.inline.scss

@@ -0,0 +1,3 @@
+@import 'setup';
+
+@import '../../_generated/a-font';

package/src/02-algorithms/a-glue/a-glue.common.inline.scss

@@ -10,11 +10,11 @@
 	left: var( --a-glue-left, initial );
 }
 
-.pmc-a-glue-parent {
+.lrv-a-glue-parent {
 	position: relative;
 }
 
-.pmc-a-glue {
+.lrv-a-glue {
 	// Fallback is top left for everything.
 	top: 0;
 	left: 0;
@@ -22,18 +22,75 @@
 	@include _a-glue-base;
 }
 
-.pmc-a-glue--l-0 {
+@include pmc-breakpoint( mobile-max ) {
+	.lrv-a-glue\@mobile-max {
+		top: 0;
+		left: 0;
+
+		@include _a-glue-base;
+	}
+}
+
+.lrv-a-glue\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		// TODO: incorporate these fallback values into mixin
+		top: 0;
+		left: 0;
+
+		@include _a-glue-base;
+	}
+}
+
+.lrv-a-glue--l-0 {
 	--a-glue-left: 0;
 }
 
-.pmc-a-glue--r-0 {
+.lrv-a-glue--r-0 {
 	--a-glue-right: 0;
 }
 
-.pmc-a-glue--t-0 {
+.lrv-a-glue--t-0 {
 	--a-glue-top: 0;
 }
 
-.pmc-a-glue--b-0 {
+.lrv-a-glue--b-0 {
 	--a-glue-bottom: 0;
 }
+
+.lrv-a-glue--t-50p {
+	--a-glue-top: 50%;
+}
+
+.lrv-a-glue--t-100p {
+	--a-glue-top: 100%;
+}
+
+.lrv-a-glue--l-50p {
+	--a-glue-left: 50%;
+}
+
+.lrv-a-glue--r-50p {
+	--a-glue-right: 50%;
+}
+
+.lrv-a-glue--b-n1 {
+	--a-glue-bottom: -1rem;
+}
+
+.lrv-a-glue-parent\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		position: relative;
+	}
+}
+
+.lrv-a-glue-parent\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		position: relative;
+	}
+}
+
+.lrv-a-glue--b-unset\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		bottom: unset;
+	}
+}

package/src/02-algorithms/a-glue/a-glue.html

@@ -5,12 +5,12 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>Document</title>
-	<link rel="stylesheet" href="./a-glue.common.inline.css">
+	<link rel="stylesheet" href="../../../build/css/algorithms.common.inline.css">
 </head>
 <body>
-	<div class="a-glue-parent" style="display: inline-block;">
+	<div class="lrv-a-glue-parent" style="display: inline-block;">
 		<img src="http://placehold.it/300x300" alt="">
-		<p class="a-glue a-glue--t-0 a-glue--r-0">Glued Element</p>
+		<p class="lrv-a-glue lrv-a-glue--t-0 lrv-a-glue--r-0">Glued Element</p>
 	</div>
 </body>
 </html>

package/src/02-algorithms/a-grid/README.md

@@ -1,20 +1,147 @@
-# Grid
+# a-grid
 
-Grids must be in order of media queries to maintain the cascade,
-e.g. desktop-xl grids are at the very end, breakpoint-less grids at
-the top.
+This utility generator is for creating simple grids. It uses a CSS Grid with a custom property to update the grid columns, and provides a flexbox fallback for older browsers. It supports flexible values for number of columns in the grid, grid items spanning multiple columns, and breakpoints for both.
 
-The `spans` entry will output a class to instruct a grid item to span
-a specific number of columns. By default, grid items will each span
-a single column. Apply a trailing comma to the list of spans.
+## Available Classes
 
-To apply a grid to an element, i.e. an element's children, add the `pmc-a-grid`
-class to initiate a single column grid, then additional utility classes to
-adjust the grid e.g.
+Reference the `$grids` list in packages/larva-css/src/02-algorithms/a-grid/a-grid.common.inline.scss to see which grids are available from Larva CSS. 
 
-`<section class="pmc-a-grid pmc-a-cols2 pmc-a-cols4@desktop">`
+## Algorithm Source
 
-Similarly, each grid item should have the class `pmc-a-grid-item`. Span utilities
-can be added in a similar fashion:
+Here is an example of the algorithm accommodating a two column grid that changes to four columns at desktop:
+```
+.lrv-a-grid {
+	--cols: 1;
 
-`<div class="pmc-a-grid-item pmc-a-span2@tablet">`.
+	display: grid;
+	grid-gap: 1.25rem;
+	grid-template-columns: repeat( var( --cols ), minmax( 0, 1fr ) );
+}
+
+.lrv-a-cols2 {
+	--cols: 2;
+}
+
+@media( min-width: $screen-desktop ) {
+
+	.lrv-a-cols4\@desktop {
+		--cols: 4;
+	}
+
+}
+```
+
+## Use in a project:
+
+To add new grids in a project, create a-grid.{chunk}.inline.scss and add the following:
+
+```langauge-scss
+$grids: (
+	(
+		columns: 4,
+		spans: ( 2, 3, ),
+		breakpoint: tablet,
+	),
+);
+
+@include a-grid( $grids );
+```
+
+This will output something like:
+
+```
+@media min-width( ${TABLET} ) {
+
+	.a-cols4\@tablet {
+		--cols: 4;
+	}
+
+	.a-span\@tablet {
+		grid-column: span 2;
+	}
+
+	.a-span3\@tablet {
+		grid-column: span 3;
+	}
+}
+```
+
+`.lrv-a-cols4@tablet` must be applied along with `.lrv-a-grid` to set up the main part of the grid. 
+
+A few important things to note:
+
+* In the mixin, **grids must be in order of media queries to maintain the cascade**, e.g. desktop-xl grids are at the very end, breakpoint-less grids at the top.
+* By default, grid items will each span
+a single column. 
+* Apply a trailing comma to the list of spans, and in general, use trailing commas in Sass lists.
+* It is best practice to apply `lrv-a-grid-item` to child elements of an `a-grid` for both readability and a few edge cases, but note that some code-bases have not done this.
+
+## Examples
+
+If mobile is two columns:
++----+----+
+|    |    |
+|    |    |
++---------+
+|    |    |
+|    |    |
++----+----+
+
+And desktop is four columns:
++------+------+------+------+
+|      |      |      |      |
+|      |      |      |      |
++------+------+------+------+
+
+The markup would be:
+
+```language-html
+<div class="lrv-a-grid lrv-a-cols2 lrv-a-cols4@desktop">
+	<div class="lrv-a-grid-item"></div>
+	<div class="lrv-a-grid-item"></div>
+	<div class="lrv-a-grid-item"></div>
+	<div class="lrv-a-grid-item"></div>
+</div>
+```
+
+If mobile is one column:
++--------+
+|////////|
+|////////|
++--------+
+|        |
++--------+
+|        |
++--------+
+
+And desktop is a four column grid, with the first element spanning two columns:
++------+------+------+------+
+|/////////////|      |      |
+|/////////////|      |      |
++------+------+------+------+
+
+```language-html
+<div class="lrv-a-grid lrv-a-cols4@desktop">
+	<div class="lrv-a-grid-item lrv-a-span2@desktop"></div>
+	<div class="lrv-a-grid-item"></div>
+	<div class="lrv-a-grid-item"></div>
+</div>
+```
+
+## Extendable?
+
+**Do not extend `a-grid`**. Use utilities or create a separate algorithm.
+
+The class name `a-grid` should _only_ be used for declarations that apply to this basic, equal column CSS grid, and that **does not include grid-gap**. Any adjustments in `grid-gap` or specific grid configurations beyond equal columns should be done with `u-grid` utilities.
+
+For example, to apply a larger grid-gap to an `a-grid`, you could add this to `03-utilities/u-grid.{chunk}.inline.scss`:
+
+```
+.u-grid-gap-2\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		grid-gap: $spacer-2;
+	}
+}
+```
+
+And apply `u-grid-gap-2@desktop` to the same element as `lrv-a-grid`.

package/src/02-algorithms/a-grid/a-grid.common.inline.scss

@@ -1,6 +1,6 @@
-@import '@penskemediacorp/larva-scss/dist/generators';
+@import 'setup';
 
-.pmc-a-grid {
+.lrv-a-grid {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: start;
@@ -14,8 +14,8 @@
 	}
 }
 
-.pmc-a-grid-item {
-	// Remove flex charactaristics to honor flex-basis value.
+.lrv-a-grid-item {
+	// Remove flex characteristics to honor flex-basis value.
 	flex: none;
 	padding: 0.625rem;
 
@@ -30,6 +30,11 @@ $grids: (
 	),
 	(
 		columns: 3,
+		spans: ( 2 ),
+	),
+	(
+		columns: 2,
+		breakpoint: tablet,
 	),
 	(
 		columns: 3,
@@ -41,6 +46,49 @@ $grids: (
 		spans: ( 2, 3, ),
 		breakpoint: tablet,
 	),
+	(
+		columns: 3,
+		breakpoint: desktop,
+	),
+	(
+		columns: 2,
+		breakpoint: desktop,
+	),
+	(
+		columns: 2,
+		breakpoint: desktop-xl,
+	),
+	(
+		columns: 4,
+		spans: ( 2 ),
+		breakpoint: desktop,
+	),
+	(
+		columns: 4,
+		spans: ( 3 ),
+		breakpoint: desktop,
+	),
+	(
+		columns: 4,
+		spans: ( 3 ),
+		breakpoint: desktop-xl,
+	),
+	(
+		columns: 5,
+		breakpoint: desktop,
+	),
 );
 
-@include pmc-a-grid( $grids );
+@include a-grid( $grids, $NAMESPACE: 'lrv-' );
+
+.lrv-a-grid-first-child-span-all\@mobile-max {
+
+	@include pmc-breakpoint( mobile-max ) {
+
+		& > *:first-child {
+			@supports ( display: grid ) {
+				grid-column: 1 /  -1;
+			}
+		}
+	}
+}

package/src/02-algorithms/a-grid/a-grid.html

@@ -4,18 +4,18 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<link rel="stylesheet" href="./a-grid.critical.css">
+	<link rel="stylesheet" href="../../../build/css/algorithms.common.inline.css">
 	<title>Document</title>
 </head>
 <body>
-	<div class="pmc-a-grid pmc-a-cols2">
+	<div class="lrv-a-grid lrv-a-cols2">
 		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
 		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
 	</div>
 	<hr>
-	<div class="pmc-a-grid pmc-a-cols3">
+	<div class="lrv-a-grid lrv-a-cols3">
 		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
-		<div class="pmc-a-grid-item pmc-a-span2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
+		<div class="lrv-a-grid-item lrv-a-span2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam omnis qui minima aperiam aspernatur distinctio nam neque nostrum nesciunt laborum? Ad dicta quam possimus voluptates velit perferendis vel sed itaque!</div>
 	</div>
 </body>
 </html>

package/src/02-algorithms/a-hidden/a-hidden.common.inline.scss

@@ -0,0 +1,43 @@
+@import 'setup';
+
+@mixin _a-hidden {
+	// stylelint-disable declaration-no-important
+	display: none !important;
+	// stylelint-enable declaration-no-important
+	height: 0;
+	width: 0;
+}
+
+.lrv-a-hidden {
+	@include _a-hidden;
+}
+
+.lrv-a-hidden\@mobile-max {
+	@include pmc-breakpoint( mobile-max ) {
+		@include _a-hidden;
+	}
+}
+
+.lrv-a-hidden\@desktop-max {
+	@include pmc-breakpoint( desktop-max ) {
+		@include _a-hidden;
+	}
+}
+
+.lrv-a-hidden\@desktop-xl-max {
+	@include pmc-breakpoint( desktop-xl-max ) {
+		@include _a-hidden;
+	}
+}
+
+.lrv-a-hidden\@tablet {
+	@include pmc-breakpoint( tablet ) {
+		@include _a-hidden;
+	}
+}
+
+.lrv-a-hidden\@desktop {
+	@include pmc-breakpoint( desktop ) {
+		@include _a-hidden;
+	}
+}