Sass Reference

If you are already using Sass in your project, you can import the Dress Code Sass to:

Customize default dress-code variables
Use dress-code variables, mixins, functions and placeholders

On this page you will find the Sass reference for the main entities subdivided by group.

Colors

variables

Name	Type	Default	Description
$dc-white	Color	`#fff`	white
$dc-black	Color	`#000`	black
$dc-gray80	Color	`#f7f7f7`	gray 80
$dc-gray70	Color	`#ededed`	gray 70
$dc-gray60	Color	`#d1d1d1`	gray 60
$dc-gray50	Color	`#b6b6b6`	gray 50
$dc-gray40	Color	`#9b9b9b`	gray 40
$dc-gray30	Color	`#808080`	gray 30
$dc-gray20	Color	`#646464`	gray 20
$dc-gray10	Color	`#4a4a4a`	gray 10
$dc-blue80	Color	`#e6f4ff`	blue 80
$dc-blue70	Color	`#d1ebff`	blue 70
$dc-blue60	Color	`#a3d9ff`	blue 60
$dc-blue50	Color	`#75c6ff`	blue 50
$dc-blue40	Color	`#26aafe`	blue 40
$dc-blue30	Color	`#1e87cb`	blue 30
$dc-blue20	Color	`#186698`	blue 20
$dc-blue10	Color	`#124365`	blue 10
$dc-cyan80	Color	`#e8fcff`	cyan 80
$dc-cyan70	Color	`#b5f5ff`	cyan 70
$dc-cyan60	Color	`#8cf0ff`	cyan 60
$dc-cyan50	Color	`#61eaff`	cyan 50
$dc-cyan40	Color	`#24e0fe`	cyan 40
$dc-cyan30	Color	`#1fb3cb`	cyan 30
$dc-cyan20	Color	`#1a8899`	cyan 20
$dc-cyan10	Color	`#145b66`	cyan 10
$dc-green80	Color	`#e7ffd6`	green 80
$dc-green70	Color	`#c6ff9e`	green 70
$dc-green60	Color	`#acff70`	green 60
$dc-green50	Color	`#8bfa3c`	green 50
$dc-green40	Color	`#72e620`	green 40
$dc-green30	Color	`#65cb1c`	green 30
$dc-green20	Color	`#4a9912`	green 20
$dc-green10	Color	`#30660a`	green 10
$dc-yellow80	Color	`#fff9d9`	yellow 80
$dc-yellow70	Color	`#fff09e`	yellow 70
$dc-yellow60	Color	`#ffeb7a`	yellow 60
$dc-yellow50	Color	`#ffe347`	yellow 50
$dc-yellow40	Color	`#ffda0a`	yellow 40
$dc-yellow30	Color	`#ccb116`	yellow 30
$dc-yellow20	Color	`#99840e`	yellow 20
$dc-yellow10	Color	`#665705`	yellow 10
$dc-orange80	Color	`#ffefe0`	orange 80
$dc-orange70	Color	`#ffd1a6`	orange 70
$dc-orange60	Color	`#ffba7a`	orange 60
$dc-orange50	Color	`#ffa54e`	orange 50
$dc-orange40	Color	`#ff8e25`	orange 40
$dc-orange30	Color	`#cc711d`	orange 30
$dc-orange20	Color	`#995516`	orange 20
$dc-orange10	Color	`#66380e`	orange 10
$dc-red80	Color	`#ffeae6`	red 80
$dc-red70	Color	`#ffcabf`	red 70
$dc-red60	Color	`#ff9985`	red 60
$dc-red50	Color	`#ff6c4f`	red 50
$dc-red40	Color	`#ff4a25`	red 40
$dc-red30	Color	`#cc3a1d`	red 30
$dc-red20	Color	`#992b15`	red 20
$dc-red10	Color	`#661d0e`	red 10
$dc-magenta80	Color	`#f7e9f7`	magenta 80
$dc-magenta70	Color	`#f7c8f7`	magenta 70
$dc-magenta60	Color	`#f7b2f6`	magenta 60
$dc-magenta50	Color	`#f296f1`	magenta 50
$dc-magenta40	Color	`#eb74e9`	magenta 40
$dc-magenta30	Color	`#bb5cba`	magenta 30
$dc-magenta20	Color	`#8c458b`	magenta 20
$dc-magenta10	Color	`#5d2e5c`	magenta 10
$dc-purple80	Color	`#f4edff`	purple 80
$dc-purple70	Color	`#e1cfff`	purple 70
$dc-purple60	Color	`#c8a6ff`	purple 60
$dc-purple50	Color	`#ac7afd`	purple 50
$dc-purple40	Color	`#9757fd`	purple 40
$dc-purple30	Color	`#7845cb`	purple 30
$dc-purple20	Color	`#5a3498`	purple 20
$dc-purple10	Color	`#3c2365`	purple 10

Core

variables

Name	Type	Default	Description
$dc-font-path	String	`"../fonts"`	Fonts folder
$dc-image-path	String	`"../img"`	Images folder
$dc-tiny-width	Number	`0`	base breakpoint
$dc-small-width	Number	`20em`	small screens breakpoint 320px {Smartphones}
$dc-medium-width	Number	`37.5em`	medium screens breakpoint 600px {Tablets}
$dc-large-width	Number	`64em`	large screens breakpoint 1024px {Desktops}
$dc-huge-width	Number	`80em`	huge screens breakpoint 1280px {Full HD}
$dc-giant-width	Number	`80em`	giant breakpoint 1280px {Full HD}
$dc-monstrous-width	Number	`100em`	monstrous breakpoint 1400px
$dc-breakpoints	Map	`( tiny: $dc-tiny-width, small: $dc-small-width, medium: $dc-medium-width, large: $dc-large-width, huge: $dc-huge-width )`	responsive breakpoints map

mixins

dc-everything

Output/include all css selectors.

Icons

mixins

dc-icon

base mixin applying DressCodeIcons font to :before pseudo-element

functions

dc-icon-char

Get the character representing a font icon

Returns
string - utf-8 character representing the icon

Parameter	Type	Default	Description
$name	string		icon name (eg. close)

Structure And Grid

variables

Name	Type	Default	Description
$dc-grid-column-count	Number	`12`	The default column count for the grid
$dc-grid-gutter	Map	`( small: 16px, medium: 24px, large: 32px )`	The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.
$dc-grid-breakpoints	Map	`$dc-breakpoints`	Grid breakpoints

mixins

dc-grid-row

Mixin for creating a row.
Sets the negative right and left margin for the row to align the columns inside a row.
As each column has padding (for gutter), negative margin on row is applied.

Parameter	Type	Default	Description
$gutter	Map	`$dc-grid-gutter`	A Map of gutter values for different breakpoint sizes

dc-grid-column

Mixin for creating a column.
Sets the flex value for the column.
Sets the padding for column based on the gutter space per breakpoint.

Parameter	Type	Default	Description
$columns	Number	`null`	Size (or span) of the column.
$gutter	Map	`$dc-grid-gutter`	A Map of gutter values for different breakpoint sizes.

dc-block-grid

Mixin for creating a block grid.
Sets the flex value for the child columns

Parameter	Type	Default	Description
$columns	Number		Number of columns in each row
$column-selector	String	`".dc-column"`	Selector for column within the row.

functions

grid-column-flex

Function for calculating flex property value for a column.
Returns flex property value based on the number of columns supplied.

Returns
Flex - flex property value based on the number of columns supplied.

Parameter	Type	Default	Description
$columns	Number	`null`	Size (or span) of the column.

grid-column-size

Calculates the width of a column in percentage.
This is used for calculating flex percentage, max-widths, and offset widths

Returns
Width - width in percentage

Parameter	Type	Default	Description
$columns	Number		Number of columns