wi-library

1.2.20 • Public • Published

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i wi-library

Weekly Downloads

2

Version

1.2.20

License

ISC

Unpacked Size

228 kB

Total Files

78

Last publish

Collaborators

  • jhodges