alienlebarge/README.md

## README.md

      
    Raw
  

              README.md
            
          
    bl.ocks.org test

This is a basic rendering test with CSS.
I've tried to render a basic HTML page with some sass styling.
Since there is no online sass to css converter or JavaScript (like LESS), I have to convert your sass manually and then add the css file in your gist.

bl.ocks.org
Gist

Some ideas


A Grunt task can do the trick but it means you have to checkout the gist locally.
Go with codepen.io and the export gist feature.


## index.html
<html>
  <head>
    <link href="./style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <section class="flex">
      <div class="flex__item 1/3 font-alegreya">
        <h1>Alegreya</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum minus eos consequatur sed neque repellendus iste magnam suscipit illo deserunt fugiat <strong>perspiciatis</strong>? Rem maxime accusamus <em>quae molestiae iusto natus soluta officiis sapiente</em>.</p>
        <hr>
        <h2>Characters</h2><p>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>1234567890</p>
        <hr>
        <h2>Headings</h2>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
      </div>
      <div class="flex__item 1/3 font-gilda">
        <h1>Gilda Display</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum minus eos consequatur sed neque repellendus iste magnam suscipit illo deserunt fugiat <strong>perspiciatis</strong>? Rem maxime accusamus <em>quae molestiae iusto natus soluta officiis sapiente</em>.</p>
        <hr>
        <h2>Characters</h2><p>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>1234567890</p>
        <hr>
        <h2>Headings</h2>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
      </div>
      <div class="flex__item 1/3 font-droid">
        <h1>Droid Serif</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum minus eos consequatur sed neque repellendus iste magnam suscipit illo deserunt fugiat <strong>perspiciatis</strong>? Rem maxime accusamus <em>quae molestiae iusto natus soluta officiis sapiente</em>.</p>
        <hr>
        <h2>Characters</h2><p>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>1234567890</p>
        <hr>
        <h2>Headings</h2>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
      </div>
     </section>
  </body>
</html>

## style.css
@import url(http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,900italic,400,700,900);
@import url(http://fonts.googleapis.com/css?family=Gilda+Display);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);
html {
  background: #333;
  color: #eee;
  font-size: 20px;
}

section > div {
  padding: 1rem;
}

.font-alegreya {
  font-family: 'Alegreya', serif;
}
.font-alegreya h1, .font-alegreya h2, .font-alegreya h3, .font-alegreya h4, .font-alegreya h5, .font-alegreya h6 {
  font-weight: 400;
}

.font-gilda {
  font-family: 'Gilda Display', serif;
}

.font-droid {
  font-family: 'Droid Serif', serif;
}

.flex {
  display: flex;
  flex-direction: row;
}

.flex__item {
  flex: 1;
}

[class~="1/2"] {
  width: 50%;
}

[class~="1/3"] {
  width: 33.333333%;
}

## style.sass
// UI
html {
  background: #333;
  color: #eee;
  font-size: 20px;
}

section > div {
  padding: 1rem;
}


// Fonts
@import url(http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,900italic,400,700,900);

.font-alegreya {
  font-family: 'Alegreya', serif;
  h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
  }
}

@import url(http://fonts.googleapis.com/css?family=Gilda+Display);

.font-gilda {
  font-family: 'Gilda Display', serif;
}

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);

.font-droid {
  font-family: 'Droid Serif', serif;
}


// Grid system
.flex {
  display: flex;
  flex-direction: row;
}

.flex__item {
  flex: 1;
}


// Width
[class~="1/2"] {
  width: 50%;
}

[class~="1/3"] {
  width: 33.333333%;
}
	<html>
	<head>
	<link href="./style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<section class="flex">
	<div class="flex__item 1/3 font-alegreya">
	<h1>Alegreya</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum minus eos consequatur sed neque repellendus iste magnam suscipit illo deserunt fugiat <strong>perspiciatis</strong>? Rem maxime accusamus <em>quae molestiae iusto natus soluta officiis sapiente</em>.</p>
	<hr>
	<h2>Characters</h2><p>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>1234567890</p>
	<hr>
	<h2>Headings</h2>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	</div>
	<div class="flex__item 1/3 font-gilda">
	<h1>Gilda Display</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum minus eos consequatur sed neque repellendus iste magnam suscipit illo deserunt fugiat <strong>perspiciatis</strong>? Rem maxime accusamus <em>quae molestiae iusto natus soluta officiis sapiente</em>.</p>
	<hr>
	<h2>Characters</h2><p>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>1234567890</p>
	<hr>
	<h2>Headings</h2>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	</div>
	<div class="flex__item 1/3 font-droid">
	<h1>Droid Serif</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum minus eos consequatur sed neque repellendus iste magnam suscipit illo deserunt fugiat <strong>perspiciatis</strong>? Rem maxime accusamus <em>quae molestiae iusto natus soluta officiis sapiente</em>.</p>
	<hr>
	<h2>Characters</h2><p>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>abcdefghijklmnopqrstuvwxyz<br>1234567890</p>
	<hr>
	<h2>Headings</h2>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
	<h4>Heading 4</h4>
	<h5>Heading 5</h5>
	<h6>Heading 6</h6>
	</div>
	</section>
	</body>
	</html>
	@import url(http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,900italic,400,700,900);
	@import url(http://fonts.googleapis.com/css?family=Gilda+Display);
	@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);
	html {
	background: #333;
	color: #eee;
	font-size: 20px;
	}

	section > div {
	padding: 1rem;
	}

	.font-alegreya {
	font-family: 'Alegreya', serif;
	}
	.font-alegreya h1, .font-alegreya h2, .font-alegreya h3, .font-alegreya h4, .font-alegreya h5, .font-alegreya h6 {
	font-weight: 400;
	}

	.font-gilda {
	font-family: 'Gilda Display', serif;
	}

	.font-droid {
	font-family: 'Droid Serif', serif;
	}

	.flex {
	display: flex;
	flex-direction: row;
	}

	.flex__item {
	flex: 1;
	}

	[class~="1/2"] {
	width: 50%;
	}

	[class~="1/3"] {
	width: 33.333333%;
	}
	// UI
	html {
	background: #333;
	color: #eee;
	font-size: 20px;
	}

	section > div {
	padding: 1rem;
	}






	// Fonts
	@import url(http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,900italic,400,700,900);

	.font-alegreya {
	font-family: 'Alegreya', serif;
	h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	}
	}

	@import url(http://fonts.googleapis.com/css?family=Gilda+Display);

	.font-gilda {
	font-family: 'Gilda Display', serif;
	}

	@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);

	.font-droid {
	font-family: 'Droid Serif', serif;
	}



	// Grid system
	.flex {
	display: flex;
	flex-direction: row;
	}

	.flex__item {
	flex: 1;
	}






	// Width
	[class~="1/2"] {
	width: 50%;
	}

	[class~="1/3"] {
	width: 33.333333%;
	}