Breakpoints
Github

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