CSS Class Generators

Generators

Available generators:

• a-crop
• a-grid
• u-padding
• u-margin
• basic-utility-generator
• token-utility-generator

a-crop

Usage:

// In assets/src/scss/##-algorithms/a-crop.common.inline.scss

@import 'setup';

$aspect-ratios: (
	'16x9': (16, 9),
);

@include a-crop( $aspect-ratios );

This will output the selector a-crop-16x9.

It should be applied to an element directly wrapping an img, or c_lazy_image_crop_class in c_lazy_image.

<figure>
	<div class="a-crop-16x9">
		<img src="/path/to/image.jpg" alt="A placeholder image">
	</div>
	<figcaption>A caption for the image</figcaption>
</figure>

Notes:

• The img should be the only child of a-crop.

a-grid

Use in a project:

To add new grids in a project, create a-grid.{chunk}.inline.scss and add the following:

$grids: (
	(
		columns: 4,
		spans: ( 2, 3, ),
		breakpoint: tablet,
	),
);

@include a-grid( $grids );

See the a-grid README for usage examples.

Basic Utility Generator

The basic utility generator will generate utility classes based on a map of values. See the source here.

basic-utility-generator( 
  $property (string), 
  $values (list), 
  $map-containing-values (map)
);

Setting Up Values

Before building UI, it is recommended to assemble all color values that do not fit into tokens, in a Sass map in src/scss/00-settings/colors.scss.

Here is an example of handling color values that do not fit exactly into tokens - one is totally outside of tokens, one is a modification of the token.

$colors-map: (
	'color-magenta': #913769,
	'color-brand-primary-faded': lighten( map-get( $TOKENS-MAP, color-brand-primary ), 20% )
);

The name of the output class will be u-$KEY, so it is recommended to include the property name in the key of the map for readability. Each map should be consist only of values relevant to a specific property e.g. color-magenta should not be in a $background-colors-map, but background-color-magenta: map-get( color-magenta, colors-map ) is an acceptable entry.

Using the generator

Make sure the variables file is included in src/scss/setup.scss, and then add the following to the utility file to use the generator:

// In src/scss/03-utilities/u-color.common.async.scss
@import 'setup';

@include basic-utility-generator( 'color', (
	'color-magenta',
	'color-brand-primary-faded',
), $colors-map );

This will output the utilities u-color-magenta and u-color-brand-primary-faded.