chi-feng/style-example.md

## style-example.md

      
    Raw
  

              style-example.md
            
          
    Original CSS

body {
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.4;
}

.header {
	color: red;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 0 5px yellow;
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px 0; 
}

p {
	margin-bottom: 1rem;
	line-height: 1.2;
}

.content {
	font-size: 85%;
}
Original HTML

<body>
<div class="header">Hello World</div>
<div class="header">Hello World Again</div>
<p class="content">Lorem ipsum</p>
</body>
Output CSS:

/* CSS reset (e.g. normalize.css) */
* { /* ... */ }

/* base typography style */
.kg-t {
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	text-decoration: none;
	line-height: 1.4;
	text-align: left;
	/* etc. */
}

/* base layout style */
.kg-l {
	position: relative;
	padding: 0;
	margin: 0;
}

.kg-t-000 { 
	color: red;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 0 5px yellow;
}

.kg-l-000 { 
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	/* padding-left and padding-right are same as base style */ 	
}

.kg-t-001 {
	line-height: 1.2;
	font-size: 85%;
}

.kg-l-001 {
	margin-bottom: 1rem;
}
Output HTML

<body class="kg-t kg-l">
<div class="kg-t kg-t-000 kg-l kg-l-000">Hello World</div>
<div class="kg-t kg-t-000 kg-l kg-l-000">Hello World Again</div>
<p class="kg-t kg-t-001 kg-l kg-l-001">Lorem ipsum</p>
</body>
Stretch goals


Minimal representation, i.e., fewest number of classes.
Normalize size measurement unit (use px or rem everywhere).