Configuration
Much of the design can be configured just by changing some settings in
_variables.scss. This file will define your colors, typography,
sizes, breakpoints, buttons, borders, and more. Define all your variables here to
keep your project organized.
$x-small: 600px !default;
$small: 800px !default;
$medium: 1000px !default;
$large: 1200px !default;
$mobile: $x-small !default;
$tablet: $small !default;
$desktop: $medium !default;
$background: white !default;
$primary-color: #0366ee !default;
$secondary-color: #29de7d !default;
$accent-color: #cdcdcd !default;
$alternate-background: #fafafa !default;
$alternate-color: #404040 !default;
$link-color: $primary-color !default;
$link-hover-color: darken($link-color, 15%) !default;
$highlight: #ffeea8 !default;
$error: #d33c40 !default;
$success: #29de7d !default;
$bq-border: 16px solid #f0f0f0 !default;
$font-size: 1rem !default;
$body-font-size: 1rem !default;
$font-style: normal !default;
$font-variant: normal !default;
$font-weight: normal !default;
$font-color: #404040 !default;
$font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$line-height: 1.6 !default;
$heading-font-color: #404040 !default;
$heading-font-weight: 600 !default;
$heading-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial,
sans-serif !default;
$heading-line-height: 1.2 !default;
$h1-mobile: 1.75rem !default;
$h2-mobile: 1.5rem !default;
$h3-mobile: 1.25rem !default;
$h4-mobile: 1.1rem !default;
$h5-mobile: 1rem !default;
$h1: 2.25rem !default;
$h2: 2rem !default;
$h3: 1.75rem !default;
$h4: 1.5rem !default;
$h5: 1.25rem !default;
$padding: 1rem !default;
$margins: 1.5rem !default;
$content-padding: 60px 0 !default;
$content-padding-mobile: 30px 0 !default;
$border-width: 1px !default;
$border-style: solid !default;
$border-color: #dedede !default;
$border-radius: 4px !default;
$borders: $border-width $border-style $border-color !default;
$button-background: $primary-color !default;
$button-background-hover: darken($button-background, 10%) !default;
$button-color: #ffffff !default;
$button-font-weight: 600 !default;
$button-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif !default;
$button-font-size: 1rem !default;
$button-border-width: 1px !default;
$button-border-style: solid !default;
$button-border-color: $button-background !default;
$button-border-radius: $border-radius !default;
$button-text-transform: none !default;
$accent-button-background: $secondary-color !default;
$accent-button-color: #ffffff !default;
$accent-button-color-hover: #ffffff !default;
$muted-border: 1px solid $accent-color !default;
$muted-border-hover: 1px solid darken($accent-color, 30%) !default;
$muted-background: transparent !default;
$muted-background-hover: transparent !default;
$muted-color: darken($accent-color, 50%) !default;
$muted-color-hover: darken($accent-color, 50%) !default;
$round-buttons: 40px !default;
$forms: (
'[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=url], [type=week], [type=time], select, textarea'
) !default;
$buttons: ('.button, a.button, button, [type=submit], [type=reset], [type=button]') !default;
$input-background: transparent !default;
$placeholder: darken($accent-color, 20%) !default;
$form-border: 1px solid $border-color !default;
$form-border-hover: 1px solid darken($border-color, 10%) !default;
$form-border-focus: 1px solid $link-color !default;
$stripes: #f8f8f8 !default;
$caption: #ababab !default;
$code-color: $font-color !default;
$code-size: 14px !default;
$code-family: Menlo, monospace !default;
$code-background: transparent !default;
$code-borders: $borders !default;
Changing these default configurations will go a long way in setting the tone of
the rest of your site. View the example below to toggle the style of common HTML5
elements between Primitive, Bootstrap, Foundation, Material, and Skeleton
frameworks.
HTML5 Elements Test
From here, the design is up to you. Happy coding!