Deadlift Layout

Grid

Deadlift's layout is based on a six column grid system. There are two breakpoints for responsive design across devices.

How To Use:

  • Since Deadlift is based on Flexbox, each row in the website should be placed in a div and given the class of

    row

  • The column widths are assigned classes according to their size

    • col-1-6

      This is only one column wide

    • col-2-6

      This is two column wide

    • col-3-6

      This is three column wide

    • col-4-6

      This is four column wide

    • col-5-6

      This is five column wide

    • col-6-6

      This is six column wide

    For examples of these widths, please vist the Sample Page.

  • Applying Classes

    To use the classes, simply add the desired class to the HTML element.

    Example:

    <div class="col-2-6">I am two columns wide. </div>

Navigation

Deadlift features a responsive navigation bar. At desktop size the navigation is inline with the site logo but as the screen size decreases, the navigation moves under the logo. In order to achieve this the site logo and navigation will need to be wrapped in a <div> or <header> with a class of

headerStyle

Cards

There are three types of cards available in Deadlift

  • Plain Cards

    These cards wrap the content in a border and lightly tinted backgound to offset the content from the rest of the page. There is no other styling on this card type.

    • To use this card with the complementary color palette use this class: 
      plainCard
    • To use this card with the analogous color palette use this class: 
      plainCardAP

  • Padded Cards

    These cards wrap the content in a border and lightly tinted backgound to offset the content from the rest of the page and also includes padding between the content and the border.

    • To use this card with the complementary color palette use this class: 
      paddedCard
    • To use this card with the analogous color palette use this class: 
      paddedCardAP

  • Animated Cards

    These cards slightly enlarges the content and translates it giving it the appearance of lifing off the page, when the card is hovered over. A drop shadow and slight tint is also added.

    • To use this card with the complementary color palette use this class: 
      animatedCard
    • To use this card with the analogous color palette use this class: 
      animatedCardAP

    Card examples can be found on the Sample Page.