Source: styleguide/styleguide.less, line 302
Example
Markup
<div class="grid-parent">
  <div class="barSpacer grid-12 col_ggPrimary1"></div>
</div>
<div class="grid-parent">
  <div class="barSpacer_short grid-12 col_ggPrimary2"></div>
</div>
<div class="grid-parent">
  <div class="barSpacer_tall grid-12 col_ggPrimary3"></div>
</div>
Source: modules/04_small_decorations/barSpacer.less, line 1
Example
 
5
 
5
Markup
<div class="grid-1 col_ggPrimary2 layout_rel">
  &nbsp;
  <div class="circleIcon col_ggPrimary1 layout_abs layout_abs_bottomRightOutside text_fontSizeSmaller">5</div>
</div>
<div class="grid-1"></div>
<div class="grid-1 col_ggPrimary2 text_fontSizeJumbo layout_rel">
  &nbsp;
  <div class="circleIcon col_ggPrimary1 layout_abs layout_abs_bottomRightOutside text_fontSizeSmaller">5</div>
</div>
Source: modules/04_small_decorations/circleIcon.less, line 4
Example
Markup
 <div class="col_ggPrimary2 grid-1 box_bottomPadded4 box_topPadded1 layout_rel">
  <div class="circleIcon_arrow"></div>
 </div>
Source: modules/04_small_decorations/circleIcon.less, line 31
Examples
Default styling

ruleBottom_ggPrimary1
f

ruleBottom_ggPrimary1

ruleBottom_ggPrimary2Darker
f

ruleBottom_ggPrimary2Darker

ruleBottom_ggPrimary3Dark
f

ruleBottom_ggPrimary3Dark

ruleBottom_ggPrimary4Darker
f

ruleBottom_ggPrimary4Darker

ruleBottom_ggSecondary1
f

ruleBottom_ggSecondary1

ruleBottom_ggSecondary1Lighter
f

ruleBottom_ggSecondary1Lighter

ruleBottom_ggSecondary2Light foo
f

ruleBottom_ggSecondary2Light

Markup
  <div class="col_ggPrimary2 box_padded2">
    <h3 class="ruleBottom ruleBottom layout_center [modifier class]">[modifier class]</h3>
  </div>
Source: modules/04_small_decorations/ruleBottom.less, line 3

4.4 #permalink Icons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Small icons for use in UI. Add (2x-sized for retina) images to www/img/sprite/ and run gulp sprite, then document here

Example
Markup
  <div class="grid-6 box_padded2 col_ggPrimary1Dark sprite-holder">
    <div class="sprite sprite_bbb"></div>
    <div class="sprite sprite_building"></div>
    <div class="sprite sprite_charityNavigator"></div>
    <div class="sprite sprite_check"></div>
    <div class="sprite sprite_close"></div>
    <div class="sprite sprite_close_gray"></div>
    <div class="sprite sprite_close_gray_outline"></div>
    <div class="sprite sprite_cnn"></div>
    <div class="sprite sprite_email_dark"></div>
    <div class="sprite sprite_facebook"></div>
    <div class="sprite sprite_facebook_tan"></div>
    <div class="sprite sprite_gcart"></div>
    <div class="sprite sprite_gcartWhite"></div>
    <div class="sprite sprite_gift"></div>
    <div class="sprite sprite_googlePlus"></div>
    <div class="sprite sprite_googlePlus_tan"></div>
    <div class="sprite sprite_greenCheck"></div>
    <div class="sprite sprite_instagram"></div>
    <div class="sprite sprite_instagram_tan"></div>
    <div class="sprite sprite_lock"></div>
    <div class="sprite sprite_npr"></div>
    <div class="sprite sprite_nyt"></div>
    <div class="sprite sprite_rightArrow"></div>
    <div class="sprite sprite_search"></div>
    <div class="sprite sprite_searchWhite"></div>
    <div class="sprite sprite_secureSite"></div>
    <div class="sprite sprite_twitter"></div>
    <div class="sprite sprite_twitter_dark"></div>
    <div class="sprite sprite_twitter_tan"></div>
    <div class="sprite sprite_world"></div>
    <div class="sprite sprite_wp"></div>
  </div>
Source: modules/04_small_decorations/sprites.less, line 3

4.5 #permalink Triangle

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A triangle that you can place either in a stand alone position or as an arrow coming out of a box. You must add the class triangle and a second class to determine the direction. You can make it smaller with triangle_small, or change the colors (see below).

To learn more about this technique, see the following: http://apps.eky.hk/css-triangle-generator/ http://cssarrowplease.com/

Examples
Default styling
triangle_small
Small
Markup
  <div class="triangle-parent triangle_ggPrimary2 col_ggPrimary5Lightest" style="width: 50px; height: 50px; margin: 10px">
   <div class="triangle triangle_top [modifier class]"></div>
   <div class="triangle triangle_right [modifier class]"></div>
   <div class="triangle triangle_bottom [modifier class]"></div>
   <div class="triangle triangle_left [modifier class]"></div>
  </div>
Source: modules/04_small_decorations/triangleSelector.less, line 4
Examples
Default styling
triangle_rightAlign
Right
triangle_leftAlign
Left
Markup
  <div class="grid-parent grid-12">
    <div class="triangle-parent triangle_ggPrimary2 col_ggPrimary5Lightest" style="width: 50px; height: 50px; margin: 10px">
      <div class="triangle triangle_top [modifier class]"></div>
    </div>
    <div class="triangle-parent triangle_ggPrimary2 col_ggPrimary5Lightest" style="width: 50px; height: 50px; margin: 10px">
      <div class="triangle triangle_bottom [modifier class]"></div>
    </div>
    <div class="triangle-parent triangle_ggPrimary2 col_ggPrimary5Lightest" style="width: 50px; height: 50px; margin: 10px">
      <div class="triangle triangle_left [modifier class]"></div>
    </div>
    <div class="triangle-parent triangle_ggPrimary2 col_ggPrimary5Lightest" style="width: 50px; height: 50px; margin: 10px">
      <div class="triangle triangle_right [modifier class]"></div>
    </div>
  </div>
Source: modules/04_small_decorations/triangleSelector.less, line 25
Examples
Default styling
triangle_ggPrimary2
Blue
triangle_ggPrimary2Dark
Blue
triangle_ggPrimary2Darker
Blue
triangle_ggPrimary3
Green
triangle_ggPrimary3Dark
Green triangle_ggPrimary4Darker -
triangle_ggPrimary5
Green
triangle_ggPrimary5Lightest
Grey
triangle_ggSecondary1
Navy
triangle_ggSecondary2
Red
triangle_ggSecondary3
Red
triangle_white
White
triangle_defaultBg
Default Background
Markup
  <div class="triangle-parent col_ggPrimary5Lightest" style="width: 50px; height: 50px; margin: 10px">
   <div class="triangle triangle_top [modifier class]"></div>
  </div>
Source: modules/04_small_decorations/triangleSelector.less, line 52

4.5.3 #permalink Triangle Selector

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

By default the triangle is positioned in the middle (but use the _noPosition variation to have it disappear completely until something is selected). If you want to select one of a set of horizontal elements, give the triangle class js-selectorN and the selected element js-selectorN-target, for some value of N unique on the page. A javascript function (gg.selectors.positionSelectors()) will take care of positioning the triangle. You don't need to explicitly call it as below, since it's part of the load and resize functions as defined in deferred.js.

Example
option 1
option 2
option 3
option 4
Markup
  <div class="triangle-parent barSpacer triangle_ggPrimary1">
    <div class="triangle triangle_bottom js-selector1"></div>
  </div>
  <div class="grid-parent layout_center">
    <div class="grid-3 box_padded2" onclick="selectFunctionForTheStyleguideOnly(this)">option 1</div>
    <div class="grid-3 box_padded2" onclick="selectFunctionForTheStyleguideOnly(this)">option 2</div>
    <div class="grid-3 box_padded2" onclick="selectFunctionForTheStyleguideOnly(this)">option 3</div>
    <div class="grid-3 box_padded2" onclick="selectFunctionForTheStyleguideOnly(this)">option 4</div>
  </div>
  <script type="text/javascript">
    function selectFunctionForTheStyleguideOnly(elt){
      $(elt).siblings().each(function(){$(this).removeClass('js-selector1-target');});
      $(elt).addClass('js-selector1-target');
      gg.selectors.positionSelectors();
    }
  </script>
Source: modules/04_small_decorations/triangleSelector.less, line 238

4.6 #permalink Vertical Rule Separated

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Place this class on a container with horizontally-laid-out children and it will place subtle vertical rules between the children.

Example
the 1st thing
another thing
a third thing
Markup
  <div class="grid-12 grid-parent verticalRuleSeparated layout_center">
     <div class="grid-4"><div class="grid-12">the 1st thing</div></div>
     <div class="grid-4"><div class="grid-12">another thing</div></div>
     <div class="grid-4"><div class="grid-12">a third thing</div></div>
  </div>
Source: modules/04_small_decorations/verticalRuleSeparated.less, line 4

4.7 #permalink Borders

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Only the following borders are currently implemented, see borders.less to add more if you need them (it's not hard).

Example
I'm in a thin green box
I'm in a medium gray box
I'm in a thick red box
I'm in a dotted orange box
Markup
<div class="grid-parent">
  <div class="box_verticalMargin2 grid-6 box_padded1 border_primary3">I'm in a thin green box</div>
  <div class="box_verticalMargin2 grid-6 box_padded1 border_medium border_default">I'm in a medium gray box</div>
  <div class="box_verticalMargin2 grid-6 box_padded1 border_thick border_secondary3">I'm in a thick red box</div>
  <div class="box_verticalMargin2 grid-6 box_padded1 border_dotted border_primary1">I'm in a dotted orange box</div>
</div>
Source: modules/04_small_decorations/border.less, line 3
Example







Markup
<div class="col_ggPrimary2 layout_rel">
  <div class="chevSkinnyPrev"></div>
  <br/><br/><br/><br/><br/><br/><br/>
  <div class="chevSkinnyNext"></div>
</div>
<div class="col_ggPrimary1">
  <div class="chevron"></div>
  <div class="chevron chevron_right"></div>
  <div class="chevron chevron_bottom"></div>
</div>
Source: modules/04_small_decorations/chevrons.less, line 3