@scalescss/base-blockquotes
v6.0.0-1
Published
Base block quote styles for Scales CSS
Downloads
338
Readme
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