Development Style Guide

The purpose of this style guide is to provide an overview of all core elements, such as typography, buttons and inputs.

Colors

Headings

Please note, heading line-height and font-size are set globally, however any margins are scoped within the .content wrapper.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Body text and inline links

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

Unordered list

  • List item 1.
  • List item 2.
  • List item 3.

Ordered list

  1. List item 1.
  2. List item 2.
  3. List item 3.

Buttons

Also ensure all button states are correctly configured, this includes: hover, active, focus.

Contact us
Button secondary
Button text

Forms/inputs

Ensure state/event styles are all correctly configured, this includes: focus, blur, validate, error.

Border radius

Raptor comes with the global css variable --border-radius, which provides easy control of a border radius across a website. See the border radius here. For instances where a greater radius is used, try to still use the css variable, but with a multipler in a calc() function. Example below.

border-radius: calc( var(--border-radius) * 2 );

1x
2x