library-mirrors/normalize.css
1
0
Fork 0
mirror of https://github.com/necolas/normalize.css.git synced 2024-12-25 15:14:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Project page: update copy and realign

Browse Source
This commit is contained in:
Nicolas Gallagher 2012-01-22 22:42:18 +00:00
parent f501de724d
commit bfcd8bdd0f
2 changed files with 107 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width">
<title>Normalize.css: Make browsers render all elements more consistently.</title> <title>Normalize.css: Make browsers render all elements more consistently.</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
@ -15,58 +15,61 @@
<div id="container"> <div id="container">
<h1><a href="http://github.com/necolas/normalize.css">normalize.css</a></h1> <h1><a href="http://github.com/necolas/normalize.css">normalize.css</a></h1>
<p>Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.</p> <p>Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.</p>
<h2>What does it do?</h2> <h2>What does it do?</h2>
<ul> <ul>
<li><strong>Preserves useful defaults</strong>, unlike many CSS resets.</li> <li><strong>Preserves useful defaults</strong>, unlike many CSS resets.</li>
<li><strong>Normalizes styles</strong> for a wide range of elements.</li> <li><strong>Normalizes styles</strong> for a wide range of elements (including HTML5).</li>
<li><strong>Corrects bugs</strong> and common browser inconsistencies.</li> <li><strong>Corrects bugs</strong> and common browser inconsistencies.</li>
<li><strong>Improves usability</strong> with subtle improvements.</li> <li><strong>Improves usability</strong> with subtle improvements.</li>
<li><strong>Explains what code does</strong> using detailed comments.</li> <li><strong>Explains what code does</strong> using detailed comments.</li>
</ul> </ul>
<div class="demo"> <div class="demo">
<a class="button" href="demo.html">Check out the demo</a> <a class="button" href="demo.html">Check out the demo</a>
<p><a href="https://github.com/necolas/normalize.css/raw/master/normalize.css">Get the normalize.css file</a></p> <p><a href="https://github.com/necolas/normalize.css/raw/master/normalize.css">Get the normalize.css file</a></p>
</div> </div>
<h2>How to use it</h2> <div class="share-bar">
<p>You are encouraged to read, edit, customise, add, and trim rulesets or styles from normalize.css on a per project basis.</p> <div class="share-opt">
<p>The normalize.css file is not intended to be a mysterious "black box" that is included in a project and then ignored. It should be used as a customisable starting point on any project.</p> <a class="twitter-share-button"
href="http://twitter.com/share"
data-count="vertical"
data-text="Checking out normalize.css"
data-via="necolas"
data-related="jon_neal">Tweet</a>
</div>
<div class="share-opt">
<div class="g-plusone" data-size="tall"></div>
</div>
<div class="share-opt">
<div class="fb-like" data-send="false" data-width="40" data-layout="box_count" data-show-faces="false"></div>
</div>
</div>
<h2>Browser support</h2> <h2>Browser support</h2>
<p>Chrome, Firefox 3+, Safari 4+, Opera 10+, Internet Explorer 6+</p> <p>Chrome, Firefox 3+, Safari 4+, Opera 10+, Internet Explorer 6+</p>
<h2>How do I use it?</h2>
<p>Normalize.css is intended to be used as an alternative to CSS resets. It's suggested that you read the <code>normalize.css</code> file and consider customising it to meet your needs.</p>
<h2>Who uses it?</h2>
<ul>
<li><a href="http://html5boilerplate.com/">HTML5 Boilerplate</a></li>
<li><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></li>
<li><a href="http://css-tricks.com/">CSS Tricks</a></li>
</ul>
<h2>Source code</h2> <h2>Source code</h2>
<p>Available on GitHub: <a href="http://github.com/necolas/normalize.css">necolas/normalize.css</a></p> <p>Available on GitHub: <a href="http://github.com/necolas/normalize.css">necolas/normalize.css</a></p>
<p>Download it in either <a href="http://github.com/necolas/normalize.css/zipball/master">zip</a> or <a href="http://github.com/necolas/normalize.css/tarball/master">tar</a> formats.</p>
<p>Clone the project with <a href="http://git-scm.com">Git</a> by running:</p>
<pre>$ git clone git://github.com/necolas/normalize.css.git</pre> <pre>$ git clone git://github.com/necolas/normalize.css.git</pre>
<h2>Acknowledgements</h2> <h2>Acknowledgements</h2>
<p>Normalize.css is a project by Nicolas Gallagher and Jonathan Neal.</p> <p>Normalize.css is a project by Nicolas Gallagher and Jonathan Neal. Detailed information on default UA styles: <a href="http://iecss.com">Internet Explorer User Agent Style Sheets</a> and <a href="http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm">CSS2.1 User Agent Style Sheet Defaults</a></p>
<p>Detailed information on default UA styles: <a href="http://iecss.com">Internet Explorer User Agent Style Sheets</a> and <a href="http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm">CSS2.1 User Agent Style Sheet Defaults</a></p>
<div class="share-bar">
<div class="share-opt">
<a class="twitter-share-button"
href="http://twitter.com/share"
data-count="vertical"
data-text="Checking out normalize.css"
data-via="necolas"
data-related="jon_neal">Tweet</a>
</div>
<div class="share-opt">
<g:plusone size="tall"></g:plusone>
</div>
<div class="share-opt">
<fb:like href="" send="false" layout="box_count" width="40" show_faces="false" font=""></fb:like>
</div>
</div>
<div class="footer"> <div class="footer">
<p>A project by <a href="http://nicolasgallagher.com">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a>.</p> <p>A project by <a href="http://nicolasgallagher.com">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a>.</p>
@ -76,15 +79,30 @@
<div id="fb-root"></div> <div id="fb-root"></div>
<script> <script>
(function(w,d){ window._gaq=[['_setAccount','UA-7489188-1'],['_trackPageview']];
w._gaq=[['_setAccount','UA-7489188-1'],['_trackPageview'],['_trackPageLoadTime']]; (function(doc, script) {
var u=[ var js,
'//connect.facebook.net/en_US/all.js#xfbml=1', // Facebook SDK fjs = doc.getElementsByTagName(script)[0],
'//platform.twitter.com/widgets.js', // Twitter Widgets frag = doc.createDocumentFragment(),
'https://apis.google.com/js/plusone.js', // Google +1 Button add = function(url, id) {
('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js' // Google Analytics if (doc.getElementById(id)) {return;}
],i=u.length,n='script',f=d.createDocumentFragment(),e=d.createElement(n),t;while(i--){t=e.cloneNode(false);t.async=t.src=u[i];f.appendChild(t);}(t=d.getElementsByTagName(n)[0]).parentNode.insertBefore(f,t); js = doc.createElement(script);
}(this,document)); js.src = url;
id && (js.id = id);
frag.appendChild(js);
};
// Google Analytics
add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
// Google+ button
add('https://apis.google.com/js/plusone.js');
// Twitter SDK
add('//platform.twitter.com/widgets.js', 'twitter-wjs');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));
</script> </script>
</body> </body>

93
style.css
View File

@ -1,7 +1,5 @@
html { html {
font-size: 100%; font-size: 100%;
overflow-y: scroll;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} }
@ -20,10 +18,10 @@ img {
border: 0; border: 0;
} }
a { a {
font-weight:bold; font-weight:bold;
text-decoration: none; text-decoration: none;
color: #6EAD1A; color: #6ead1a;
} }
a:focus { a:focus {
@ -35,23 +33,28 @@ a:active {
outline: 0; outline: 0;
} }
a:hover, a:hover,
a:focus, a:focus,
a:active { a:active {
text-decoration: underline; text-decoration: underline;
color: #569107; color: #569107;
} }
strong { strong {
font-weight: bold; font-weight: bold;
} }
code,
pre { pre {
display: block;
padding: 5px;
margin: 1em 0;
font-family: consolas, monospace; font-family: consolas, monospace;
font-size: 1em; font-size: 1em;
}
pre {
display: block;
padding: 5px;
margin: 1em 0;
font-size: 13px;
color: #fff; color: #fff;
background: #222; background: #222;
white-space: pre; white-space: pre;
@ -62,21 +65,21 @@ pre {
ul { ul {
list-style: square; list-style: square;
padding: 0; padding: 0;
margin: 1.4em 0; margin: 0 0 1.4em;
} }
li { li {
margin: 0.35em 0; margin: 0.35em 0;
} }
h1 { h1 {
margin: 0.25em 0 0.5em; margin: 0.25em 0 0.5em;
font-size: 3.5em; font-size: 3.5em;
} }
h2 { h2 {
margin: 1.25em 0 0.75em; margin: 1.25em 0 0.5em;
font-size: 1.5em; font-size: 1.5em;
} }
p { p {
@ -101,31 +104,31 @@ p {
} }
.button { .button {
display: inline-block; display: inline-block;
padding: 6px 15px; padding: 6px 15px;
border: 1px solid #487310; border: 1px solid #487310;
margin: 20px 0 0; margin: 20px 0 0;
font-size: 1.375em; font-size: 1.375em;
line-height: 1.273; line-height: 1.273;
color: #fff; color: #fff;
background: #6EAD1A; background: #6ead1a;
text-shadow:0 1px 1px rgba(0,0,0,0.4); text-shadow: 0 1px 1px rgba(0,0,0,0.4);
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4), -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4),
inset 0 1px rgba(255,255,255,0.5), inset 0 1px rgba(255,255,255,0.5),
inset 0 12px rgba(255,255,255,0.2), inset 0 12px rgba(255,255,255,0.2),
inset 0 10px 20px rgba(255,255,255,0.25), inset 0 10px 20px rgba(255,255,255,0.25),
inset 0 -12px 25px rgba(0,0,0,0.3); inset 0 -12px 25px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4), -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4),
inset 0 1px rgba(255,255,255,0.5), inset 0 1px rgba(255,255,255,0.5),
inset 0 12px rgba(255,255,255,0.2), inset 0 12px rgba(255,255,255,0.2),
inset 0 10px 20px rgba(255,255,255,0.25), inset 0 10px 20px rgba(255,255,255,0.25),
inset 0 -12px 25px rgba(0,0,0,0.3); inset 0 -12px 25px rgba(0,0,0,0.3);
box-shadow: 0 1px 3px rgba(0,0,0,0.4), box-shadow: 0 1px 3px rgba(0,0,0,0.4),
inset 0 1px rgba(255,255,255,0.5), inset 0 1px rgba(255,255,255,0.5),
inset 0 12px rgba(255,255,255,0.2), inset 0 12px rgba(255,255,255,0.2),
inset 0 10px 10px rgba(255,255,255,0.25), inset 0 10px 10px rgba(255,255,255,0.25),
inset 0 -12px 25px rgba(0,0,0,0.3); inset 0 -12px 25px rgba(0,0,0,0.3);
-webkit-transition: all 0.15s; -webkit-transition: all 0.15s;
-moz-transition: all 0.15s; -moz-transition: all 0.15s;
@ -136,14 +139,16 @@ p {
.button:hover, .button:hover,
.button:focus, .button:focus,
.button:active { .button:active {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
background: #569107; background: #569107;
} }
.share-bar { .share-bar {
overflow: hidden; overflow: hidden;
margin: 40px 0 0; padding: 0 0 30px;
border-bottom: 2px solid #ccc;
margin: 30px 0 0;
*zoom: 1; *zoom: 1;
} }
@ -164,11 +169,11 @@ p {
body { body {
font-size: 0.875em; font-size: 0.875em;
} }
h1 { h1 {
font-size: 3em; font-size: 3em;
} }
.fork { .fork {
display: none; display: none;
} }