initialize-css
Version:
Initialize.css is a complete and customizable collection of CSS best practices based on Normalize.css and HTML5 Boilerplate. Available in CSS and configurable SASS (SCSS) and LESS format.
110 lines (89 loc) • 5.24 kB
HTML
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Initialize.css - A complete and customizable collection of CSS best practices</title>
<meta name="description" content="Initialize.css is a complete and customizable collection of CSS best practices based on Normalize.css and HTML5 Boilerplate. Available in CSS and configurable SASS (SCSS) format">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/demo.css">
</head>
<body>
<!--[if lt IE 10]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and your life.</p>
<![endif]-->
<header class="header">
<section class="header-wrapper">
<div class="header-content">
<h1>Initialize.css</h1>
<h2>Initialize.css is a complete and customizable collection of CSS best practices based on Normalize.css and HTML5 Boilerplate. Available in CSS and configurable SASS (SCSS) and LESS format.</h2>
</div>
<div class="header-buttons">
<a href="https://github.com/jeroenoomsNL/initialize-css/archive/master.zip" class="header-button"><i class="fa fa-download"></i> Download</a>
<a href="https://github.com/jeroenoomsNL/initialize-css" class="header-button" target="_blank"><i class="fa fa-github"></i> Fork on Github</a>
</div>
</section>
</header>
<main class="main">
<p class="intro">Initialize.css is a complete collection of CSS best practices based on <a href="http://github.com/necolas/normalize.css">Normalize.css</a> and <a href="https://github.com/h5bp/html5-boilerplate">HTML5 Boilerplate</a>. It's customizable with predefined and optional properties. Configuring Initialize.css reduces the amount of CSS selectors you need for initializing your project.</p>
<h2>Install</h2>
<p>
<strong>npm</strong>
</p>
<pre>npm install initialize-css</pre>
<p>
<strong>bower</strong>
</p>
<pre>bower install initialize-css</pre>
<h2>Usage</h2>
<p>
<strong>sass / scss (from node_modules or bower_components)</strong>
</p>
<pre>@import: "module_folder_name/initialize-css/dist/initialize";</pre>
<p>
<strong>sass with browserify</strong>
</p>
<pre>@import: "initialize";</pre>
<p>
<strong>or just copy the generated css files (with vendor prefixes)</strong>
</p>
<pre><link rel="stylesheet" href="styles/initialize.min.css"></pre>
<h2>Configure</h2>
<p>Overwrite default values for generic typography:</p>
<pre>
$initialize-box-sizing: border-box;
$initialize-font-family: sans-serif;
$initialize-font-size: 1em;
$initialize-line-height: 1.4;
</pre>
<p>Microsoft <a href="https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support" target="_blank">dropped support</a> for IE8, IE9 & IE10. If you still have to support these old dinosaur browsers, just set <em>dinosaur mode</em> to true.</p>
<pre>
$initialize-dinosaur-mode: true;
</pre>
<p>Optional values:</p>
<pre>
$initialize-color: #000;
$initialize-block-margins: 0 0 0.75em;
$initialize-heading-color: #000;
$initialize-heading-font-family: sans-serif;
$initialize-heading-margins: 1em 0 0.75em;
$initialize-print-styles: true;
</pre>
</main>
<footer class="footer">
<section class="footer-wrapper">
This page is based on <a href="https://github.com/jeroenoomsNL/github-project-starter" title="Github Project Starter by Jeroen Ooms">Github Project Starter</a> by <a href="http://jeroenooms.nl" title="Website Jeroen Ooms">Jeroen Ooms</a> <a href="https://github.com/jeroenoomsNL" title="Github account Jeroen Ooms"><i class="fa fa-github"></i></a> <a href="http://twitter.com/jeroenooms" title="Twitter account Jeroen Ooms"><i class="fa fa-twitter"></i></a>
</section>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60080969-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>