wi-library v1.2.20

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.

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}.

<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>

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

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

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>

Rounded

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

Will set a rounded edge for the element.

Box Shadow

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

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

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:

<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>

Align Self

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

Flex Property

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

Justify Content

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

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.

Wrap

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

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>

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>

Object

Set the object-fit and object-position attributes.

Object Fit

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

Object Position

Set the object-position attribute.

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

Overflow

Set the oveflow property of an element.

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

Position

Set the positioning property of the element.

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

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>

Spacing

Set padding and margins for an element.

Spacing Axis

Spacing Units

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.

Text

Font Family

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

Text Alignment

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

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

Font Sizes

Font Weights

Widths

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

Z-Index

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

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