Donatello Styleguide

Donatello Styleguide

Source: css/1-settings/_settings.scss, line 1

1 Settings

The preprocessor variables are the globally-available settings or configuration switches for our project.

Source: css/1-settings/settings.colors.scss, line 1

1.1 Colors

Source: css/1-settings/settings.colors.scss, line 8

1.1.1 Primary Colors

The primary colors for branding.

  • #2980b9, Leader blue

    $leonardo
  • #8e44ad, Purple tech

    $donatello
  • #c0392b, Sai

    $raphael
  • #E87E04, Cowabunga

    $michelangelo
  • #FDE3A7,

    $splinter

Source: css/1-settings/settings.colors.scss, line 30

1.1.2 Secondary Colors

  • #222222, Black

    $black
  • #CCCCCC, Gray

    $gray
  • #FFFFFF, White

    $white
  • #c0392b, Red

    $red
  • #86B155, Green

    $green
  • #FCB350, Orange

    $orange
  • #3FA7D6, Blue

    $blue

Source: css/1-settings/settings.fonts.scss, line 1

1.2 Fonts

Source: css/1-settings/settings.fonts.scss, line 8

1.2.1 Default fonts

  • sans-serif

    $default-font-family:
  • 16px

    $default-font-size:
  • normal

    $default-font-weight:
  • 1.5

    $default-line-height:

Source: css/1-settings/settings.fonts.scss, line 26

1.2.2 Default heading fonts

  • sans-serif

    $default-heading-font-family:
  • 26px

    $default-heading-font-size:
  • bold

    $default-heading-font-weight:
  • 1.5

    $default-heading-line-height:

Source: css/1-settings/settings.grid.scss, line 1

1.3 Grid

Object grid settings. Changing these values in the middle of a project will have huge impact on your layout.

  • 12

    $grid-columns
  • 1200px

    $grid-row-width
  • 20px

    $grid-gutter-width
  • 568px

    $grid-query-width-sm
  • 768px

    $grid-query-width-md
  • 1024px

    $grid-query-width-lg
  • false

    $grid-create-push
  • false

    $grid-create-pull
  • false

    $grid-create-offset
  • g-

    $grid-prefix
  • row12

    $grid-row
  • --fluid

    $grid-row-suffix
  • col

    $grid-col
  • push

    $grid-push
  • pull

    $grid-pull
  • offset

    $grid-offset
  • --xs

    $grid-suffix-xs
  • --sm

    $grid-suffix-sm
  • --md

    $grid-suffix-md
  • --lg

    $grid-suffix-lg

Source: css/1-settings/settings.grid.scss, line 56

1.3.1 Alias Media queries

Media query aliases useable for the mq() mixin.

  • $grid-query-width-sm

    $sm
  • $grid-query-width-md

    $md
  • $grid-query-width-lg

    $lg