styleguide/styleguide.less
, line 315
styleguide/styleguide.less
, line 319
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Markup
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
text/fonts.less
, line 136
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Markup
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
text/fonts.less
, line 228
3.1.3 #permalink Font families, faces, weights.
Note that not all fonts are available in all weights and faces. TODO should we add missing font weights and just degrade to the existing ones?
text_7n
text_8n
text_7i
text_title text_4n
text_title text_7n
Markup
<div class="grid-12 grid-parent">
<div class="grid-4">
<span class="text_4n">text_4n</span><br/>
<span class="text_7n">text_7n</span><br/>
<span class="text_8n">text_8n</span><br/>
</div>
<div class="grid-4">
<span class="text_4i">text_4i</span><br/>
<span class="text_7i">text_7i</span><br/>
</div>
<div class="grid-4">
<span class="text_title text_3n">text_title text_3n</span><br/>
<span class="text_title text_4n">text_title text_4n</span><br/>
<span class="text_title text_7n">text_title text_7n</span><br/>
</div>
</div>
text/fonts.less
, line 71
text_fontSizeSmall
text_fontSizeBase
text_fontSizeLarge
text_fontSizeLarger
text_fontSizeLargest
text_fontSizeJumbo
Markup
<span class="text_fontSizeSmaller">text_fontSizeSmaller</span><br/>
<span class="text_fontSizeSmall">text_fontSizeSmall</span><br/>
<span class="text_fontSizeBase">text_fontSizeBase</span><br/>
<span class="text_fontSizeLarge">text_fontSizeLarge</span><br/>
<span class="text_fontSizeLarger">text_fontSizeLarger</span><br/>
<span class="text_fontSizeLargest">text_fontSizeLargest</span><br/>
<span class="text_fontSizeJumbo">text_fontSizeJumbo</span><br/>
text/fonts.less
, line 4
text_letterSpacingLoose
text_letterSpacingLooser
text_letterSpacingLoosest
Markup
<span class="text_letterSpacingNormal">text_letterSpacingNormal</span><br/>
<span class="text_letterSpacingLoose">text_letterSpacingLoose</span><br/>
<span class="text_letterSpacingLooser">text_letterSpacingLooser</span><br/>
<span class="text_letterSpacingLoosest">text_letterSpacingLoosest</span>
text/fonts.less
, line 32
line
height
line
height
line
height
line
height
line
height
line
height
line
height
Markup
<div class="grid-12 grid-parent">
<div class="grid-1 text_lineHeightTightest">tightest<br/>line<br/>height</div>
<div class="grid-1 text_lineHeightTight">tight<br/>line<br/>height</div>
<div class="grid-2 text_lineHeightNatural">natural<br/>line<br/>height</div>
<div class="grid-2 text_lineHeightBase">base<br/>line<br/>height</div>
<div class="grid-2 text_lineHeightLoose">loose<br/>line<br/>height</div>
<div class="grid-2 text_lineHeightLooser">looser<br/>line<br/>height</div>
<div class="grid-2 text_lineHeightLoosest">loosest<br/>line<br/>height</div>
</div>
text/fonts.less
, line 47
Markup
<span class="text_allCaps">a text label</span>
text/fonts.less
, line 251
3.2 #permalink Links
Links are vastly simpler as of 3/2016. By default they're blue and not underlined, and orange and underlined on hover.
link_subtle
links don't get underlined on hover.
To have it keep its color on hover, define a color for its parent and apply col_inherit
to the link/child.
Never use col_inherit
and link_subtle
together, or the link will have no hover state.
There are only three additional types of links: link_block
, link_block2
, and link_stroke
.
Markup
<div class="grid-parent layout_centerVertical">
<div class="grid-3">
<a href="/" class="[modifier class]">default link</a><br/>
<a href="/" class="link_subtle [modifier class]">subtle link</a><br/>
<span class="col_ggPrimary3Text"><a href="/" class="col_inherit [modifier class]">always green link</a></span> <br/>
<span class="col_ggSecondary3Text"><a href="/" class="col_inherit link_subtle [modifier class]">don't ever do this</a></span> <br/>
</div>
<div class="grid-3 col_whiteText box_padded1 layout_center"><a class="grid-12 col_ggPrimary5 col_inherit link_block box_padded3 [modifier class]">block link</a></div>
<div class="grid-3 col_whiteText box_padded1 layout_center"><a class="grid-12 col_ggPrimary5 col_inherit link_block2 box_padded3 [modifier class]">block link 2</a></div>
<a href="/" class="grid-3 box_paddedHalf link_stroke [modifier class]">
<div class="col_ggPrimary1Lighter box_padded4 col_defaultText">
stroke link
</div>
</a>
</div>
text/links.less
, line 6
3.2.1 #permalink Linkify
This is a bit of css magic to make an entire div clickable. Compare these two blocks, where the entire block is clickable on the left and only the text is clickable on the right. Note that the parent div must be relative positioned.
Markup
<div class="grid-parent box_padded2">
<div class="grid-3 grid-parent col_ggPrimary1Dark layout_center layout_centerVertical layout_rel box_verticalPadded2">
<a href="#" class="col_whiteText link_subtle"><span class="link_linkify"></span>click anywhere</a>
</div>
<div class="grid-3 grid-parent col_ggPrimary1Dark layout_center layout_centerVertical layout_rel box_verticalPadded2">
<a href="#" class="col_whiteText link_subtle">click this text</a>
</div>
</div>
text/links.less
, line 97
styleguide/styleguide.less
, line 323
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- sed do eiusmod tempor incididunt
- ut labore et dolore magna aliqua
- Ut enim ad minim veniam
Markup
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<ul>
<li>sed do eiusmod tempor incididunt</li>
<li>ut labore et dolore magna aliqua</li>
</ul>
<li>Ut enim ad minim veniam</li>
</ul>
text/lists.less
, line 2
- an item
- another item
- yet another item
- an item
- another item
- yet another item
Markup
<ul>
<li>an item</li>
<li>another item</li>
<li>yet another item</li>
</ul>
<ul class="list_noDecorate">
<li>an item</li>
<li>another item</li>
<li>yet another item</li>
</ul>
text/lists.less
, line 28