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

8.1 Background

Background of containers can be easily maniputlated with textures, colors, and shadows.

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

8.1.1 Background Colors

Background colors can be easily change with bg_color-name

Example s

bg_primary

background using primary color

Background Color of bg_primary

bg_secondary

background using secondary color

Background Color of bg_secondary

bg_shade

background using shade color

Background Color of bg_shade

bg_alert

background using alert color

Background Color of bg_alert

bg_warning

background using warning color

Background Color of bg_warning

bg_success

background using success color

Background Color of bg_success

bg_info

background using info color

Background Color of bg_info

bg_highlight

background using highlight color

Background Color of bg_highlight

<div class="[modifier class] p_3 c_white">Background Color of [modifier class]</div>

<div class="[modifier class] p_3 c_white">Background Color of [modifier class]</div>

Code Sample

Copy Code

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

8.1.1.1 Background Color Tint

Background colors can be shifted by appending a modifier of n5 through 5. The negative(n) numbers mix the color with black and the positive numbers mix the color with white.

Classes	Effect
.bg_(color)-0, .bg_(color)	pure color
.bg_(color)-1	color with 15% white mixed in
.bg_(color)-2	color with 37% white mixed in
.bg_(color)-3	color with 60% white mixed in
.bg_(color)-4	color with 78% white mixed in
.bg_(color)-5	color with 90% white mixed in
.bg_(color)-n1	color with 10% black mixed in
.bg_(color)-n2	color with 25% black mixed in
.bg_(color)-n3	color with 45% black mixed in
.bg_(color)-n4	color with 58% black mixed in
.bg_(color)-n5	color with 75% black mixed in

Example s

bg_primary

background using primary color

white

5

4

3

2

1

0

n1

n2

n3

n4

n5

black

bg_secondary

background using secondary color

white

5

4

3

2

1

0

n1

n2

n3

n4

n5

black

bg_shade

background using shade color

white

5

4

3

2

1

0

n1

n2

n3

n4

n5

black

bg_alert

background using alert color

white

5

4

3

2

1

0

n1

n2

n3

n4

n5

black

bg_warning

background using warning color

white

5

4

3

2

1

0

n1

n2

n3

n4

n5

black

bg_success

background using success color

white

5

4

3

2

1

0

n1

n2

n3

n4

n5

black

bg_info

background using info color

white

5

4

3

2

1

0

n1

n2

n3

n4

n5

black

bg_highlight

background using highlight color

white

5

4

3

2

1

0

n1

n2

n3

n4

n5

black

<div class="bg_white flex_auto text_center p_2 p-y_5 ">white</div>
<div class="[modifier class]-5 flex_auto text_center  p_2 p-y_5">5</div>
<div class="[modifier class]-4 flex_auto text_center  p_2 p-y_5">4</div>
<div class="[modifier class]-3 flex_auto text_center  p_2 p-y_5">3</div>
<div class="[modifier class]-2 flex_auto text_center  p_2 p-y_5">2</div>
<div class="[modifier class]-1 flex_auto text_center  c_white p_2 p-y_5">1</div>
<div class="[modifier class]-0 flex_auto text_center  c_white p_2 p-y_5">0</div>
<div class="[modifier class]-n1 flex_auto text_center  c_white p_2 p-y_5">n1</div>
<div class="[modifier class]-n2 flex_auto text_center  c_white p_2 p-y_5">n2</div>
<div class="[modifier class]-n3 flex_auto text_center  c_white p_2 p-y_5">n3</div>
<div class="[modifier class]-n4 flex_auto text_center  c_white p_2 p-y_5">n4</div>
<div class="[modifier class]-n5 flex_auto text_center  c_white p_2 p-y_5">n5</div>
<div class="bg_black flex_auto text_center  c_white p_2 p-y_5">black</div>

<div class="bg_white flex_auto text_center p_2 p-y_5 ">white</div>
<div class="[modifier class]-5 flex_auto text_center  p_2 p-y_5">5</div>
<div class="[modifier class]-4 flex_auto text_center  p_2 p-y_5">4</div>
<div class="[modifier class]-3 flex_auto text_center  p_2 p-y_5">3</div>
<div class="[modifier class]-2 flex_auto text_center  p_2 p-y_5">2</div>
<div class="[modifier class]-1 flex_auto text_center  c_white p_2 p-y_5">1</div>
<div class="[modifier class]-0 flex_auto text_center  c_white p_2 p-y_5">0</div>
<div class="[modifier class]-n1 flex_auto text_center  c_white p_2 p-y_5">n1</div>
<div class="[modifier class]-n2 flex_auto text_center  c_white p_2 p-y_5">n2</div>
<div class="[modifier class]-n3 flex_auto text_center  c_white p_2 p-y_5">n3</div>
<div class="[modifier class]-n4 flex_auto text_center  c_white p_2 p-y_5">n4</div>
<div class="[modifier class]-n5 flex_auto text_center  c_white p_2 p-y_5">n5</div>
<div class="bg_black flex_auto text_center  c_white p_2 p-y_5">black</div>

Code Sample

Copy Code

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

8.1.1.2 Background Colors Alpha

Background colors of white and black can be shifted by appending a modifier bg_{{color-name}}-{{0 to 9}} to shift its transparency

Example s

black

background color of black modified with alphas

black-0

black-1

black-2

black-3

black-4

black-5

black-6

black-7

black-8

black-9

black

white

background color of white modified with alphas

white-0

white-1

white-2

white-3

white-4

white-5

white-6

white-7

white-8

white-9

white

<div class="bg_[modifier class]-0 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-0</div>
<div class="bg_[modifier class]-1 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-1</div>
<div class="bg_[modifier class]-2 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-2</div>
<div class="bg_[modifier class]-3 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-3</div>
<div class="bg_[modifier class]-4 flex_auto text_center c_white p_2 p-y_5">[modifier class]-4</div>
<div class="bg_[modifier class]-5 flex_auto text_center c_white p_2 p-y_5">[modifier class]-5</div>
<div class="bg_[modifier class]-6 flex_auto text_center c_white p_2 p-y_5">[modifier class]-6</div>
<div class="bg_[modifier class]-7 flex_auto text_center c_white p_2 p-y_5">[modifier class]-7</div>
<div class="bg_[modifier class]-8 flex_auto text_center c_white p_2 p-y_5">[modifier class]-8</div>
<div class="bg_[modifier class]-9 flex_auto text_center c_white p_2 p-y_5">[modifier class]-9</div>
<div class="bg_[modifier class] flex_auto text_center c_white p_2 p-y_5">[modifier class]</div>

<div class="bg_[modifier class]-0 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-0</div>
<div class="bg_[modifier class]-1 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-1</div>
<div class="bg_[modifier class]-2 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-2</div>
<div class="bg_[modifier class]-3 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-3</div>
<div class="bg_[modifier class]-4 flex_auto text_center c_white p_2 p-y_5">[modifier class]-4</div>
<div class="bg_[modifier class]-5 flex_auto text_center c_white p_2 p-y_5">[modifier class]-5</div>
<div class="bg_[modifier class]-6 flex_auto text_center c_white p_2 p-y_5">[modifier class]-6</div>
<div class="bg_[modifier class]-7 flex_auto text_center c_white p_2 p-y_5">[modifier class]-7</div>
<div class="bg_[modifier class]-8 flex_auto text_center c_white p_2 p-y_5">[modifier class]-8</div>
<div class="bg_[modifier class]-9 flex_auto text_center c_white p_2 p-y_5">[modifier class]-9</div>
<div class="bg_[modifier class] flex_auto text_center c_white p_2 p-y_5">[modifier class]</div>

Code Sample

Copy Code

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

8.1.2 Background Position

For many images you will need top place background images in to a cardnial location.

Example s

.bg_left

cardnial left

bg_left

.bg_top

cardnial top

bg_top

.bg_right

cardnial right

bg_right

.bg_bottom

cardnial bottom

bg_bottom

.bg_center

cardnial center center

bg_center

<div class="[modifier class] seal_tiny" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt">[modifier class]</span></div>

<div class="[modifier class] seal_tiny" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt">[modifier class]</span></div>

Code Sample

Copy Code

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

8.1.3 Background Repeat

repeating a background image is easy.

.bg_norepeat - norepeat .bg_repeat - repeat .bg_repeat-x - repoeat-x .bg_repeat-y - repeat-y .bg_repeat-space - repeat-space

Example

Default styling

<div class=" seal_tiny bg_auto" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt"></span></div>

<div class=" seal_tiny bg_auto" style="height:200px;max-width: unset;background-size: 100px;"><span class="alt"></span></div>

Code Sample

Copy Code

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

8.1.4 Background Size

For many images you will need top place background images in to a cardnial location.

Example s

.bg_unset

removes any css background size

bg_unset

.bg_auto

auto

bg_auto

.bg_cover

cover

bg_cover

.bg_contain

contain

bg_contain

<div class="[modifier class] seal_tiny" style="height:200px;max-width: unset;"><span class="alt">[modifier class]</span></div>

<div class="[modifier class] seal_tiny" style="height:200px;max-width: unset;"><span class="alt">[modifier class]</span></div>

Code Sample

Copy Code

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

Simple Gradients that are either linear or radial. These gradients can be modified by passing in the css properties to change the start and end color and the direction the gradient is rendered. style="--start-color:hexcolor;--end-color:hexcolor;--origin:top right"

css property	definition	acceptable options
--start-color	the starting color of the gradient or center color for radial	proper formatted color: hex, hsl, hsla, rgb, rgba
--end-color	the ending color or the outside color when radial	proper formatted color: hex, hsl, hsla, rgb, rgba
--origin	point in the container where the gradients starts	these words depend on the type of gradient

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

8.1.5.1 Linear Gradient

The default gradient is the ACC Blue to the Primary Color of the Brand. Pass in css properties to manipulate the colors you want to use. linear gradient css documentation

Default Coloring

Modified Coloring

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

8.1.5.2 Radial Gradient

The default gradient is the ACC Blue to the Primary Color of the Brand. Pass in css properties to manipulate the colors you want to use. radial gradient css documentation

Default Coloring

Modified Coloring

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

8.1.6 Textures

All textures in the Arches design are a subtle variation of transparent. Allowing for colors to bleed through from behind. Different textures have intentions or are reserved for certain usagaes. It is easy to apply textures using the texture utlities.

Example s

.texture_light

Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of.

texture_light

.texture_medium

medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.

texture_medium

.texture_dust

Dust is the most transparent texture allowing for the color of the background to show through the most. This is used for the painted tops of cards, or score bars.

texture_dust

.texture_dark

This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.

texture_dark

.texture_cross

A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.

texture_cross

.texture_disabled

This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand.

texture_disabled

<div class="[modifier class] p_5 br_black-8 br_1 br_solid text_center">[modifier class]</div>

<div class="[modifier class] p_5 br_black-8 br_1 br_solid text_center">[modifier class]</div>

Code Sample

Copy Code

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

8.1.6.1 Textures Plus Background Colors

All textures are slightly transparent. You can acheive different effects with using the combo of textures and background colors.

Example s