sash-layout v1.2.13

sash-layout

Provide css reset and layout with a focus on browser compatibility

Installation:

$ npm install --save sash-layout

centre vertically:

<div> <!-- this needs to be position: relative -->
  <div class="centre-v"></div>
</div>

centre horizontally and vertically:

<div> <!-- this needs to be position: relative -->
  <div class="centre"></div>
</div>

.col-II (two columns in a row):

<div class="floatin"> <!-- be sure to place them inside a floatin classed element -->
  <div class="col-II"></div>
  <div class="col-II"></div>
</div>

.col-IV (four columns in a row):

<div class="floatin"> <!-- be sure to place them inside a floatin classed element -->
  <div class="col-IV"></div>
  <div class="col-IV"></div>
  <div class="col-IV"></div>
  <div class="col-IV"></div>
</div>

.ellipsis:

Get word ellipsis

<ul>
  <li class="ellipsis"></li><!-- be sure to give the element a max-width -->
</ul>

.cool-input:

Place the input-like element, within a .cool-input class to get it with a box-shadow, without border and 100% width of its parent. You can later style its color, padding and font-size according to your project and edit .cool-input padding to space your elements

<!-- eg. 1 -->
<div class="cool-input">
  <input type="text" placeholder="foo" />
</div>

<!-- eg. 2 -->
<label class="cool-input">
  foo
  <input type="text" />
</label>

<!-- eg. 3 -->
<div class="cool-input">
  <button>submit</button>
</div>

.rank:

Add preset rank banges

<a class="rank" href="#"></a>
<!-- it comes without background, it is up to you to set it up -->

.code:

Add a monospace formatted area for code rendering

<div class="code">
  <pre class="line">$npm&nbsp;install&nbsp;-g&nbsp;create-ractive-app</pre>
  <pre class="line">$&nbsp;create-ractive-app&nbsp;project&nbsp;-d</pre>
</div>
<!-- the class line, representing a line of code must be on a <pre> element -->

word-wrap:

The layout wants long words represent descriptive text to be broken, in order to avoid unwanted horizontal scrolling when resizing. To get this, ensure you are wrapping text between one of the following html tags:

h1, h2, h3, h4, h5, h6, p, a, li, td, th, i, b, big, small, em, strong, dfn, cite, abbr, sub, sup, span, bdo, address, q, ins, del, dt, dd, label, option, textarea, legend, button, caption