Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 8364

7.6.3.2 Static-Width Columns

This utility class sets the grid-template-columns property to create a responsive grid layout. It uses the repeat function with the auto-fill keyword and a static max width based in multiples of 16px. 15 stands for 15 rem units wich calculates to 15 x 16px or 240

Example s

.columns-max_15

Sets the columns to have a maximum static-width of 15rem (240px) ~ 50% on mobile.

1
2
3
4
5
6
7
8

.columns-max_20

Sets the columns to have a maximum static-width of 20rem (320px).

1
2
3
4
5
6
7
8

.columns-max_25

Sets the columns to have a maximum static-width of 25rem (400px).

1
2
3
4
5
6
7
8

.columns-max_30

Sets the columns to have a maximum static-width of 30rem (480px).

1
2
3
4
5
6
7
8

.columns-max_35

Sets the columns to have a maximum static-width of 35rem (560px).

1
2
3
4
5
6
7
8
NOTE:
the class `.justify_around` is a great addition to this pattern because it allows the gap bettween grids to flex allowing for the space to be filled. 
<div class="[modifier class] gap_3 grid">
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">1</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">2</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">3</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">4</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">5</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">6</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">7</div>
	<div class="bg_acc c_white font_2 font_bold grid items_center justify_around p_2 br_solid br_black-3 br_1">8</div>
</div>
Copy Code