Base Block Quotes for Scales
These are the base styles for block quotes.
Requirements
Scales uses the Sass CSS preprocessor, you'll need either Ruby Sass or LibSass.
Installation
-
NPM:
npm install --save @scales/base-blockquotes
Usage
A nice semantic way to markup a blockquote is using the figure
element. See http://alistapart.com/blog/post/more-thoughts-about-blockquotes-than-are-strictly-required for the rationale behind this approach.
Default blockquote
<figure>
<blockquote class="Blockquote">
<p class="Blockquote__quote">For me, it is far better to grasp the Universe as it really is than to persist in delusion, however satisfying and reassuring.</p>
</blockquote>
<figcaption class="Blockquote__source">Carl Sagan, <cite>The Demon-Haunted World</cite></figcaption>
</figure>
Available Classes
.Blockquote
.Blockquote__quote
.Blockquote__source
Available Variables
$source-prefix
Namespace Variables
The Scales Namespace Variable
All Scales patterns expose the $scales-namespace
variable.
$scales-namespace
accepts a string that will prefix all Scales classes. The default value is null
.
Class Level Namespace Variable
Class level namespace variables allow you to namespace a selector based on the type e.g. b-
for "base", o-
for "objects", u-
for utilities, and c-
for "components".
This pattern exposes the $scales-base-class-namespace
variable.
$scales-base-class-namespace
accepts a string that will prefix any classes in this pattern and follow the Scales Namespace Variable if it is not null. The default value is null
.
Namespace Variable Usage
To set either of these namespaces, you will need to set the variables in a file that is imported before any scales files. For example:
@import your-project/settings; // Namespace variables are set in this file
@import your-project/scalescss; // Imports all of the Scales packages
@import your-project/project // The rest of your project imports