Documentation ➜ Variables
Fuselage comes with sensible defaults, but feel free to customize them using these variables found within the _settings.scss file.
Features
$gimme-debug
boolean False
➜ Enables the debug module.
$gimme-responsive-tables
boolean True
➜ Includes responsive table
classes. If it is disabled, only basic tables are available.
$gimme-responsive-widths
boolean True
➜ Includes responsive width
classes. If it is disabled, only basic widths are available (no
namespaces).
Breakpoints
$xsmall
width value (0)
➜ Sets the breakpoint for the
xsmall media size.
$small
width value (320px)
➜ Sets the breakpoint for the
small media size.
$medium
width value (640px)
➜ Sets the breakpoint for the
medium media size.
$large
width value (960px)
➜ Sets the breakpoint for the
large media size.
$xlarge
width value (1280px)
➜ Sets the breakpoint for the
xlarge media size.
$xxlarge
width value (1500px)
➜ Sets the breakpoint for the
xxlarge media size.
Colors
$brand-primary
color value (#FF6633)
➜ Sets the value for the
brand-primary color.
$brand-secondary
color value (#6DBBB7)
➜ Sets the value for the
brand-secondary color.
$brand-tertiary
color value (#B29167)
➜ Sets the value for the
brand-tertiary color.
$info-color
color value (#778899)
➜ Sets the value for the
info-color that is used within Fuselage.
$success-color
color value (3B8C0C)
➜ Sets the value for the
success-color that is used within Fuselage.
$warn-color
color value (#FFB83F)
➜ Sets the value for the
warn-color that is used within Fuselage.
$alert-color
color value (#CE4844)
➜ Sets the value for the
alert-color that is used within Fuselage.
Typography
$base-ratio
numeric value ($golden)
➜ Sets the modular scale used in the
typography. Below are variable names for valid ratios you can use, along with their values.
| Ratio | Value |
|---|---|
| Golden (Phi) | 1.618034 |
| Double Octave | 4 |
| Major Twelfth | 3 |
| Major Eleventh | 2.666666667 |
| Major Tenth | 1.5 |
| Octave | 2 |
| Major Seventh | 1.875 |
| Minor Seventh | 1.777777778 |
| Major Sixth | 1.666666667 |
| Minor Sixth | 1.6 |
| Fifth | 1.5 |
| Augmented Fourth | 1.41421 |
| Fourth | 1.333333333 |
| Major Third | 1.25 |
| Minor Third | 1.2 |
| Major Second | 1.125 |
| Minor Second | 1.066666667 |
modular-scale([$index, $scale-list]) function
➜ Accesses a given modular scale by index.
- $index positive integer (2)
- Index of the given modular scale. Cannot exceed the
$scale-length- $scale-list list of numeric values ($generated-scale)
- Modular scale to be used. Will use the default scale unless a new one is generated and passed in.
$scale-length
positive integer (7)
➜ Determines the length of your modular
scale. The modular scale is a list of values, accessible by passing an index
to the modular-scale function.
$base-font
font stack (Helvetica, Arial, sans-serif)
➜ Sets the base font-stack for the
project.
$specialty-font
font stack ("Palatino linotype", "Book Antiqua", Palatino, serif)
➜ Sets the specialty font stack for the
project.
$mono-font
font stack ("Courier New", Courier, monospace)
➜ Sets the monspaced font stack for the
project. This is used in code blocks.
$base-font-size
font size (1.8rem)
➜ Sets the base font size for the project. Based on a rem size of 10px.
$base-line-height
line height ($base-ratio)
➜ Sets the base line height for the project.
$code-font-size
font size (1.45rem)
➜ Sets the text color for the project.
$text-color
color value (#2E2E2E)
➜ Sets the text color for the project.
Spacing
$spacing-unit
spacing value (modular-scale(3))
➜ Sets the spacing unit for the project.
This defaults to the third value in the generated modular scale.
$border-radius
radius value (modular-scale(1))
➜ Sets the border-radius value for the
project. This defaults to the first value in the generated modular scale.