scaffold.css

All in one normalize CSS with enhancements and helpers

3
0
CSS

Scaffold.css

Build Status
License: MIT

All in one normalize CSS with enhancements and helpers to scaffold mordern websites.

Including

  • Nomalizing
  • Useful enhancements
  • Common helpers

Installation

NPM

npm install --save scaffold.css

Import in Javascript (Recommended)

import 'scaffold.css';

Import in Sass

@import 'path/to/node_modules/scaffold.css/scaffold.css';

Or

<link rel="stylesheet" href="https://raw.githubusercontent.com/77Vincent/scaffold.css/master/scaffold.css">

Enhancemens

html,
body {                      
  margin: 0;
  padding: 0;
}
 
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-style: normal;
}
 
ol,
ul {
  margin: 0;
  padding: 0;
}

*,
*::after,
*::before {
  vertical-align: baseline;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
 
:hover,
:active,                                                                                                                                                      
:focus {
  outline-width: 0;
}
 
a { color: inherit; }
 
button {
  background-color: transparent;
  border: none;
}
 
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Helpers

12-column grids class

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
...
.col-12 { width: 100%; }

Clearing float

.clearfix {
    content: "";
    display: block;
    clear: both;
}

Alignment

.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

Normalizing

Mostly fork from necolas/normalize.css

Browser support

Internet Explorer 8+