14 :
Experimental

Features that are in development or have not been fully vetted yet.


14.1 :
Utility Classes

In general, Enterprise will shy away from utility classes, but several are included here for common patterns and needs.

14.1.1 :
Backgrounds

Application of backgrounds to certain elements may affect spacing or child element color. As such, it's being housed here.

14.1.2 :
Inline Titles

For titles or headings where direct child elements would ideally appear inline instead of as block elements. Can be used in cases where children are different types of elements (headings, spans, etc).

Main Title

Followed by a subtitle

Order #: 393826749
 <header class="has-inline-titles">
   <h1>Main Title</h1>
   <h2 class="title-3">Followed by a subtitle</h2>
   <span>Order #: 393826749</span>
 </header>

14.2 :
LESS Mixins

LESS parenthetical mixins provided to aid in common utilities.

14.2.1 :
Pointer Builder

A mixin to create even, consistant pointers for tooltips and other elements as needed.

14.2.2 :
Clearfix

Clear floats by adding .clearfix to the parent element. Based on Nicolas Gallagher's micro clearfix hack.

14.2.3 :
Appearance-none

Additional CSS for hiding elements as needed. Currently in place for select elements.

14.2.4 :
Box-sizing (@sizing: border-box)

A mixin to create even, consistant pointers for tooltips and other elements as needed.


14.3 :
Containers

The area most in flux in Enterprise. Elements requiring shimming have been marked and should be used with caution.

14.3.1 :
Main-Level Container Elements*

Currently wrapped in an .enterprise class to insulate legacy code, at some point all top level block elements will have a max-width set to 1300px to allow for situational full-bleed effects to be called. An element in this context can be made fullbleed with the .fullbleed class.

This will function in a similar way to the shcContent id in ASAP/WCS.

Consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 <div class="enterprise">
   <div>
     <h1>Consectetur adipisicing elit</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>
 </div>

14.3.2 :
Sidebar and Has-Sidebar

The base sidebar element is the width of a card at a given breakpoint, and will not wrap. It needs to be the direct child of the .has-sidebar context class.

Sidebar placement is dictated simply by element order.

Sidebar Sibling Element

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius accusamus reiciendis ab, iusto soluta fugiat excepturi minus dignissimos sint qui voluptas, unde quod.

Molestias cumque quibusdam quidem?

 <div class="has-sidebar">
   <div>
     <h2>Sidebar Sibling Element</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
     Eius accusamus reiciendis ab, iusto soluta fugiat excepturi
     minus dignissimos sint qui voluptas, unde quod.</p>
     <p>Molestias cumque quibusdam quidem?</p>
   </div>
   <div class="sidebar has-background-secondary">
     <h3>Sidebar</h3>
     <ul class="list-disc">
       <li>List Item 1</li>
       <li>List Item 2</li>
       <li>List Item 3</li>
     </ul>
   </div>
 </div>

14.3.3 :
Flexbox Elements

The following elements/styles need shimming in place in order to be used in production. This includes having Modernizr available.

Compatible with IE11+, Firefox 28+, Chrome 21+, Safari 6.1+.

14.3.3.1 :
Cards and Has-Cards

For the .card and .has-cards classes, as with all .has-X classes, the context class needs to be the direct parent of the element class. That is, the .has-cards class should only have .card elements in its first level.

Example of card shim in action.

Card 1

Lorem ipsum dolor sit amet.

Card 2

Lorem ipsum dolor sit amet.

Card 3

Lorem ipsum dolor sit amet.

Card 4

Lorem ipsum dolor sit amet.

Card 5

Lorem ipsum dolor sit amet.

<div class="has-cards">
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 1</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 2</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 3</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 4</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <img class="main-image" src="http://placehold.it/300x300" />
    <h3>Card 5</h3>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

14.3.4 :
Additional Grouping

14.3.4.1 :
Vertical Columns

Evenly split 100% height columns that do not wrap.