maddesigns

/**
 * @author ebidel@ (Eric Bidelman)
 * License Apache-2.0
 *
 * Shows how to use Puppeeteer's code coverage API to measure CSS/JS coverage across 
 * different points of time during loading. Great for determining if a lazy loading strategy
 * is paying off or working correctly.
 *
 * Install: 
 *   npm i puppeteer chalk cli-table

maddesigns

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>

maddesigns

* {
  -webkit-border-radius: 0              !important;
  -moz-border-radius:    0              !important;
  border-radius:         0              !important;
                                        
  -webkit-box-shadow: 0                 !important;
  -moz-box-shadow:    0                 !important;
  box-shadow:         0                 !important;
                                       
  -webkit-transition: none              !important;

maddesigns

## FILL ##
fill	            Sets fill color of the shape.
fill-opacity	    Sets fill opacity of the shape.
fill-rule	    Sets fill rule of the shape.
  
  ** example **
  fill: #ccc;
  fill: rgba(0,0,0,.5);
  fill: red;

maddesigns

$base-font-size: 	16px;
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {

maddesigns

// ----
// Sass (v3.2.13)
// Compass (v0.12.2)
// ----

$test: #FFF1E0;

.test {
  background-color: $test;
  color: #{$test};

maddesigns

<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed id deserunt fugiat veniam laboriosam perspiciatis perferendis dolores consequatur numquam dicta veritatis maxime nobis eligendi harum illum inventore voluptatibus eaque sunt!</p>
<p>Ea minima nesciunt eaque quaerat laudantium sed accusamus. Tenetur laborum sapiente enim dolor modi ullam pariatur hic quidem saepe at facere nobis. Itaque obcaecati quod cum at minus adipisci ut.</p>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae alias tempore autem reprehenderit amet impedit quia fugiat. Cupiditate ipsam sed quaerat assumenda fugit nihil architecto tenetur quia! Nobis vitae.</p>
<p>Sit animi beatae nemo porro iusto et tempore incidunt autem officiis debitis distinctio atque veniam voluptas maxime illo dolores aut minima ratione culpa nam at sapiente dignissimos omnis quae molestias.</p>

maddesigns

%div

maddesigns

#page
  #foo.container
    .subcontainer
      .column Foo
      .column Foo
      .column Foo
      .column Foo
    .subcontainer
      .column Bar
      .column Bar

maddesigns

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// Transform a value into rem
// Assuming baseline is set to 10px on :root/html
@function rem($value, $baseline: 10px) {
    @if type-of($value) == list {
        $result: ();