Permalink
Browse files

Consistent line endings

  • Loading branch information...
1 parent c88719c commit af35e9ba1c1719ff48380db6834d77d42cbe7701 @anglepoised anglepoised committed Mar 13, 2012
Showing with 239 additions and 239 deletions.
  1. +191 −191 assets/styles/project.css
  2. +48 −48 index.html
View
382 assets/styles/project.css
@@ -13,29 +13,29 @@
* code dark red = #a31515
* code blue = #00f
*
- * index:
- * 1. fonts
- * 2. normalise html5
- * 3. default styles (based on boilerplate/normalise)
- * 4. helper classes (non-semantic)
- * 5. shared states
- * 6. style patterns
- * 7. layout patterns (non-semantic)
- * 8. @mediaqueries
+ * index:
+ * 1. fonts
+ * 2. normalise html5
+ * 3. default styles (based on boilerplate/normalise)
+ * 4. helper classes (non-semantic)
+ * 5. shared states
+ * 6. style patterns
+ * 7. layout patterns (non-semantic)
+ * 8. @mediaqueries
*/
-/* 1. fonts */
- /* headings (licence: http://www.fontsquirrel.com/license/PT-Sans) */
- @font-face {
- font-family: "PTSansRegular";
- src: url("../fonts/PTS55F-webfont.eot");
- src: url("../fonts/PTS55F-webfont.eot?#iefix") format("embedded-opentype"),
- url("../fonts/PTS55F-webfont.woff") format("woff"),
- url("../fonts/PTS55F-webfont.ttf") format("truetype");
- font-weight: normal;
- font-style: normal;
- }
-
+/* 1. fonts */
+ /* headings (licence: http://www.fontsquirrel.com/license/PT-Sans) */
+ @font-face {
+ font-family: "PTSansRegular";
+ src: url("../fonts/PTS55F-webfont.eot");
+ src: url("../fonts/PTS55F-webfont.eot?#iefix") format("embedded-opentype"),
+ url("../fonts/PTS55F-webfont.woff") format("woff"),
+ url("../fonts/PTS55F-webfont.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
+ }
+
/* 2. normalise html5 */
/* corrects block display not defined in IE6/7/8/9 & FF3 */
article,
@@ -55,64 +55,64 @@
html {
font-size: 100%;
overflow-y: scroll;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
}
-
+
body {
- color: #4c4c4c;
+ color: #4c4c4c;
background: #fff;
font-family: Helmet, Freesans, sans-serif;
line-height: 1.5;
margin: 0;
padding: 1em 5%;
}
-
- /* links */
+
+ /* links */
a {
- color: #0000cc;
+ color: #0000cc;
text-decoration: underline;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
-
+
a:hover,
a:active {
outline: 0;
}
a:hover,
- a:focus {
+ a:focus {
background: #ffffaa;
}
-
+
a:focus {
outline: thin dotted;
}
-
+
a:visited {
color: #551a8b;
}
-
+
/* sectioning content */
article {
margin: 0 0 6em 0;
}
-
+
aside {
border: 0.0625em solid #eaeaea;
border-width: 0.0625em 0;
margin: 0 0 2em 0;
padding-top: 1em;
}
-
+
details {
margin: 0 0 1em 0;
}
-
+
section {
margin: 0 0 2em 0;
}
@@ -133,7 +133,7 @@
line-height: 1;
margin: 0 0 0.5em 0;
}
-
+
h2,
.beta {
font-size: 1.75em;
@@ -143,19 +143,19 @@
.gamma {
font-size: 1.375em;
}
-
+
h4,
.delta {
font-size: 1.125em;
}
-
+
/* text-level semantics */
code {
color: #149900;
font-family: monospace, monospace;
font-size: 0.813em;
}
-
+
.oldie code {
_font-family: 'courier new', monospace;
}
@@ -165,34 +165,34 @@
dl {
margin-bottom: 2.5em;
}
-
+
dl dt {
font-style: italic;
}
-
+
dl dd {
margin: 0.5em 0 0.5em 2.5em;
}
-
+
ol,
ul {
margin: 0 0 2em 0;
padding: 0 0 0 2.5em;
}
-
+
ol ol,
ul ul,
ul ol,
ol ul {
margin-bottom: 0;
}
-
+
/* paragraphs and pre */
- p,
+ p,
pre {
margin: 0 0 1.2em 0;
}
-
+
pre {
border: 0.0769em solid #149900;
border-width: 0.0769em 0;
@@ -203,7 +203,7 @@
white-space: pre-wrap;
word-wrap: break-word;*/
}
-
+
.oldie pre {
_font-family: 'courier new', monospace;
}
@@ -214,78 +214,78 @@
border: 0;
-ms-interpolation-mode: bicubic;
}
-
-/* 4. helper classes (non-semantic) */
- /* clearfix */
- .clearfix:before,
- .clearfix:after {
- content: "";
- display: table;
- }
-
- .clearfix:after {
- clear: both;
- }
-
- .oldie .clearfix {
- *zoom: 1;
- }
-
- /* image replacement */
- .image-replacement {
- background-repeat: no-repeat;
- display: block;
- direction: ltr;
- overflow: hidden;
- text-align: left;
- text-indent: -999em;
- }
-
- /* inline-block */
- .inline-block {
- display: -moz-inline-box;
- display: inline-block;
- position: relative;
- }
-
- .oldie .inline-block {
- *display: inline;
- *zoom: 1;
- }
-
-/* 5. shared states */
- /* hidden */
- .is-hidden,
- [hidden] {
- display: none;
- visibility: hidden;
- }
-
- /* hide only visually, but have it available for screenreaders */
- .is-visually-hidden {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- }
-
- .is-visually-hidden.focusable:active,
- .is-visually-hidden.focusable:focus {
- clip: auto;
- height: auto;
- margin: 0;
- overflow: visible;
- position: static;
- width: auto;
- }
-
- /* hide visually and from screenreaders, but maintain layout */
- .is-invisible {
- visibility: hidden;
+
+/* 4. helper classes (non-semantic) */
+ /* clearfix */
+ .clearfix:before,
+ .clearfix:after {
+ content: "";
+ display: table;
+ }
+
+ .clearfix:after {
+ clear: both;
+ }
+
+ .oldie .clearfix {
+ *zoom: 1;
+ }
+
+ /* image replacement */
+ .image-replacement {
+ background-repeat: no-repeat;
+ display: block;
+ direction: ltr;
+ overflow: hidden;
+ text-align: left;
+ text-indent: -999em;
+ }
+
+ /* inline-block */
+ .inline-block {
+ display: -moz-inline-box;
+ display: inline-block;
+ position: relative;
+ }
+
+ .oldie .inline-block {
+ *display: inline;
+ *zoom: 1;
+ }
+
+/* 5. shared states */
+ /* hidden */
+ .is-hidden,
+ [hidden] {
+ display: none;
+ visibility: hidden;
+ }
+
+ /* hide only visually, but have it available for screenreaders */
+ .is-visually-hidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ }
+
+ .is-visually-hidden.focusable:active,
+ .is-visually-hidden.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ width: auto;
+ }
+
+ /* hide visually and from screenreaders, but maintain layout */
+ .is-invisible {
+ visibility: hidden;
}
/* 6. style patterns */
@@ -300,33 +300,33 @@
padding: 0.27em;
width: 10em;
}
-
+
.structure:before {
content: "Structure";
}
-
+
/* copy high-lighting */
.selector {
color: #a31515;
}
-
+
.property {
color: #f00;
}
-
+
.property-value {
color: #00f;
}
-
+
/* header */
.banner {
margin-bottom: 2em;
}
-
+
.banner h1 {
font-size: 2.5em;
}
-
+
/* footer */
.content-info small {
font-size: 0.750em;
@@ -341,69 +341,69 @@
max-width: 60em;
}
}
-
+
/* print */
- @media print {
- * {
- background: transparent !important;
- color: black !important;
- -moz-border-radius: 0 !important;
- border-radius: 0 !important;
- -webkit-box-shadow: none !important;
- -moz-box-shadow: none !important;
- box-shadow: none !important;
- -ms-filter: none !important;
- filter: none !important;
- text-shadow: none !important;
- }
-
- a,
- a:visited {
- color: #9c9c9c !important;
- text-decoration: underline;
- }
-
- a[href]:after {
- content: " (" attr(href) ")";
- }
-
- abbr[title]:after {
- content: " (" attr(title) ")";
- }
-
- .image-replacement a:after,
- a[href^="javascript:"]:after,
- a[href^="#"]:after {
- content: "";
- }
-
- pre,
- blockquote {
- page-break-inside: avoid;
- }
-
- thead {
- display: table-header-group;
- }
-
- tr,
- img {
- page-break-inside: avoid;
- }
-
- @page {
- margin: 0.5cm;
- }
-
- p,
- h2,
- h3 {
- orphans: 3;
- widows: 3;
- }
-
- h2,
- h3 {
- page-break-after: avoid;
- }
+ @media print {
+ * {
+ background: transparent !important;
+ color: black !important;
+ -moz-border-radius: 0 !important;
+ border-radius: 0 !important;
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+ -ms-filter: none !important;
+ filter: none !important;
+ text-shadow: none !important;
+ }
+
+ a,
+ a:visited {
+ color: #9c9c9c !important;
+ text-decoration: underline;
+ }
+
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+
+ .image-replacement a:after,
+ a[href^="javascript:"]:after,
+ a[href^="#"]:after {
+ content: "";
+ }
+
+ pre,
+ blockquote {
+ page-break-inside: avoid;
+ }
+
+ thead {
+ display: table-header-group;
+ }
+
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+
+ @page {
+ margin: 0.5cm;
+ }
+
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
}
View
96 index.html
@@ -21,15 +21,15 @@
<li><a href="#development-process">Development process</a></li>
</ul>
</nav>
-
+
<div role="main" class="main">
<article id="coding-standards">
<h1>Coding standards</h1>
<section>
<h1 class="beta">HTML</h1>
<ul>
<li>
- Use <a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html">Polygot Markup</a>
+ Use <a href="http://dev.w3.org/html5/html-xhtml-author-guide/html-xhtml-authoring-guide.html">Polygot Markup</a>
with the following emphasis:
<ul>
<li>
@@ -38,7 +38,7 @@ <h1 class="beta">HTML</h1>
</li>
<li>Use double quotation marks for attributes.</li>
<li>
- Use the minimized tag syntax, with a space before the closing slash,
+ Use the minimized tag syntax, with a space before the closing slash,
for void elements, e.g. <code>&lt;br /&gt;</code>.
</li>
</ul>
@@ -56,7 +56,7 @@ <h1 class="beta">HTML</h1>
<li>Use tabs for indentation.</li>
</ul>
</section>
-
+
<section>
<h1 class="beta">CSS</h1>
<h2 class="gamma">Example of style</h2>
@@ -65,24 +65,24 @@ <h2 class="gamma">Example of style</h2>
<span class="selector">.action .action-information</span>,
<span class="selector">.button .information:last-child</span> {
<span class="property">background</span>: <span class="property-value">url("../images/generic-logo.png") no-repeat center 0 #fff</span>;
- <span class="property">background-image</span>:
- <span class="property-value">url("../images/generic-bg-bottom.png")</span>,
+ <span class="property">background-image</span>:
+ <span class="property-value">url("../images/generic-bg-bottom.png")</span>,
<span class="property-value">url("../images/generic-bg-top.png")</span>;
<span class="property">border</span>: <span class="property-value">1px solid #000</span>;
<span class="property">-webkit-box-shadow</span>: /* multiple properties on different lines */
- <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
+ <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
+ <span class="property-value">0 2px 6px rgba(0, 0, 0, .1)</span>;
+ <span class="property">-moz-box-shadow</span>:
+ <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
<span class="property-value">0 2px 6px rgba(0, 0, 0, .1)</span>;
- <span class="property">-moz-box-shadow</span>:
- <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
- <span class="property-value">0 2px 6px rgba(0, 0, 0, .1)</span>;
- <span class="property">-ms-box-shadow</span>:
- <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
+ <span class="property">-ms-box-shadow</span>:
+ <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
<span class="property-value">0 2px 6px rgba(0, 0, 0, .1)</span>;
- <span class="property">-o-box-shadow</span>:
- <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
- <span class="property-value">0 2px 6px rgba(0, 0, 0, .1)</span>;
- <span class="property">box-shadow</span>:
- <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
+ <span class="property">-o-box-shadow</span>:
+ <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
+ <span class="property-value">0 2px 6px rgba(0, 0, 0, .1)</span>;
+ <span class="property">box-shadow</span>:
+ <span class="property-value">0 1px 3px rgba(0, 0, 0, .2)</span>,
<span class="property-value">0 2px 6px rgba(0, 0, 0, .1)</span>;
<span class="property">color</span>: <span class="property-value">#333</span>;
<span class="property">display</span>: <span class="property-value">block</span>;
@@ -129,15 +129,15 @@ <h2 class="gamma">Property order</h2>
<span class="property">border-left</span>: <span class="property-value">2px solid #000</span>;
<span class="property">border-right</span>: <span class="property-value">1px solid #000</span>;
<span class="property">border-top</span>: <span class="property-value">2px solid #000</span>;
-}
+}
</pre>
<h2 class="gamma">Property value order</h2>
<ul>
<li><code>background: [colour] ["url"] [scroll] [repeat] [position];</code></li>
<li><code>border: [size] [type] [colour];</code></li>
</ul>
</section>
-
+
<section>
<h1 class="beta">Media assets</h1>
<h2 class="gamma">Naming conventions</h2>
@@ -147,7 +147,7 @@ <h2 class="gamma">Naming conventions</h2>
</ul>
</section>
</article>
-
+
<article>
<h1 id="development-guidelines">Development Guidelines</h1>
<section>
@@ -173,19 +173,19 @@ <h1 class="beta">Foundation</h1>
HTML5 microdata</a>.
</li>
<li>
- Use <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a> landmark roles -
- see <a href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">this blog post</a>
+ Use <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a> landmark roles -
+ see <a href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">this blog post</a>
for more information. Never use ARIA roles to target CSS styles.
- </li>
+ </li>
<li>
- Place all <a href="http://html5boilerplate.com/docs/The-markup/">Javascript</a> before the closing
+ Place all <a href="http://html5boilerplate.com/docs/The-markup/">Javascript</a> before the closing
<code>&lt;/body&gt;</code> tag, except <a href="http://www.modernizr.com">modernizr</a>.
- </li>
+ </li>
<li>Use Classes over IDs with the exception of:
<ul>
<li>In-page navigation.</li>
</ul>
- </li>
+ </li>
</ul>
<p>With the following exceptions:</p>
<ul>
@@ -207,9 +207,9 @@ <h1 class="beta">Foundation</h1>
</li>
</ul>
</section>
-
+
<section>
- <h1 class="beta">CSS</h1>
+ <h1 class="beta">CSS</h1>
<h2 class="gamma">Structure of a stylesheet</h2>
<ol>
<li>fonts (including url to licence)</li>
@@ -264,12 +264,12 @@ <h3 class="delta">Comments and indentation</h3>
<li>Property comments</li>
</ul>
<pre class="example">
-/*
- * standards and conventions
- *
- * colour swatch:
- * light blue = #005
- * dark blue = #00C
+/*
+ * standards and conventions
+ *
+ * colour swatch:
+ * light blue = #005
+ * dark blue = #00C
*
* index:
* 1. fonts
@@ -292,18 +292,18 @@ <h3 class="delta">Comments and indentation</h3>
<span class="selector">header</span> {
<span class="property">margin</span>: <span class="property-value">0</span>;
}
-
+
/* sectioning comment e.g. "primary navigation" */
<span class="selector">header nav</span> {
<span class="property">float</span>: <span class="property-value">left</span>;
}
-
+
/* sectioning comment e.g. "search box" */
<span class="selector">header search</span> {
<span class="property">display</span>: <span class="property-value">inline</span>; /* property comment e.g. ie double margin fix */
}
</pre>
- <h2 class="gamma">Selector naming</h2>
+ <h2 class="gamma">Selector naming</h2>
<ul>
<li>
Use:
@@ -365,18 +365,18 @@ <h2 class="gamma">Fonts and Font Face</h2>
</p>
<ul>
<li>
- Ensure the font is correctly licensed.
+ Ensure the font is correctly licensed.
Find a licence using a <a href="http://sprungmarker.de/wp-content/uploads/webfont-services/">webfont service</a>.
</li>
<li>Ensure the rendering quality of the font is acceptable in all browsers.</li>
<li>Ensure acceptable loading times are maintained as fonts are added.</li>
<li>
- Ensure the correct font weights are included and
+ Ensure the correct font weights are included and
<a href="http://www.fontspring.com/support/troubleshooting/style-linking">linked correctly</a>.
</li>
</ul>
- </section>
-
+ </section>
+
<section>
<h1 class="beta">Media assets</h1>
<h2 class="gamma">File structure</h2>
@@ -406,7 +406,7 @@ <h3 class="delta">Image Formats</h3>
<li>Use PNG 24 for multi-channel transparency.</li>
</ul>
</section>
-
+
<section>
<h1 class="beta">Accessibility</h1>
<ul>
@@ -415,7 +415,7 @@ <h1 class="beta">Accessibility</h1>
</ul>
</section>
</article>
-
+
<article id="development-process">
<h1 class="beta">Development Process</h1>
<ol>
@@ -502,12 +502,12 @@ <h1 class="beta">Development Process</h1>
<li>Demo of animation patterns.</li>
<li>Demo of interaction patterns.</li>
<li>Components built from the patterns.</li>
- </ul>
+ </ul>
</li>
<li>
and with the following features:
<ul>
- <li>Self-annotating and with common language between design and development.</li>
+ <li>Self-annotating and with common language between design and development.</li>
<li>A reference for default typography, padding, margin etc.</li>
<li>Built-in relationship mapping.</li>
<li>Testable.</li>
@@ -528,7 +528,7 @@ <h1 class="beta">A few notes on the why...</h1>
<dd>Assists with merges and diffs within version control.</dd>
<dt>Why those style convention?</dt>
<dd>
- Widely used conventions and those used within <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>
+ Widely used conventions and those used within <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>
and CSS3 generators like <a href="http://css3please.com/">css3please</a>.
</dd>
<dd>
@@ -551,11 +551,11 @@ <h1 class="beta">A few notes on the why...</h1>
</dl>
</details>
</aside>
-
+
<footer class="content-info" role="contentinfo">
<p>
<small>
- This work is licensed under a
+ This work is licensed under a
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="license">Creative Commons License</a>
by the <a href="https://github.com/specialmoves/coding-standards-front-end/contributors">contributors</a>.
</small>

0 comments on commit af35e9b

Please sign in to comment.