naganowl/index.html

## index.html
<html>
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.4.2/pure-min.css">
  </head>

  <body>
    <div class="pure-g-r">
      <div class="pure-u-1">
        <div class="l-box">
          <h2>Foo</h2>
          <div class="content l-box">
            <p>Mumbo jumbo stuff</p>
          </div>
        </div>
      </div>
      <div class="pure-u-1">
        <div class="l-box">
          <button class="pure-button">Stuff</button>
          <button class="pure-button">More Stuff</button>
        </div>
      </div>
    </div>
  </body>

</html>

## layout.css
.l-box {
  padding: 1em;
}

.content {
  background-color: gray;
}

## pureCSS.md

      
    Raw
  

              pureCSS.md
            
          
    Figured the best way to get a basic idea of it was to play around with it. I created a super simple layout (The layout.css below can be inlined or manually included).
Some thoughts I had

It really is bare bones and unopinionated, providing only basic styling for some DOM elements (Like forms, tables, etc.).

Think an extension of normalize.css which they mention themselves.


Spacing such as padding and margins are up to the user to decide
Typography is untouched as well.
Font icons aren't included, but there is Font Awesome support
Components (Such as the grid layout or tables) are broken up into individual files so they can be individually included.

Most components have a responsive and non-responsive form which can be individually targeted as well.


Their grids come in 5ths and 24ths, allowing for easy flexible design.
	<html>
	<head>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.4.2/pure-min.css">
	</head>

	<body>
	<div class="pure-g-r">
	<div class="pure-u-1">
	<div class="l-box">
	<h2>Foo</h2>
	<div class="content l-box">
	<p>Mumbo jumbo stuff</p>
	</div>
	</div>
	</div>
	<div class="pure-u-1">
	<div class="l-box">
	<button class="pure-button">Stuff</button>
	<button class="pure-button">More Stuff</button>
	</div>
	</div>
	</div>
	</body>

	</html>