Colors

A small color pallette has been added to mesh to keep things quick, but it's totally customisable. Manipulate the element color and background color quickly.

Usage

Every website's colors are different, there's no doubt in that. Which is why we highly recommend you use the mesh builder to change the default colors in order to create a custom css file.
Color and background color are able to be manipulated inline with the color utility classes.

Notation:

You can target the color class by using c-{color}.
The background class can be targeted by using bg-{color}.

Background Colors

Here you can see the default mesh background colors:

Class	Background Color	Hex
.bg-white		#ffffff
.bg-black		#000000
.bg-dark		#e8e8e8
.bg-muted		#999999
.bg-light		#e8e8e8
.bg-primary		#ff2451
.bg-secondary		#8270b8
.bg-success		#55b559
.bg-info		#37abd4
.bg-warning		#ff9e0f
.bg-danger		#f55145
.bg-link		#3763d4

Colors

Here you can see the default mesh text colors:

Class	Color	Hex
.c-white	White	#ffffff
.c-black	Black	#000000
.c-dark	Dark	#e8e8e8
.c-muted	Muted	#999999
.c-light	Light	#e8e8e8
.c-primary	Primary	#ff2451
.c-secondary	Secondary	#8270b8
.c-success	Success	#55b559
.c-info	Info	#37abd4
.c-warning	Warning	#ff9e0f
.c-danger	Danger	#f55145
.c-link	Link	#3763d4

Variables

Change the color classes and attributes with the variables below.

Variable	Value	Description
`$palette: ( white: #ffffff, black: #000000, dark: #363636, muted: #999999, light: #e8e8e8, primary: #ff2451, secondary: #8270b8, success: #55b559, info: #37abd4, warning: #ff9e0f, danger: #f55145, link: #3763d4 );`	Map(name:color)	This map defines the main color pallete used with mesh. Its a great place to define colors for your web build. The name corresponds to the html class name and the color defines the hex or rgba value. Note: Changing/deleting white, black or primary will throw an error, so its best to define them yourself. Please also bear in mind each color can add a fair chunk of kb to mesh.
`$color-attr: ( c: 'color', bg: 'background-color' );`	Map(class:attribute)	The class of the `color-attr` map corresponds to the css attribute, you can add and delete as you please. Other common properties include `fill` and `stroke`.