Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
332 lines (290 sloc) 10.6 KB
<h1>DUL Catalog Style Guide</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#colors">Colors</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#labels">Labels</a></li>
<li><a href="#typography">Typography</a></li>
</ul>
</div>
</nav>
<h2 id="colors">Colors</h2>
<div class="row">
<div class="col-sm-6">
<p>
Colors must be used responsibly so that text is accessible, complying with
<a href="https://www.w3.org/TR/WCAG21/">WCAG2.1 Level AA</a> guidelines. Text
must have a contrast ratio of at least 4.5:1 compared to its background (3:1
for <a href="https://www.w3.org/TR/WCAG21/#dfn-large-scale">large-scale</a>
text).
</p>
</div>
<div class="col-sm-6">
<div>
<strong>Black Contrast Ratio &mdash; </strong>
<span class="contrast-score contrast-score-black contrast-score-pass">
4.5:1 pass
</span>
<span class="contrast-score contrast-score-black contrast-score-warn">
3:1 large-only
</span>
<span class="contrast-score contrast-score-black contrast-score-fail">
&lt; 3:1 fail
</span>
</div>
<div>
<strong>White Contrast Ratio &mdash; </strong>
<span class="contrast-score contrast-score-white contrast-score-pass">4.5:1 pass</span>
<span class="contrast-score contrast-score-white contrast-score-warn">3:1 large-only</span>
<span class="contrast-score contrast-score-white contrast-score-fail">&lt; 3:1 fail</span>
</div>
<p class="text-muted">
<small>
Check contrasts with other colors using <a href="https://webaim.org/resources/contrastchecker/">WebAIM</a>.
</small>
</p>
</div>
</div>
<h3 id="colors-general">Duke Brand Guide Colors</h3>
<p>
Wherever possible, we should use these colors from the <a href="https://brand.duke.edu/colors/#brand-colors">
Duke Brand Guide</a>. Consult the guide's <a href="https://brand.duke.edu/color-accessibility-grid/">
Color Accessibility grid</a> to ensure proper usage.
</p>
<div class="row">
<% %w[duke-navy-blue duke-royal-blue copper persimmon dandelion piedmont].each do |color| %>
<%= render 'color-swatch', colorname: color %>
<% end %>
</div>
<div class="row">
<% %w[eno magnolia prussian-blue shale-blue ironweed hatteras].each do |color| %>
<%= render 'color-swatch', colorname: color %>
<% end %>
</div>
<div class="row">
<% %w[whisper-gray ginger-beer dogwood shackleford cast-iron graphite].each do |color| %>
<%= render 'color-swatch', colorname: color %>
<% end %>
</div>
<div class="row">
<% %w[granite limestone].each do |color| %>
<%= render 'color-swatch', colorname: color %>
<% end %>
</div>
<h3 id="colors-general">TRLN Shared App Colors</h3>
<p>
Color variables either used in <code>trln_argon</code> shared app or in TRLN-related UI elements in <code>dul-argon-skin</code>. Consult the <a href="https://www.trln.org/about/trln-branding/">TRLN Branding Guide</a>.
</p>
<div class="row">
<% %w[primary-color secondary-color tertiary-color available-color\
not-available-color alt-available-color].each do |color| %>
<%= render 'color-swatch', colorname: color %>
<% end %>
</div>
<div class="row">
<% %w[misc-available-color trln-purple trln-magenta trln-orange trln-teal].each do |color| %>
<%= render 'color-swatch', colorname: color %>
<% end %>
</div>
<h3 id="colors-general">Grays</h3>
<p>
Note that <code>#767676</code> or <code>$gray-light</code> is the lightest possible
shade of gray that is accessible for text on a white background (and vice versa).
</p>
<div class="row">
<% %w[gray-darker gray-dark gray gray-light gray-light-more gray-lighter].each do |color| %>
<%= render 'color-swatch', colorname: color %>
<% end %>
</div>
<div class="row">
<% %w[facet-grey gray-lightest].each do |color| %>
<%= render 'color-swatch', colorname: color %>
<% end %>
</div>
<h3 id="colors-dul">
DUL Website Colors <small>(many derived from a previous Duke style guide)</small>
</h3>
<div class="row">
<% %w[dul-masthead-blue dul-dulcet-lightblue dul-dulcet-green\
dul-dulcet-orange dul-dulcet-red].each do |color| %>
<%= render "color-swatch", colorname: color %>
<% end %>
</div>
<h3 id="colors-bootstrap">Bootstrap Default Color Names</h3>
<p>
As much as possible, these should be mapped to colors from the
DUL color palette.
</p>
<div class="row">
<% %w[brand-primary brand-success brand-danger brand-warning\
brand-info].each do |color| %>
<%= render "color-swatch", colorname: color %>
<% end %>
</div>
<h3 id="color-variants">Color Variants</h3>
<p>
You may need to darken or lighten a color, especially to get it to
contrast enough with its background. In these cases, use our
<a href="https://github.com/duke-libraries/dul-argon-skin/blob/master/app/assets/stylesheets/dul_argon/custom-functions.scss">custom
Sass functions</a> for <code>tint</code> and <code>shade</code>.
</p>
<h4>
Tint (adds white)<br/>
<code>background-color: tint($dul-masthead-blue, 10%);</code>
</h4>
<div class="row">
<% %w[0 10 20 30 40 50 60 70 80 90 100].each do |pct| %>
<%= render "variant-swatch", colorname: "dul-masthead-blue",
variant_type: "tint", pct: pct %>
<% end %>
</div>
<h4>
Shade (adds black)<br/>
<code>background-color: shade($dul-masthead-blue, 10%);</code>
</h4>
<div class="row">
<% %w[0 10 20 30 40 50 60 70 80 90 100].each do |pct| %>
<%= render "variant-swatch", colorname: "dul-masthead-blue",
variant_type: "shade", pct: pct %>
<% end %>
</div>
<hr/>
<h2 id="links">Links</h3>
<div class="row">
<% %w[primary-link-color link-hover-color secondary-link-color].each do |color| %>
<%= render 'color-swatch', colorname: color %>
<% end %>
</div>
<h4>Example Links</h4>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
<p>Here is an <a href="#">inline link</a> among other text. If the link
appears within an element with class <code>underlined-links</code> it
<span class="underlined-links"><a href="#">looks like this</a></span>. This is recommended
to distinguish inline links from surrounding text when the contrast between them is lower
than 3:1.</p>
<hr/>
<h2 id="buttons">Buttons</h2>
<h3>Bootstrap Default Buttons</h3>
<p>
These button classes may be used by present &amp; future Blacklight
or TRLN Argon components so it's important that they are consistent
with DUL styles.
</p>
<div class="row">
<div class="col-sm-2">
<a href="#" class="btn btn-default">My Button</a><br/>
<code>.btn-default</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-primary">My Button</a><br/>
<code>.btn-primary</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-success">My Button</a><br/>
<code>.btn-success</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-info">My Button</a><br/>
<code>.btn-info</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-warning">My Button</a><br/>
<code>.btn-warning</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-danger">My Button</a><br/>
<code>.btn-danger</code>
</div>
</div>
<h3>DUL Catalog Buttons</h3>
<p>
Add an <code>-action</code> suffix to make a button a
clearer call to action among other buttons.
</p>
<div class="row">
<div class="col-sm-2">
<a href="#" class="btn btn-default-action">My Button</a><br/>
<code>.btn-default-action</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-primary-action">My Button</a><br/>
<code>.btn-primary-action</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-success-action">My Button</a><br/>
<code>.btn-success-action</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-info-action">My Button</a><br/>
<code>.btn-info-action</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-warning-action">My Button</a><br/>
<code>.btn-warning-action</code>
</div>
<div class="col-sm-2">
<a href="#" class="btn btn-danger-action">My Button</a><br/>
<code>.btn-danger-action</code>
</div>
</div>
<h3>Button Size Variants</h3>
<p>Add one of the following classes to resize any button</p>
<div class="row">
<div class="col-sm-3">
<a href="#" class="btn btn-default btn-lg">My Button</a>&nbsp;
<a href="#" class="btn btn-default-action btn-lg">My Button</a><br/>
<code>.btn-lg</code>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-default">My Button</a>&nbsp;
<a href="#" class="btn btn-default-action">My Button</a><br/>
<code>{default}</code>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-default btn-sm">My Button</a>&nbsp;
<a href="#" class="btn btn-default-action btn-sm">My Button</a><br/>
<code>.btn-sm</code>
</div>
<div class="col-sm-3">
<a href="#" class="btn btn-default btn-xs">My Button</a>&nbsp;
<a href="#" class="btn btn-default-action btn-xs">My Button</a><br/>
<code>.btn-xs</code>
</div>
</div>
<hr/>
<h2 id="labels">Labels</h2>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<hr/>
<h2 id="typography">Typography</h2>
<p>
This is the default body copy text style in use throughout the Duke University Libraries
catalog UI. Here is a longer block of paragraph text to demonstrate how lines of text
are spaced vertically. This text is encoded in <code>&lt;p&gt;</code> tags to indicate
it is a paragraph.
</p>
<p>Here are some characteristics of the text, presented in a list:</p>
<%# These values get checked / reported via Javascript. %>
<%# See /app/assets/javascripts/dul-styleguide.js. %>
<ul>
<li><strong>Font Family:</strong> <span id="styleguide-body-font"></span></li>
<li><strong>Font Size:</strong> <span id="styleguide-body-size"></span></li>
<li><strong>Color:</strong> <span id="styleguide-body-color"></span></li>
<li><strong>Line Height:</strong> <span id="styleguide-body-lineheight"></span></li>
</ul>
<h3>Type Variations</h3>
<strong>Strong text</strong> &mdash; <code>&lt;strong&gt;</code><br/>
<em>Italic text</em> &mdash; <code>&lt;em&gt;</code><br/>
<small>Smaller text</small> &mdash; <code>&lt;small&gt;</code><br/>
<span class="text-muted">Muted text</span> &mdash; <code>.text-muted</code><br/>
<hr/>
You can’t perform that action at this time.