.fa-blue
.fa-green
.fa-purple
.fa-pink
.fa-yellow
.fa-red
.fa-cloudy-white
.fa-light-grey
.fa-grey
.fa-dark-grey
.fa-black
.fa-blue-green-gradient
.fa-purple-pink-gradient
.fa-yellow-red-gradient
.fa-red-blue-gradient
FriendlyAtoms buttons come in three sizes (default, small, and large) and three types (default/solid, outline, and rounded)
FriendlyAtoms styles is based on em units, all converted to base 16, so 1rem is equal to to 16px. All headings are based on the fontface Nunito. All fonts used in this framework are available as Google fonts.
FriendlyAtoms subheader text uses Source® Sans Pro, Adobe's first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.
FriendlyAtoms body text uses Muli. Muli is a minimalist Sans Serif. Muli is designed mainly for use as a display font but is useable as a text font too. Muli has been designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.
FriendlyAtoms comes with a versatile simple grid. Inspired by Bootstrap, FriendlyAtoms's grid is contained by .container and .container-full (full-sized). Each .row is comprised as .col. .col is flexed so each can hold any number of columns depending on your needs.
Below is FriendlyAtoms form elements
This is an example of a card with an image and text. Cards can be used without images and with text, links, and buttons.
This is an example of a card with an image and text. Cards can be used without images and with text, links, and buttons.
This is an example of a card without an image. Cards can be used without images and with text, links, and buttons.