CSS formatting and a few extra modules

malarkey · Dec 27, 2015 · 64ef7dd · 64ef7dd
1 parent 88ad53e
commit 64ef7dd
Show file tree

Hide file tree

Showing 28 changed files with 832 additions and 614 deletions.
diff --git a/assets/img/fpo/fpo-16x9.svg b/assets/img/fpo/fpo-16x9.svg
diff --git a/assets/img/fpo/fpo-avatar-1.jpg b/assets/img/fpo/fpo-avatar-1.jpg
diff --git a/config.codekit b/config.codekit
@@ -2,17 +2,6 @@
 "CodeKitInfo": "This is a CodeKit 2.x project configuration file. It is designed to sync project settings across multiple machines. MODIFYING THE CONTENTS OF THIS FILE IS A POOR LIFE DECISION. If you do so, you will likely cause CodeKit to crash. This file is not useful unless accompanied by the project that created it in CodeKit 2. This file is not backwards-compatible with CodeKit 1.x. For more information, see: http:\/\/incident57.com\/codekit",
 "creatorBuild": "19102",
 "files": {
-	"\/assets\/img\/fpo\/fpo-avatar-1.jpg": {
-		"fileType": 16384,
-		"ignore": 0,
-		"ignoreWasSetByUser": 0,
-		"initialSize": 116752,
-		"inputAbbreviatedPath": "\/assets\/img\/fpo\/fpo-avatar-1.jpg",
-		"outputAbbreviatedPath": "\/assets\/img\/fpo\/fpo-avatar-1.jpg",
-		"outputPathIsOutsideProject": 0,
-		"outputPathIsSetByUser": 0,
-		"processed": 0
-		},
 	"\/css\/320andup.css": {
 		"fileType": 16,
 		"ignore": 1,
@@ -696,8 +685,8 @@
 	},
 "projectAttributes": {
 	"bowerAbbreviatedPath": "",
-	"displayValue": "2015-04-22",
-	"displayValueWasSetByUser": 0,
+	"displayValue": "320 and Up",
+	"displayValueWasSetByUser": 1,
 	"iconImageName": "compass_yellow"
 	},
 "projectSettings": {

diff --git a/css/320andup.css b/css/320andup.css
diff --git a/index.html b/index.html
@@ -45,7 +45,7 @@
 <!-- Fonts -->
 <link href='https://fonts.googleapis.com/css?family=Merriweather|Lato:400,300,700' rel='stylesheet' type='text/css'></head>
 
-<body id="www-">
+<body id="www-stuffandnonsense-co-uk">
 
 <div class="pattern__container">
 
@@ -285,7 +285,7 @@ <h1 class="pattern__page__header">Complementary typography</h1>
 </div>
 
 <div class="pattern-col pattern-col2-col3">
-<p style="font-family:'Bliss2BdIt';font-size:12rem;line-height:.75;">abc</p>
+<p style="font-size:12rem;line-height:.75;">abc</p>
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
@@ -319,6 +319,28 @@ <h1 class="pattern__page__header">Complementary typography</h1>
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col1">
+<p class="milli">Regular</p>
+</div>
+
+<div class="pattern-col pattern-col2-col3">
+<p class="secondary" style="text-transform:uppercase;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col1">
+<p class="milli">Columns</p>
+</div>
+
+<div class="pattern-col pattern-col2-col3 columns">
+<p class="tertiary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+
+
 </section><!-- pattern__page -->
 
 
@@ -333,21 +355,21 @@ <h1 class="pattern__heading">Headings</h1>
 
 <div class="pattern__item">
 <div class="pattern__type">h1</div>
-<h1>Lorem ipsum dolor sit amet</h1>
+<h1><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></h1>
 <div class="pattern__notes">
 </div>
 </div>
 
 <div class="pattern__item">
 <div class="pattern__type">h2</div>
-<h2>Lorem ipsum dolor sit amet</h2>
+<h2><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></h2>
 <div class="pattern__notes">
 </div>
 </div>
 
 <div class="pattern__item">
 <div class="pattern__type">h3</div>
-<h3>Lorem ipsum dolor sit amet</h3>
+<h3><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></h3>
 <div class="pattern__notes">
 </div>
 </div>
@@ -559,6 +581,29 @@ <h1 class="pattern__page__header">Definition list</h1>
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
+
+
+<div class="pattern-col-all pattern__item">
+<div class="pattern-col pattern-col1">
+<p class="milli">Inline definition list</p>
+</div>
+
+<div class="pattern-col pattern-col2-col3">
+<dl class="dl--inline">
+<dt>Published</dt>
+<dd>Smashing Magazine</dd>
+<dd>2015</dd>
+<dt>ISBN (EPUB)</dt>
+<dd>978-3-945749-35-7</dd>
+<dt>ISBN (KINDLE)</dt>
+<dd>978-3-945749-36-4</dd>
+<dt>ISBN (Print)</dt>
+<dd>978-3-945749-37-1</dd>
+</dl>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+
 <div class="pattern-col-all">
 <div class="pattern-col pattern-col2-col3">
 <h1 class="pattern__page__header">Text-level elements</h1>
@@ -575,6 +620,22 @@ <h1 class="pattern__page__header">Text-level elements</h1>
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col2-col3">
+<h1 class="pattern__page__header">Ligatures (if available)</h1>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col1">
+<p class="milli">Ligatures</p>
+</div>
+
+<div class="pattern-col pattern-col2-col3">
+<h1>ct ff fff fi ffi ffj fl ffl st</h1>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
 </section><!-- pattern__page -->
 
 
@@ -864,7 +925,7 @@ <h1 class="pattern__page__header">Form inputs</h1>
 
 <div class="pattern-col-all">
 <div class="pattern-col pattern-col1">
-<p class="milli">Select</p>
+<p class="milli">Checkbox/radio</p>
 </div><!-- pattern-col -->
 
 <div class="pattern-col pattern-col2">
@@ -884,6 +945,31 @@ <h1 class="pattern__page__header">Form inputs</h1>
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
+
+
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col1">
+<p class="milli">Custom checkbox</p>
+</div><!-- pattern-col -->
+
+<div class="pattern-col pattern-col2-col3">
+<ul class="list--plain">
+<li><input type="checkbox" id="checkbox" class="checkbox--custom" autofocus>
+ <label for="checkbox">Checkbox</label></li>
+
+<li><input type="checkbox" id="checkbox-1" class="checkbox--custom" checked>
+ <label for="checkbox-1">Checkbox</label></li>
+
+<li><input type="checkbox" id="checkbox-2" class="checkbox--custom" disabled>
+ <label for="checkbox-2">Checkbox</label></li>
+
+<li><input type="checkbox" id="checkbox-3" class="checkbox--custom" checked disabled>
+ <label for="checkbox-3">Checkbox</label></li>
+</ul>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+
 <div class="pattern-col-all">
 <div class="pattern-col pattern-col1">
 <p class="milli">Textarea</p>

diff --git a/index.kit b/index.kit
@@ -248,7 +248,7 @@
 </div>
 
 <div class="pattern-col pattern-col2-col3">
-<p style="font-family:'Bliss2BdIt';font-size:12rem;line-height:.75;">abc</p>
+<p style="font-size:12rem;line-height:.75;">abc</p>
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
@@ -282,6 +282,28 @@
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col1">
+<p class="milli">Regular</p>
+</div>
+
+<div class="pattern-col pattern-col2-col3">
+<p class="secondary" style="text-transform:uppercase;"><!-- $pattern-example-short --></p>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col1">
+<p class="milli">Columns</p>
+</div>
+
+<div class="pattern-col pattern-col2-col3 columns">
+<p class="tertiary"><!-- $pattern-example-short --> <!-- $pattern-example-short --> <!-- $pattern-example-short --></p>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+
+
 </section><!-- pattern__page -->
 
 
@@ -296,21 +318,21 @@
 
 <div class="pattern__item">
 <div class="pattern__type">h1</div>
-<h1><!-- $pattern-example-heading --></h1>
+<h1><a href="javascript:void(0)"><!-- $pattern-example-heading --></a></h1>
 <div class="pattern__notes">
 </div>
 </div>
 
 <div class="pattern__item">
 <div class="pattern__type">h2</div>
-<h2><!-- $pattern-example-heading --></h2>
+<h2><a href="javascript:void(0)"><!-- $pattern-example-heading --></a></h2>
 <div class="pattern__notes">
 </div>
 </div>
 
 <div class="pattern__item">
 <div class="pattern__type">h3</div>
-<h3><!-- $pattern-example-heading --></h3>
+<h3><a href="javascript:void(0)"><!-- $pattern-example-heading --></a></h3>
 <div class="pattern__notes">
 </div>
 </div>
@@ -522,6 +544,29 @@
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
+
+
+<div class="pattern-col-all pattern__item">
+<div class="pattern-col pattern-col1">
+<p class="milli">Inline definition list</p>
+</div>
+
+<div class="pattern-col pattern-col2-col3">
+<dl class="dl--inline">
+<dt>Published</dt>
+<dd>Smashing Magazine</dd>
+<dd>2015</dd>
+<dt>ISBN (EPUB)</dt>
+<dd>978-3-945749-35-7</dd>
+<dt>ISBN (KINDLE)</dt>
+<dd>978-3-945749-36-4</dd>
+<dt>ISBN (Print)</dt>
+<dd>978-3-945749-37-1</dd>
+</dl>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+
 <div class="pattern-col-all">
 <div class="pattern-col pattern-col2-col3">
 <h1 class="pattern__page__header">Text-level elements</h1>
@@ -538,6 +583,22 @@
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col2-col3">
+<h1 class="pattern__page__header">Ligatures (if available)</h1>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col1">
+<p class="milli">Ligatures</p>
+</div>
+
+<div class="pattern-col pattern-col2-col3">
+<h1>ct ff fff fi ffi ffj fl ffl st</h1>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
 </section><!-- pattern__page -->
 
 
@@ -827,7 +888,7 @@
 
 <div class="pattern-col-all">
 <div class="pattern-col pattern-col1">
-<p class="milli">Select</p>
+<p class="milli">Checkbox/radio</p>
 </div><!-- pattern-col -->
 
 <div class="pattern-col pattern-col2">
@@ -847,6 +908,31 @@
 </div><!-- pattern-col -->
 </div><!-- col-all -->
 
+
+
+<div class="pattern-col-all">
+<div class="pattern-col pattern-col1">
+<p class="milli">Custom checkbox</p>
+</div><!-- pattern-col -->
+
+<div class="pattern-col pattern-col2-col3">
+<ul class="list--plain">
+<li><input type="checkbox" id="checkbox" class="checkbox--custom" autofocus>
+ <label for="checkbox">Checkbox</label></li>
+
+<li><input type="checkbox" id="checkbox-1" class="checkbox--custom" checked>
+ <label for="checkbox-1">Checkbox</label></li>
+
+<li><input type="checkbox" id="checkbox-2" class="checkbox--custom" disabled>
+ <label for="checkbox-2">Checkbox</label></li>
+
+<li><input type="checkbox" id="checkbox-3" class="checkbox--custom" checked disabled>
+ <label for="checkbox-3">Checkbox</label></li>
+</ul>
+</div><!-- pattern-col -->
+</div><!-- col-all -->
+
+
 <div class="pattern-col-all">
 <div class="pattern-col pattern-col1">
 <p class="milli">Textarea</p>

diff --git a/partials/_variables.kit b/partials/_variables.kit
@@ -1,5 +1,5 @@
 <!-- $title 320andup -->
-<!-- $id www- -->
+<!-- $id www-stuffandnonsense-co-uk -->
 
 <!-- $pattern-example-heading Lorem ipsum dolor sit amet -->