W&I Library

This CSS library is meant to be used in conjunction with Compassion.com's Site MVP CSS

NOTE: As of update 1.2.0, elements and component stylings have been removed. Going forward, this library will be only used for grid and utilities.

Table of Contents

• Settings
  • Breakpoints
  • Colors
• Grid
  • Container
  • Row
  • Column
• Utilities
  • Aspect Ratios
  • Background Colors
  • Borders
    • Widths
    • Colors
    • Styles
    • Rounded
  • Box Shadow
  • Display
  • Flex
    • Align Items
    • Align Self
    • Flex Property
    • Justify Content
    • Order
    • Wrap
  • Grid
    • Grid Template Columns
    • Grid Gap
  • Object
  • Overflow
  • Position
  • Spacing
    • Spacing Axis
    • Spacing Units
    • Margin
    • Padding
    • Gutter
  • Text
    • Text Alignment
    • Text Color
    • Text Decoration
    • Text Line Heights
    • Font Sizes
    • Font Weights
  • Widths
  • Z-Index

Settings

Settings are used throughout the library to populate color, grid, spacing, display and alignments options.

Breakpoints

The library comes with 6 distinct breakpoints. These breakpoints are used throughout the project for other tools, objects, components and utilities.

Breakpoint	REM	PX
xs	22.5rem	360px
sm	32.5rem	520px
md	45rem	720px
lg	62.5rem	1000px
xl	80rem	1280px
xxl	100rem	1600px

Breakpoints are used as a modifier for other stylings. For instance, you may want to have an element show a different text color on mobile opposed to the desktop version. To do this, you would add the breakpoint modifier to the class.

<div class="text-white text-md-black"></div>

The above markup would show white text for devices under the md breakpoint width, but black text for devicdes over the md breakpoint width.

---

Colors

Below is a list of commonly used colors in the library that are used to transform backgrounds, typography and other color-related attributes.

	name	hex
	black	#000000
	blue	#005eb8
	blue100	#F1F9FF
	blue200	#D1E4F2
	blue500	#4BA3E4
	blue900	#00386d
	dark-teal	#20556B
	gold	#FFB500
	gray	#425563
	gray100	#f9f9f9
	gray200	#D8D8D8
	gray300	#CCCCCC
	gray500	#798894
	gray700	#425563
	gray900	#2F2F2F
	green	#88BE6D
	red	#C13E2D
	teal	#0086BF
	white	#FFFFFF
	yellow	#ffd100

---

Grid

Container

The container object is used to "contain" content within a bounds, and provide a gutters for the content.

<div class="container">
	...
</div>

This object has varients based on the breakpoint widths.

<!-- XL container-->
<div class="container-xl">
	...
</div>

<!-- LG container -->
<div class="container-lg">
	...
</div>

Row

This object is a flex container, intended for use in conjunction with the Container and Column objects.

<div class="row">
	...
</div>

Column

This object adds right and left gutters, while flexing to certain percantages of a base 12 grid.

<div class="row">
	<!-- Full width -->
	<div class="col-12">
		...
	</div>
</div>

The column can be adjusted based on particualr breakpoints. (See breakpoints)

<div class="row">
	<!-- Full width, then 4/12 width at medium viewport -->
	<div class="col-12 col-md-4">
		...
	</div>

	<!-- Full width, then 8/12 width at medium viewport -->
	<div class="col-12 col-md-8">
		...
	</div>
</div>

---

Utilities

Aspect Ratios

If you need an element to fit a certain aspect ratio, this is the utility for you. The class is formatted as such: aspect-{ratio}.

Name	Ratio
sqaure	1:1
standard	4:3
wide	16:9
letterbox	2.35:1
responsive	Conforms to size of parent container.

<div class="aspect-square">
  <img src="{src}" alt="A sqaure image" />
</div>

<div class="aspect-wide aspect-md-responsive">
  <img src="{src}" alt="An image that is responsive above the md breakpoint and 16:9 below it." >
</div>

Background Colors

You can apply a background color to an element by giving it a class of bg-{colorName}.

<div class="bg-gray"><!--CONTENT HERE --></div>

The above markup would produce a <div> with a gray background. (See colors)

You may also set a background color to transparent by using the class name bg-transparent.

This can be modified by adding the breakpoint modifier to the class name. bg-md-gray would give a gray background to the element only at or above the md breakpoint. (See breakpoints)

This utility is able to be modified on hover of an element:

<div class="bg-blue hover:bg-blue900">Blue background that turns to dark blue on hover.</div>

Borders

Border Widths

You can apply a border color to an element by giving it a class of b-w-{borderWidth}.

<div class="b-w-1"></div>

name	value
0	border: 0
1	border: 1px
2	border: 2px
3	border: 4px
4	border: 8px

You can also select a certain side of the element to apply the border styling:

<div class="b-w-t-2"></div>

side	value
t	border-top: ###
r	border-right: ###
b	border-bottom: ###
l	border-left: ###

Border Colors

You can apply a border color to an element by giving it a class of b-c-{colorName}.

<div class="b-w-1 b-c-gray"></div>

The above markup would produce a <div> with a gray border color. (See colors)

Border Styles

This applies a border style to the element by giving it a class of b-s-{style}.

<div class="b-s-solid"></div>

style
none
dotted
dashed
solid
double

Rounded

<div class="rounded-1"></div>

Will set a rounded edge for the element.

name	value
none	border-radius: 0
1	border-radius: .25rem
2	border-radius: .5rem
3	border-radius: 1rem
4	border-radius: 2rem
circle	border-radius: 50%

Box Shadow

<div class="box-shadow-1"></div>

You can affect the box shadow property of an element by choosing an option below:

name	value
none	box-shadow: none
1	box-shadow: 0 3px 6px rgba(0,0,0,.15)
2	box-shadow: 0 3px 12px rgba(0,0,0,.15)
3	box-shadow: 0 3px 25px rgba(0,0,0,.15)

Display

<!-- A link displayed as a block -->
<a class="d-block">Link</a>

You can modify the display property of an element by using on the following options:

name	description
d-none	sets the display to none
d-block	sets the display to block
d-flex	sets the display to flex
d-grid	sets the display to grid
d-inline	sets the display to inline
d-inline-block	sets the display to inline-block
d-inline-flex	sets the display to inline-flex
d-table-cell	sets the display to table-cell
d-table-row	sets the display to table-row

<div class="d-none d-lg-block">Woot woot</div>

The above markup would be hidden for viewports below lg, but displayed as black for lg viewports and above.

Flex

Flex options can be modified.

Align Items

<div class="row align-items-center">
  <!-- FLEXED CONTENT -->
</div>

name	description
align-items-center	align items of flex container to center
align-items-flex-start	align items of flex container to beginning
align-items-flex-end	align-items of felx container to end

Align Self

<div class="row">
  <div class="col-12 align-self-center"></div>
</div>

name	description
align-self-center	align self to center
align-self-flex-start	align self to beginning
align-self-flex-end	align self to end

Flex Property

<div class="d-flex">
  <div class="flex-1">Flexed 1</div>
  <div class="flex-none">Flexed none</div>
</div>

name	description
flex-1	Sets the flex attribute to 1
flex-full	Sets the flex to none and width to 100%
flex-auto	Sets the flex attribute to auto
flex-none	Sets the flex attribute to none

Justify Content

<div class="row justify-content-center">
  <!-- FLEXED CONTENT -->
</div>

name	description
justify-content-center	justify content of flex container to center
justify-content-flex-start	justify content of flex container to beginning
justify-content-flex-end	justify content of felx container to end

Order

<div class="row">
  <!-- order-1 will be shown second -->
  <div class="col-6 order-1"></div>
  <!-- order-0 will be shown first -->
  <div class="col-6 order-0"></div>
</div>

The order of a flex container can be modified.

name	description
0	order will be set to 0
1	order will be set to 1
2	order will be set to 2
3	order will be set to 3
4	order will be set to 4
5	order will be set to 5

Wrap

<div class="flex-nowrap"><!-- FLEX WILL NOT WRAP --></div>

name	description
nowrap	items in flex box will not wrap
wrap	items in flex box will wrap (default)

Grid

Grid Template Columns

Sets the number of columns in the grid.

<div class="d-grid grid-cols-2">
  <div>Column width of 50%</div>
  <div>Column width of 50%</div>
</div>

name	description
1	100%
2	50%
3	33.333%
4	25%
5	20%

Grid Gap

Sets the gap between columns and rows.

<div class="d-grid grid-gap-2">
  <div>Gap of 1rem</div>
  <div>Gap of 1rem</div>
</div>

<div class="d-grid grid-cols-2 grid-gap-x-2">
  <div>Left and right gap of 1rem</div>
  <div>Left and right gap of 1rem</div>
</div>

<div class="d-grid grid-gap-y-2">
  <div>Bottom and top gap of 1rem</div>
  <div>Bottom and top gap of 1rem</div>
</div>

name	description
0	0rem
1	.5rem
2	1rem
3	1.5rem
4	2rem
5	5rem

Object

Set the object-fit and object-position attributes.

Object Fit

<img class="object-fit-cover" />

name	description
contain	Image is contained within the bounds.
cover	Image covers the bounds.
fill	Image fills the bounds.

Object Position

Set the object-position attribute.

<img class="object-position-center" />

name	desciption
center	image is at center
center-top	image is at horizontal center and vertical top
center-bottom	image is at horizontal center and veritcal bottom
left	image is at left
left-center	image is at horizontal left and vertical center
left-top	image is at horizontal left and veritcal top
left-bottom	image is at horizontal left and vertical bottom
right	image is at right
right-center	image is at horizontal right and vertical center
right-top	image is at horizontal right and vertical top
right-bottom	image is at horizontal right and vertical bottom

Overflow

Set the oveflow property of an element.

<div class="overflow-auto"></div>

name	description
auto	sets the overflow property to auto
hidden	sets the overflow property to hidden

Position

Set the positioning property of the element.

<div class="position-absolute"></div>

name
static
asbolute
fixed
relative
sticky
inherit

You can also adjust the top, left, right and bottom properties.

<div class="position-absolute top-0"></div>
<div class="position-absolute bottom-0"></div>
<div class="position-absolute left-0"></div>
<div class="position-absolute right-0"></div>

name	value
n8	-5rem
n7	-4rem
n6	-3rem
n5	-2rem
n4	-1rem
n3	-.75rem
n2	-.5rem
n1	-.25rem
0	0rem
1	.25rem
2	.5rem
3	.75rem
4	1rem
5	2rem
6	3rem
7	4rem
8	5rem

Spacing

Set padding and margins for an element.

Spacing Axis

name	description
t	top
b	bottom
tb	top and bottom
r	right
l	left
rl	right and left

Spacing Units

name	value
0	0rem
1	.25rem
2	.5rem
3	.75rem
4	1rem
5	2rem
6	3rem
7	4rem
8	5rem

Margin

<div class="m-2">
  <!-- ALL MARGIN AXIS ARE SET TO SPACING UNIT 2 -->
</div>
<div class="m-rl-2">
  <!-- MARGIN RIGHT AND LEFT SET TO SPACING UNIT 2 -->
</div>

You can also set margin to negative by adding an n modifier to the spacing unit number.

<div class="m-rl-n2">
  <!-- MARGIN RIGHT AND LEFT SET TO NEGATIVE SPACING UNIT 2 -->
</div>

Padding

<div class="p-rl-n2">
  <!-- PADDING RIGHT AND LEFT SET TO NEGATIVE SPACING UNIT 2 -->
</div>

Gutter

Gutter is the space between columns and the row.

name	description
0	row margin left and right of 0, column paddding left/right 0
1	row margin left and right of -0.5rem, column padding left/right of 0.5rem
2	row margin left and right of -1rem, column padding left/right of 1rem
3	row margin left and right of -1.5rem, column padding left/right of 1.5rem
4	row margin left and right of -2rem, column padding left/right of 2rem

Text

Font Family

Use this utility to update the element's font family attribute.

name	description
sans	The theme's sans serif font, Montserrat
serif	The theme's serif font, Centruy

Text Alignment

name	description
text-left	text aligned left
text-center	text aligned center
text-right	text aligned right

Text Color

See color variables above for a complete list of colors.

<div class="text-blue">Blue text goes here.</div>

This utility is able to be modified on hover of an element with the hover: utility:

<div class="text-blue hover:text-blue900">Blue text that turns to dark blue on hover goes here.</div>

Text Decoration

name	description
text-line-through	line through word
text-none	no text decoraitions
text-underline	underline word

This utility is able to be modified on hover of an element:

<div class="text-none hover:text-underline">Text with no underline has an underline on hover</div>

Text Line Heights

name	value
text-line-height-1	1em
text-line-height-2	1.3em
text-line-height-3	1.8em

Font Sizes

name	value
text-1	.875rem
text-2	1rem
text-3	1.25rem
text-4	1.5rem
text-5	1.75rem
text-6	2rem
text-7	2.5rem
text-8	3rem
text-9	4rem
text-10	5rem

Font Weights

name	value
text-lighter	font-weight: 400
text-normal	font-weight: 500
text-bold	font-weight: 700
text-400	font-weight: 400
text-500	font-weight: 500
text-700	font-weight: 700

Widths

You can adjust the width of an element with the class of w-{width}.

name	value
auto	width: auto
25	25%
50	50%
75	75%
100	100%
100px	100px
250px	250px
500px	500px
750px	750px
1000px	1000px

Z-Index

You can use a .z-{index} utliity class to adjust the z-index of the element.

value
0
1
10
20
30
40
50

<div class="z-0">z-index of 0</div>
<div class="z-10">z-index of 10</div>