Easy as Pie UI

Installation

NPM

Install Easy as Pie UI and peer dependencies via NPM

Set Up

The only thing you will need to set up in your project is adding the Easy as Pie UI Theme component into your layout. This brings in base theme defaults for fonts, headings, etc. It will be the file that themes all the components in this library and can be overridden by following the guidelines in the Theming section below.

Here is an example of the theme in a layout:

Theming

Colors

Every color can be changed to your own site's colors by passing an object into the Easy as Pie Theme object. This should include the key as the color you want to override and the value as the hex, rgb, or web safe color you want to change it to.

Full list of colors is as follows:

• red
• orange
• yellow
• olive
• green
• teal
• blue
• violet
• purple
• pink
• brown
• grey
• light-grey
• black

Here is an example changing a few of the default colors:

Spacing

You may also change some of the default spacing around the site that are used in the components as well as the helper classes. As with the colors, you pass in an object with the key being the size and the value being in px, em, or rem.

Full list of spacing is as follows:

• xs
• sm
• md
• lg
• xl

Here is an example changing a few of the default spacing:

Breakpoints

Overview

This is a JS object that you can import from Easy as Pie UI that contains the breakpoints used in the theming of this library so custom changes to your own site match.

Example of using breakpoints (implement in any css in js manner if in a template literal, example is done in emotion):

Possible values include:

• small
• small-up
• small-down
• medium
• medium-up
• medium-down
• large
• large-up

Helper Classes

Overview

Many helper classes come with the project as well as are generated with the project based on your theme choices. For example, if you override the color red, the helper class for changing color text will now use your site's color red instead of the default.

Text Alignment

Changes the css text-align property. May use responsive classes by passing center, left or right with sm, md or lg.

• text-center
• text-left
• text-right
• text-sm-{position}
• text-md-{position}
• text-lg-{position}

Text Sizing

Changes the css font-size property

• text-small

Font Styling

Changes the css font-style property

• bold
• italic

Float

Changes the css float property

• left
• right

Display

Changes the css display or visibility property

• show
• hidden
• invisible
• inline

Text Color

Changes the css color property. Must pass a color such as "red" or "blue" that is defined in the theme.

• text-{color}

Background Color

Changes the css color property. Must pass a color such as "red" or "blue" that is defined in the theme.

• bg-{color}

Padding

Changes the css padding property. Must pass a spacing such as "xs" or "md" that is defined in the theme.

• pb-{spacing}
• pt-{spacing}
• pr-{spacing}
• pl-{spacing}

Margin

Changes the css margin property. Must pass a spacing such as "xs" or "md" that is defined in the theme.

• mb-{spacing}
• mt-{spacing}
• mr-{spacing}
• ml-{spacing}

Border Color

Changes the css color property. Must pass a color such as "red" or "blue" that is defined in the theme.

• bc-{color}

Border Width

Changes the css border-width and style property. Stands for "border width solid 'size'".

• bw-s-1
• bw-s-2
• bw-s-3
• bw-none

Content Sizes

Changes the css max-width property. Please note this is not based on the theme spacing

• content-xs
• content-sm
• content-md
• content-lg

Content Sizes

Changes the css max-width property. Please note this is not based on the theme spacing

• content-xs
• content-sm
• content-md
• content-lg

Image Utilities

Changes properties related to image size, etc.

• img-responsive

Box Shadow

Changes the css box-shadow property.

• box-shadow

Box Shadow

Changes the css display and margin properties.

• center-block
• center-block-lg