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

Update the project page.

Browse Source 
Change font-family from Calibri to Helvetica Neue font stack.
Add a subheading to immediately explain the project.
Use cleaner button style. Emphasise viewing the project on GitHub
and downloading the file over viewing the demo.
Remove the footer and link to our websites/twitter in the credits.
This commit is contained in:
Nicolas Gallagher 2012-02-07 12:34:03 +00:00
parent 579ebabe4d
commit d6ebdb0dbe
2 changed files with 85 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@ -8,28 +8,32 @@
</head> </head>
<body> <body>
<a class="fork" href="http://github.com/necolas/normalize.css"> <a class="fork" href="https://github.com/necolas/normalize.css">
<img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"> <img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a> </a>
<div id="container"> <div id="container">
<h1><a href="http://github.com/necolas/normalize.css">normalize.css</a></h1> <div class="hgroup">
<h1><a href="https://github.com/necolas/normalize.css">normalize.css</a></h1>
<h2>A modern, HTML5-ready, alternative to CSS resets</h2>
</div>
<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 (including HTML5).</li> <li><strong>Normalizes styles</strong> for a wide range of HTML elements.</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="cta">
<a class="button" href="demo.html">Check out the demo</a> <a class="button button-main" href="https://github.com/necolas/normalize.css">View project on GitHub</a>
<p><a href="https://github.com/necolas/normalize.css/raw/master/normalize.css">Get the normalize.css file</a></p> <a class="button" href="https://github.com/necolas/normalize.css/raw/master/normalize.css">Download</a>
<p><a href="demo.html">Check out the demo</a></p>
</div> </div>
<div class="share-bar"> <div class="share-bar">
@ -51,11 +55,8 @@
</div> </div>
</div> </div>
<h2>Browser support</h2>
<p>Chrome, Firefox 3+, Safari 4+, Opera 10+, Internet Explorer 6+</p>
<h2>How do I use it?</h2> <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> <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. Alternatively, include the file in your project and override the defaults later in your CSS.</p>
<h2>Who uses it?</h2> <h2>Who uses it?</h2>
<ul> <ul>
@ -65,16 +66,16 @@
<li><a href="http://css-tricks.com/">CSS Tricks</a></li> <li><a href="http://css-tricks.com/">CSS Tricks</a></li>
</ul> </ul>
<h2>Browser support</h2>
<p>Chrome, Firefox 3+, Safari 4+, Opera 10+, Internet Explorer 6+</p>
<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="https://github.com/necolas/normalize.css">necolas/normalize.css</a></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. 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>Normalize.css is a project by <a href="http://nicolasgallagher.com">Nicolas Gallagher</a> (<a href="http://twitter.com/necolas">@necolas</a>) and <a href="http://music.thewikies.com/jonneal/">Jonathan Neal</a> (<a href="http://twitter.com/jon_neal">@jon_neal</a>).</p>
<p>Detailed information on default UA styles: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints">WHATWG suggestions for rendering HTML documents</a>, <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="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>
</div>
</div> </div>

106
style.css
View File

@ -6,9 +6,9 @@ html {
body { body {
max-width: 480px; max-width: 480px;
padding: 0 10px; padding: 0 10px 30px;
margin: 0 auto; margin: 0 auto;
font: 1em/1.4 Calibri, sans-serif; font: 1em/1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
color: #222; color: #222;
background: #fff; background: #fff;
_width: 480px; _width: 480px;
@ -72,6 +72,11 @@ li {
margin: 0.35em 0; margin: 0.35em 0;
} }
h1,
h2 {
line-height: 1.2;
}
h1 { h1 {
margin: 0.25em 0 0.5em; margin: 0.25em 0 0.5em;
font-size: 3.5em; font-size: 3.5em;
@ -94,54 +99,86 @@ p {
right: 0; right: 0;
} }
.demo { .hgroup h1 {
margin-bottom: 0;
}
.hgroup h2 {
margin: 0 0 2em;
font-size: 1em;
color: #555;
}
.cta {
margin:1em 0 4em; margin:1em 0 4em;
} }
.demo p { .cta p {
margin: 0.5em 0 0; margin: 0.5em 0 0;
font-style: italic; font-style: italic;
} }
.button { .button {
position: relative;
display: inline-block; display: inline-block;
padding: 6px 15px; padding: 0.4em 1em;
border: 1px solid #487310; border: 1px solid #487310;
margin: 20px 0 0; margin: 20px 5px 0 0;
font-size: 1.375em; font-size: 1.375em;
line-height: 1.273; line-height: 1.273;
color: #fff; font-weight: normal;
background: #6ead1a; text-align: center;
text-shadow: 0 1px 1px rgba(0,0,0,0.4); text-decoration: none;
-moz-border-radius: 5px; white-space: nowrap;
border-radius: 5px; border: 1px solid #d9d9d9;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4), border-radius: 2px;
inset 0 1px rgba(255,255,255,0.5), color: #555;
inset 0 12px rgba(255,255,255,0.2), background: #f5f5f5;
inset 0 10px 20px rgba(255,255,255,0.25), background-image: -webkit-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.1));
inset 0 -12px 25px rgba(0,0,0,0.3); background-image: -moz-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.1));
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4), background-image: -ms-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.1));
inset 0 1px rgba(255,255,255,0.5), background-image: -o-linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.1));
inset 0 12px rgba(255,255,255,0.2), /* IE6/7 inline-block hack */
inset 0 10px 20px rgba(255,255,255,0.25), *display: inline;
inset 0 -12px 25px rgba(0,0,0,0.3); *zoom: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.4),
inset 0 1px rgba(255,255,255,0.5),
inset 0 12px rgba(255,255,255,0.2),
inset 0 10px 10px rgba(255,255,255,0.25),
inset 0 -12px 25px rgba(0,0,0,0.3);
-webkit-transition: all 0.15s;
-moz-transition: all 0.15s;
-o-transition: all 0.15s;
transition: all 0.15s;
} }
.button:hover, .button:hover,
.button:focus, .button:focus,
.button:active { .button:active {
text-decoration: none; text-decoration: none;
border-color: #c6c6c6;
color: #333;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: #f8f8f8;
}
.button:focus {
border-color: #105cb6;
outline: 0;
}
.button:active {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
background-color: #eee;
}
.button-main {
border-color: #5e9612;
color: #fff; color: #fff;
background: #569107; background-color: #69a619;
}
.button-main:hover,
.button-main:focus,
.button-main:active {
border-color: #558713;
color: #fff;
background-color: #6ead1a;
}
.button-main:active {
background-color: #5D9117;
} }
.share-bar { .share-bar {
@ -158,13 +195,6 @@ p {
vertical-align: bottom; vertical-align: bottom;
} }
.footer {
padding: 10px 0;
border-top: 1px solid #ccc;
margin: 3em 0 0;
font-size: 0.8125em;
}
@media screen and (max-width:480px) { @media screen and (max-width:480px) {
body { body {
font-size: 0.875em; font-size: 0.875em;