// Variables
$primary-font: 'LL Replica Regular Web', sans-serif;
$secondary-font: 'IBM Plex Mono', monospace;
// Example usage
.my-class {
font-family: $primary-font;
}
.another-class {
font-family: $secondary-font;
}
The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.
// Variables
$ft-xxl: 6rem;
$ft-xl: 4.2rem;
$ft-lg: 2.7rem;
$ft-md: 2.4rem;
$ft-sm: 2.1rem;
$ft-xs: 1.8rem;
$ft-xxs: 1.5rem;
$ft-xxxs: 1.2rem;
// Example usage
html {
font-size: 62.5%; // Change this global value to change overall font-size
}
.my-class {
font-size: $xxl;
}
Small type leading no kerning: used for larger bodies of type with medium to small font sizes.
// Variables
$kern: -0.1rem;
$blh: 1.66;
$hlh: 1.33;
// Example usage
h2 {
line-height: $hlh;
letter-spacing: $kern;
}
p {
line-height: $blh;
}
<button class="sml-btn white">Button</button>
<button class="sml-btn grey-light">Button</button>
<button class="sml-btn orange">Button</button>
<button class="sml-btn blue">Button</button>
<button class="sml-btn green">Button</button>
<button class="sml-btn fade">Button</button>
// Shortcodes for supported Wordpress content areas
[button link="/contact-us/" color="white"]White button[/button]
[button link="/contact-us/" color="grey-light"]Grey button[/button]
[button link="/contact-us/" color="orange"]Orange button[/button]
[button link="/contact-us/" color="blue"]Blue button[/button]
[button link="/contact-us/" color="green"]Green button[/button]
[button link="/contact-us/" color="fade"]Fade button[/button]
Ontology management
Data cleansing + pre-processing
Text analytics + semantic enrichment
Search + data intelligence
Product
.my-icon { fill: $color-orange; }
<svg class="my-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">...</svg>
There are base measurements to determine breakpoints and structural container widths.
// Variables
$screen-xxl: 1800px;
$screen-xl: 1600px;
$screen-lg: 1280px;
$screen-md: 1024px;
$screen-sm: 768px;
$screen-xs: 650px;
$screen-xxs: 400px;
// Media query helper mixin
@mixin mq($point) {
@if $point == screen-xl {
@media (min-width: $screen-xl) { @content; }
}
// Repeat for all viewport measurements and screen orientations
}
// Example usage
@include mq(screen-xs) {
.my-class {
width: $screen-xs;
}
}
A single, fixed global padding value allows for a consistent and predictable layout system. Ideal for horizontal and vertical rhythm.
// Global padding variables
$pad-global: 5rem;
$pad-xl: $pad-global*2;
$pad-lg: $pad-global;
$pad-md: $pad-global/2;
$pad-sm: $pad-global/4;
// Example usage
.my-class {
margin: 0 0 $pad-lg;
padding: 0 $pad-md;
}
These should only be used for major sections of a web page that have no content either side of the left and right edge.
// Helper mixin @mixin inner-helper { width: 100%; margin: 0 auto; padding: 0 $pad-md; @include mq(screen-lg) { padding: 0 $pad-lg; } } // Example usage .inner-md { @include inner-helper; @include mq(screen-md) { width: $screen-md; } }
<div class="inner-xxl">...</div> <div class="inner-xl">...</div> <div class="inner-lg">...</div> <div class="inner-md">...</div>
// Single fields
<div class="contact-form__row">
<label>Text label</label>
<input type="text" placeholder="Text field" />
</div>
// Multiple fields
<div class="contact-form__row">
<label>Radio group label</label>
<div class="contact-form__row__sub-fields">
<label><input id="radio-1" type="radio" name="radio-option" />Radio button label</label>
<label><input id="radio-2" type="radio" name="radio-option" />Radio button label</label>
</div>
</div>