mistergraphx

/* ===== == = === 20em (320px) === = == ===== */

@media only screen and (min-width : 20em) {

}


/* ===== == = === 30em (480px) === = == ===== */

@media only screen and (min-width : 30em) {

mistergraphx

<main class="debug">
  <h1>Summary</h1>
  <div class="block">
      <h2>Bloc 1</h2>
  </div>
  
  
</main>

mistergraphx

 <main container>
    <div row>
      <p column>Full-width is default</p>
      <p column="2 +3">2 +3</p>
    </div>
  
    <div row>
      
      <section column>
        <p>8</p>

mistergraphx

<h1 column="2">Columns + value</h1>
<h1 column>Columns only</h1>
<p column="2 +1">Columns +Offsett</p>
<p column="2 -1">Columns -Offsett</p>
<p column="2 of 4">Columns OF Context</p>
<p column="2/4">Columns / Context</p>
<p column="2 of 4 +1">Columns OF Context +Offsett</p>
<p column="2/4 +1">Columns / Context +Offsett</p>
<p column="2 of 4 -1">Columns OF Context -Offsett</p>
<p column="2/4 -1">Columns / Context -Offsett</p>

mistergraphx

// ----
// libsass (v3.3.2)
// ----

@import "bourbon/bourbon";

$webfonts: (
  icon:'fonts/icons/font/',
  open-sans:'font/opensans/font/'
);

mistergraphx

// Brightness math based on:
//   http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx

$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;

@function brightness($color) {
  // Extract color components

mistergraphx

// ----
// libsass (v3.3.2)
// ----

@import "bourbon/bourbon";

$webfonts: (
  icon:'fonts/icons/font/',
  open-sans:'font/opensans/font/'
);

mistergraphx

<div class="container">
  <div class="col-2">
    <h3>Titre</h3>
  </div>
</div> 

mistergraphx

<div class="container">
  <div class="col-2">
    <h3>Titre</h3>
  </div>
</div> 

mistergraphx

<div class="container">
  <h1>Page heading</h1>
  <div class="testing">
    <h2>Testing block</h2>
  </div>
  <div class="testing2">
    <h2>Testing block</h2>
  </div>
</div>