Neutral Colors
Usage: Base set used to mix tints and tones.
SCSS partial: src/src/assets/stylesheets/_variables.scss
$gray
$white
$black
A handy collection of all the colors, typography, UI patterns, and components used on this website
Where applicable links to a component’s Sass partial1 and/or _include
are provided along with short descriptions of typical usage.
Usage: Base set used to mix tints and tones.
SCSS partial: src/src/assets/stylesheets/_variables.scss
$gray
$white
$black
Usage: Additional colors commonly used for buttons and notices.
SCSS partial: src/assets/stylesheets/_variables.scss
$primary-color
$success-color
$warning-color
$danger-color
$info-color
Usage: Social media brand colors.
SCSS partial: src/assets/stylesheets/_variables.scss
$twitter-color
$facebook-color
Usage: Colors used to give the site its base flavor.
SCSS partial: src/assets/stylesheets/_variables.scss
$background-color
$body-color
$text-color
$headline-color
$link-color
$link-color-hover
$border-color
$highlighter-color
Usage: Buttons that span the width of their parent container.
SCSS partial: src/assets/stylesheets/_buttons.scss
SCSS partial: src/assets/stylesheets/_buttons.scss
SCSS partial: src/assets/stylesheets/_buttons.scss
SCSS partial: src/assets/stylesheets/_buttons.scss
SCSS partial: src/assets/stylesheets/_buttons.scss
Usage: On dark backgrounds.
SCSS partial: src/assets/stylesheets/_buttons.scss
Usage: Social sharing links in a post's footer.
SCSS partial: src/assets/stylesheets/_buttons.scss
SCSS partial: src/assets/stylesheets/_buttons.scss
SCSS partial: src/assets/stylesheets/_buttons.scss
Usage: Order form using PayPal's API.
SCSS partial: src/assets/stylesheets/_forms.scss
Usage: Contact form using Wufoo's API.
SCSS partial: src/assets/stylesheets/_forms.scss
Usage: For displaying two related images side by side.
SCSS partial: src/assets/stylesheets/_base.scss
Usage: Display 7 color swatches in a post that mimics Paper by FiftyThree's color palettes.
SCSS partial: src/assets/stylesheets/_paper-color-swatches.scss
Usage: Display three related images in a row.
SCSS partial: src/assets/stylesheets/_base.scss
Usage: Default figure display for images or videos.
SCSS partial: src/assets/stylesheets/_base.scss
Usage: Default thumbnail grid.
SCSS partial: src/assets/stylesheets/_thumbnail-grids.scss
Usage: For older browsers, display a notice that encourages updating to a more modern one.
Include partial: _includes/browser-upgrade.html
SCSS partial: src/assets/stylesheets/_notices.scss
Why not upgrade to a more modern one to better enjoy this site?
Usage: Emphasize post text.
SCSS partial: src/assets/stylesheets/_notices.scss
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.
Usage: Emphasize post text.
SCSS partial: src/assets/stylesheets/_notices.scss
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.
Usage: Emphasize post text. Used predominately for ProTips.
SCSS partial: src/assets/stylesheets/_notices.scss
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.
Usage: Emphasize post text.
SCSS partial: src/assets/stylesheets/_notices.scss
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.
Usage: Emphasize post text. Used predominately for amendments or updates to a post.
SCSS partial: src/assets/stylesheets/_notices.scss
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.
Usage: Waypoints for long form posts that have many sections.
Include partial: _includes/toc.html
SCSS partial: src/assets/stylesheets/_toc.scss
Usage: Listing of tags assigned to a post or posts.
SCSS partial: src/assets/stylesheets/_page.scss
Usage: Quoted text.
SCSS partial: src/assets/stylesheets/_base.scss
Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.
First Lastname, The Greatest Article
Usage: Headline hierarchy found in post content
SCSS partial: src/assets/stylesheets/_page.scss
Usage: Ordered lists found in post content
SCSS partial: src/assets/stylesheets/_page.scss
Usage: Unordered lists found in post content
SCSS partial: src/assets/stylesheets/_page.scss
Usage: Paragraph text found in post content. First paragraph is emphasized with larger font-size.
SCSS partial: src/assets/stylesheets/_page.scss
First paragraph is styled differently from the rest. This is emphasized text. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy69. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Usage: Basic table found in post content
SCSS partial: src/assets/stylesheets/_base.scss
# | First Name | Last Name | Username |
---|---|---|---|
1 | Michael | Rose | @mmistakes |
2 | William | Rick | @thewhip |
3 | Larry | the Scary |
Sass partials are written using the Sassy SCSS syntax (or SCSS) and can be found in _assets/stylesheets/
. ↩
https://vacsf.org/style-guide/