Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Finishing off styles and adding jquery picture

  • Loading branch information...
commit e3e6dddc6e4be5ab5c65a3f7158e96326c00092e 1 parent 8b49513
@Abban Abban authored
View
25 assets/css/style.css
@@ -53,6 +53,8 @@ nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0;}
img{border:0;-ms-interpolation-mode:bicubic;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
+figure img{width:100%;height:auto;display:block;}
+figcaption{font-size:small;font-style:italic;color:#666666;}
form{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px;}
@@ -65,6 +67,20 @@ input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-w
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
+form{margin-bottom:1.5em;}
+form ul{list-style-type:none;list-style-image:none;margin:0;padding:0;}form ul li{*zoom:1;margin-bottom:1.5em;}form ul li:before,form ul li:after{content:"";display:table;}
+form ul li:after{clear:both;}
+fieldset{margin:0;padding:1.5em;}
+label{display:block;}
+label.inline{display:inline;padding-right:24px;}
+input:focus,textarea:focus,select:focus{outline:0px;-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);-ms-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);box-shadow:0px 0px 5px rgba(0, 0, 0, 0.3);}
+input[type="text"],input[type="url"],input[type="email"],input[type="number"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime-local"],input[type="telephone"],textarea{display:block;width:100%;margin:0 0 0.75em;padding:0.3em;border:1px solid #cccccc;line-height:1.5em;font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Sans-Serif;}
+select{width:100%;height:2.1em;margin-bottom:0.9em;border:1px solid #cccccc;font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Sans-Serif;}
+input[type="range"],input[type="color"]{vertical-align:middle;height:1.5em;width:100%;font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Sans-Serif;}
+input[type="range"]{height:1.4em;}
+input[type="color"]{width:1.5em;font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Sans-Serif;}
+progress,meter{display:block;width:100%;height:1.5em;}
+input[type="submit"],input[type="button"]{border:1px solid #cccccc;background:#ddd;padding:0.7em 2em;margin:0 20px 0 0;font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Sans-Serif;line-height:1.5em;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;}
table{border-collapse:collapse;border-spacing:0;margin-bottom:1.4em;width:100%;border:1px solid #cccccc;}
thead{text-align:left;font-weight:bold;}
tbody tr:nth-child(even) td{background:#dddddd;}
@@ -85,8 +101,9 @@ header#worlds_birth>div nav ul li{-webkit-box-sizing:border-box;-moz-box-sizing:
#content>div>section{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:66.66666666666666%;padding:0 20px;*width:61.706349206349195%;*padding:0 19.950396825396826px;}
#content>div>aside{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:33.33333333333333%;padding:0 20px;*width:28.373015873015873%;*padding:0 19.950396825396826px;}#content>div>aside>div:last-child p{margin-bottom:0;}
#content>div>aside>div:last-child div:last-child p{margin-bottom:1.5em;}
-#content>div>div{clear:both;}#content>div>div section{background:#ccc;}#content>div>div section div{background:#eee;height:3em;margin-bottom:1.5em;border:20px solid #dddddd;border-top:0;border-bottom:0;}
-#content>div>div section div:first-child{background:#6bac60;}
+#content>div>div{clear:both;}#content>div>div>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 20px;*width:95.03968253968253%;*padding:0 19.950396825396826px;}
+#content>div>div section{background:#ccc;}#content>div>div section div{background:#6bac60;height:3em;margin-bottom:1.5em;border:20px solid #dddddd;border-top:0;border-bottom:0;}
+#content>div>div section#one div:last-child,#content>div>div section#two div:last-child,#content>div>div section#three div:last-child,#content>div>div section#four div:last-child,#content>div>div section#five div:last-child,#content>div>div section#six div:last-child,#content>div>div section#seven div:last-child,#content>div>div section#eight div:last-child,#content>div>div section#nine div:last-child,#content>div>div section#ten div:last-child,#content>div>div section#eleven div:last-child{background:#eee;}
#content>div>div section#one>div:first-child{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:8.333333333333332%;padding:0 20px;*width:3.373015873015873%;*padding:0 19.950396825396826px;}
#content>div>div section#one>div:last-child{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:91.66666666666666%;padding:0 20px;*width:86.7063492063492%;*padding:0 19.950396825396826px;}
#content>div>div section#two>div:first-child{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:16.666666666666664%;padding:0 20px;*width:11.706349206349206%;*padding:0 19.950396825396826px;}
@@ -109,4 +126,8 @@ header#worlds_birth>div nav ul li{-webkit-box-sizing:border-box;-moz-box-sizing:
#content>div>div section#ten>div:last-child{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:16.666666666666664%;padding:0 20px;*width:11.706349206349206%;*padding:0 19.950396825396826px;}
#content>div>div section#eleven>div:first-child{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:91.66666666666666%;padding:0 20px;*width:86.7063492063492%;*padding:0 19.950396825396826px;}
#content>div>div section#eleven>div:last-child{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:8.333333333333332%;padding:0 20px;*width:3.373015873015873%;*padding:0 19.950396825396826px;}
+#content>div>div section#thirds>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:33.33333333333333%;padding:0 20px;*width:28.373015873015873%;*padding:0 19.950396825396826px;}
+#content>div>div section#quarters>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:25%;padding:0 20px;*width:20.03968253968254%;*padding:0 19.950396825396826px;}
+#content>div>div section#sixths>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:16.666666666666664%;padding:0 20px;*width:11.706349206349206%;*padding:0 19.950396825396826px;}
+#content>div>div section#twelfths>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:8.333333333333332%;padding:0 20px;*width:3.373015873015873%;*padding:0 19.950396825396826px;}
@media screen and (max-width:750px){#content>div>section{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 20px;*width:95.03968253968253%;*padding:0 19.950396825396826px;} #content>div>aside{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 0;*width:95.03968253968253%;*padding:0 -0.0496031746031746px;}#content>div>aside>h2{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 20px;*width:95.03968253968253%;*padding:0 19.950396825396826px;padding-top:0.25em;margin-bottom:0.5em;} #content>div>aside div#lists>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:33.33333333333333%;padding:0 20px;*width:28.373015873015873%;*padding:0 19.950396825396826px;} #content>div>aside div#lists ul,#content>div>aside div#lists ol{padding-left:10%;} #content>div>aside>div:last-child{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 0;*width:95.03968253968253%;*padding:0 -0.0496031746031746px;}#content>div>aside>div:last-child>h2{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 20px;*width:95.03968253968253%;*padding:0 19.950396825396826px;padding-top:0.25em;margin-bottom:0.5em;} #content>div>aside>div:last-child>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:50%;padding:0 20px;*width:45.03968253968254%;*padding:0 19.950396825396826px;}}@media screen and (max-width:520px){#content>div>aside div#lists>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 20px;*width:95.03968253968253%;*padding:0 19.950396825396826px;} #content>div>aside>div:last-child>h2{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 20px;*width:95.03968253968253%;*padding:0 19.950396825396826px;padding-top:0.25em;margin-bottom:0.5em;} #content>div>aside>div:last-child>div{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline;float:left;width:100%;padding:0 20px;*width:95.03968253968253%;*padding:0 19.950396825396826px;} #content>div>aside>div:last-child p{margin-bottom:0;} #content>div>aside>div:last-child div:last-child p{margin-bottom:1.5em;}}
View
2  assets/js/script-ck.js
1 addition, 1 deletion not shown
View
6 assets/js/script.js
@@ -1 +1,5 @@
-//@codekit-prepend "libs/modernizr-2.5.3.min.js", "libs/jquery-1.7.1.min.js", "libs/picture.js";
+//@codekit-prepend "libs/modernizr-2.5.3.min.js", "libs/jquery-1.7.1.min.js", "libs/picture.js";
+
+$(function(){
+ $('figure.responsive').picture({ container : $('#content') });
+});
View
2  assets/less/grid.less
@@ -5,7 +5,7 @@
*
* This is heavily infleuenced by the Semantic Grid http://semantic.gs
*
- * @since 1.0
+ * @version 1.0
*/
/* Utility variable — you should never need to modify this */
View
126 assets/less/normalize-baseline.less
@@ -6,7 +6,7 @@
*
* Adapted from http://github.com/necolas/normalize.css
*
- * @since 1.0
+ * @version 1.0
*/
// Box sizing to make life easier with % layouts
@@ -486,6 +486,25 @@ figure {
margin: 0;
}
+/*
+ * Make images responsive
+ */
+figure img{
+ width: 100%;
+ height: auto;
+ display:block;
+}
+
+/*
+ * Figcaption styling
+ */
+figcaption{
+ font-size: small;
+ font-style:italic;
+ color:@grey_dark;
+}
+
+
/* ==========================================================================
Forms
========================================================================== */
@@ -632,6 +651,111 @@ textarea {
vertical-align: top; /* 2 */
}
+/*
+ * Some base styling for forms.
+ */
+form{
+ margin-bottom:1.5em;
+}
+form ul{
+ list-style-type:none;
+ list-style-image:none;
+ margin:0;
+ padding:0;
+ li{
+ .grid-clearfix();
+ margin-bottom:1.5em;
+ }
+}
+
+fieldset{
+ margin:0;
+ padding:1.5em;
+}
+
+label{
+ display:block;
+}
+label.inline{
+ display:inline;
+ padding-right: 24px;
+}
+input,
+textarea,
+select{
+ &:focus{
+ outline: 0px;
+ -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+ -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+ -ms-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+ box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+ }
+}
+
+input[type="text"],
+input[type="url"],
+input[type="email"],
+input[type="number"],
+input[type="date"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="telephone"],
+textarea{
+ display:block;
+ width: 100%;
+ margin:0 0 0.75em;
+ padding: 0.3em;
+ border:1px solid @grey_regular;
+ line-height: 1.5em;
+ font-family:@body_family;
+}
+
+select{
+ width: 100%;
+ height: 2.1em;
+ margin-bottom: 0.9em;
+ border:1px solid @grey_regular;
+ font-family:@body_family;
+}
+
+input[type="range"],
+input[type="color"]{
+ vertical-align:middle;
+ height: 1.5em;
+ width: 100%;
+ font-family:@body_family;
+}
+input[type="range"],{
+ height: 1.4em;
+}
+input[type="color"]{
+ width: 1.5em;
+ font-family:@body_family;
+}
+
+progress,
+meter{
+ display:block;
+ width: 100%;
+ height: 1.5em;
+}
+
+input[type="submit"],
+input[type="button"]{
+ border:1px solid @grey_regular;
+ background:#ddd;
+ padding: 0.7em 2em;
+ margin:0 20px 0 0;
+ font-family:@body_family;
+ line-height: 1.5em;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -ms-border-radius: 3px;
+ border-radius: 3px;
+}
+
/* ==========================================================================
Tables
========================================================================== */
View
33 assets/less/style.less
@@ -115,18 +115,33 @@ header#worlds_birth{
}
>div{
clear:both;
+ >div{
+ .column(12);
+ }
section{
background:#ccc;
div{
- background: #eee;
+ background: @green;
height: 3em;
margin-bottom: 1.5em;
border: @gutter_width*0.5 solid #ddd;
border-top:0;
border-bottom:0;
}
- div:first-child{
- background:@green;
+ }
+ section#one,
+ section#two,
+ section#three,
+ section#four,
+ section#five,
+ section#six,
+ section#seven,
+ section#eight,
+ section#nine,
+ section#ten,
+ section#eleven{
+ div:last-child{
+ background:#eee;
}
}
section#one{
@@ -173,6 +188,18 @@ header#worlds_birth{
>div:first-child{.column(11);}
>div:last-child{.column(1);}
}
+ section#thirds{
+ >div{.column(4);}
+ }
+ section#quarters{
+ >div{.column(3);}
+ }
+ section#sixths{
+ >div{.column(2);}
+ }
+ section#twelfths{
+ >div{.column(1);}
+ }
}
}
}
View
162 index.html
@@ -75,6 +75,16 @@
<p>Here, it must needs be said, that accidents like this have in more than one case occurred to ships in violent storms. The magnetic energy, as developed in the mariner's needle, is, as all know, essentially one with the electricity beheld in heaven; hence it is not to be much marvelled at, that such things should be. Instances where the lightning has actually struck the vessel, so as to smite down some of the spars and rigging, the effect upon the needle has at times been still more fatal; all its loadstone virtue being annihilated, so that the before magnetic steel was of no more use than an old wife's knitting needle. But in either case, the needle never again, of itself, recovers the original virtue thus marred or lost; and if the binnacle compasses be affected, the same fate reaches all the others that may be in the ship; even were the lowermost one inserted into the kelson.</p>
+ <figure class="responsive" data-media="http://placehold.it/300x96" data-media440="http://placehold.it/440x172" data-media600="http://placehold.it/632x240" title="A Half Brained Idea">
+
+ <noscript>
+ <img src="http://placehold.it/632x240">
+ </noscript>
+
+ <figcaption>Check out the responsive images</figcaption>
+
+ </figure>
+
<p><pre>Deliberately standing before the binnacle, and eyeing the transpointed compasses, the old man, with the sharp of his extended hand, now took the precise bearing of the sun, and satisfied that the needles were exactly inverted, shouted out his orders for the ship's course to be changed accordingly. The yards were hard up; and once more the Pequod thrust her undaunted bows into the opposing wind, for the supposed fair one had only been juggling her.</pre></p>
<h2>Subtitle &mdash; h2</h2>
@@ -241,17 +251,17 @@
<fieldset>
- <legend>Your Details</legend>
+ <legend>Form Elements</legend>
<ul>
<li>
<label for="name">Name:</label>
- <input type="text" id="name" name="name" value="" maxlength="100"><br>
+ <input type="text" id="name" name="name" value="" maxlength="100" placeholder="First name, last name..">
</li>
<li>
- <label>Lunch:</label>
+ <label>Lunchy:</label>
<label class="inline" for="pasta"><input type="radio" id="pasta" name="lunch" value="pasta"> Pasta</label>
<label class="inline" for="fish"><input type="radio" id="fish" name="lunch" value="fish"> Fish</label>
</li>
@@ -271,14 +281,84 @@
<option value ="option">option</option>
</select>
</li>
+
+ <li>
+ <label for="form_url">Url:</label>
+ <input name="form_url" id="form_url" type="url" list="url_list" placeholder="http://">
+ <datalist id="url_list">
+ <option value="http://www.google.com" label="Google">
+ <option value="http://www.nettuts.com" label="NetTuts">
+ </datalist>
+ </li>
+
+ <li>
+ <label for="form_range">Range:</label>
+ <input name="form_range" id="form_range" type="range" min="1" max="10" step=".5" value="5" >
+ </li>
+
+ <li>
+ <label for="form_number">Number:</label>
+ <input name="form_number" id="form_number" type="number" min="1" max="10" >
+ </li>
+
+ <li>
+ <label for="form_date">Date:</label>
+ <input name="form_date" id="form_date" type="date">
+ </li>
+
+ <li>
+ <label for="form_month">Month:</label>
+ <input name="form_month" id="form_month" type="month">
+ </li>
+
+ <li>
+ <label for="form_week">Week:</label>
+ <input name="form_week" id="form_week" type="week">
+ </li>
+
+ <li>
+ <label for="form_time">Time:</label>
+ <input name="form_time" id="form_time" type="time">
+ </li>
+
+ <li>
+ <label for="form_datetime_local">Local Time:</label>
+ <input name="form_datetime_local" id="form_datetime_local" type="datetime-local">
+ </li>
+
+ <li>
+ <label for="email">Email:</label>
+ <input name="form_email" id="form_email" type="email" list="email_list" multiple>
+ <datalist id="url_list">
+ <option value="jane.doe@test.com" label="Jane Doe">
+ <option value="john.doe@test.com" label="John Doe">
+ </datalist>
+ </li>
+
+ <li>
+ <label for="form_telephone">Phone:</label>
+ <input name="form_telephone" id="form_telephone" type="telephone">
+ </li>
+
+ <li>
+ <label for="form_color">Color:</label>
+ <input name="form_color" id="form_color" type="color">
+ </li>
+
+ <li>
+ <label>Progress &amp; Meter</label>
+ <progress id="p" max=100>0% </progress>
+ <meter min=0 max=20 value=12 optimum=10>12cm </meter>
+ </li>
<li>
<label for="comments">Comments:</label>
- <textarea id="comments" rows="3" cols="20" name="comments"></textarea>
+ <textarea id="comments" rows="3" cols="20" name="comments" placeholder="Blah, blah, blah.."></textarea>
</li>
<li>
<input type="submit" value="Submit">
+ <input type="button" value="Cancel">
</li>
</ul>
@@ -456,95 +536,103 @@
<div>
- <a name="grid"></a>
- <h2>Grid</h2>
-
- <section id="one">
+ <div>
+ <a name="grid"></a>
+ <h2>Grid Sample</h2>
+
+ </div>
+
+ <section id="thirds">
+ <div></div>
<div></div>
+ <div></div>
+ </section>
+ <section id="quarters">
+ <div></div>
<div></div>
+ <div></div>
+ <div></div>
+ </section>
+ <section id="sixths">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
</section>
- <section id="two">
-
+ <section id="twelfths">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
<div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </section>
+ <section id="one">
<div></div>
+ <div></div>
+ </section>
+ <section id="two">
+ <div></div>
+ <div></div>
</section>
<section id="three">
-
<div></div>
-
<div></div>
-
</section>
<section id="four">
-
<div></div>
-
<div></div>
-
</section>
<section id="five">
-
<div></div>
-
<div></div>
-
</section>
<section id="six">
-
<div></div>
-
<div></div>
-
</section>
<section id="seven">
-
<div></div>
-
<div></div>
-
</section>
<section id="eight">
-
<div></div>
-
<div></div>
-
</section>
<section id="nine">
-
<div></div>
-
<div></div>
-
</section>
<section id="ten">
-
<div></div>
-
<div></div>
-
</section>
<section id="eleven">
-
<div></div>
-
<div></div>
-
</section>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.