From 4f8392275a52384e4281aa0f71f23c041e6784e1 Mon Sep 17 00:00:00 2001 From: Dave Gamache Date: Mon, 1 Dec 2014 18:26:32 -0800 Subject: [PATCH] removing old icons and adding new. Adding colophon. Cleaning up a few other things probably --- images/favicon.ico | Bin 1150 -> 0 bytes images/favicon.png | Bin 0 -> 1156 bytes images/feather.svg | 12 +++++ images/feathers.svg | 6 --- images/frame.svg | 19 -------- images/pens.svg | 21 +++++++++ images/watch.svg | 18 ++++++++ index.html | 94 ++++++++++++++++++++++++++++++--------- stylesheets/custom.css | 20 ++++++--- stylesheets/skeleton.css | 51 ++++++++++++++++----- 10 files changed, 178 insertions(+), 63 deletions(-) delete mode 100644 images/favicon.ico create mode 100644 images/favicon.png create mode 100644 images/feather.svg delete mode 100644 images/feathers.svg delete mode 100644 images/frame.svg create mode 100644 images/pens.svg create mode 100644 images/watch.svg diff --git a/images/favicon.ico b/images/favicon.ico deleted file mode 100644 index 821c69175467b68fb452fe951d9c8f64ab439b54..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1150 zcmb_cF{*<=5M9MUARxhnUj-9T)Yc+5Fc(PS8SK(pS*NhE)FXHS3v0WSIYAB(@C5Vs z?PtVqk|N;B?2NPf-nAvF1{*Fx?Gkr+b!2q6M#G9@#AdFh0ZXVax=8o_j3|K~aX zjh}<#+j^_jO6i{BEX$(P>7)$t^c-4YzVFj^yB&H*?s~n_bRqYS19;eezo+GLNokrY zXkFJseZ*LC9KUcd9^UgjDvE;IwxzLV;IP0A4LoPWV?4*M>rxnolq3n2Wl7KHQ{gcW z?qS?Nid4s@OV5_e81lZKE7|;_DhaAFaz`e agC_LBxVb#f41AyBxoUmlnf?#Heg6d*C!a0= diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..7a3c81c1e32b4e4224452cf8261a585480caa0ea GIT binary patch literal 1156 zcmV-~1bh35P)Px(K1oDDR9FeUS6ygSR}lVo-6obMX;utd(pYw*xM;*axQ4d&FA%IGA~hPSg!&Re z%!{H3LD7)Nf>mf~DXa7+587b*Vq0rT+y^!IQ_&TXVq{}Xg2tsmWK$E{Rg$dV+}vF6 z#`_m=J8(F2&&-)`&YW}R%yq#z<@o*n3YW{ZhEo=^6_YQP>FIPj!A@E?`I7?!182!U zWwRxhod!YQaJ$|6s8`2UV5hIjAF*$nn3!mxGk;snv2q|c5D4ty$oVx(v2fUKIJzp%YyG-;+|bmTJITBB&Z-~d;>l)!%wq-3T*Hu{5vvj{FwB`QX)d;Q(oi9$K)StVkW z6c!eyhlhvdszTWU_0aWF=-{;b&=3w|^@mIFWhm}D9??d2iK8!I63Xsg){iGSF*2TdhFu$i_?LHwo`odIDct3 zl;>}naw>Tj*DjvJug8wyM9k^>l~=UK#Tzg}dsgRKg9|nMfVQ0#T)#Obt{lbsjm=KC zVN{<9&8@1ESY$JTRl9KNN*u|Qv3ha&CbWO;=u(M+wDT=6zzcm;gX)@ER92Rw`1u6^ zQrGcW*?Pnb=IDo*jCv#jQpq@?hQmh@t_x|pv91$n-nJ1Rl)Z;jcTGZ~X&W*LaiH5! zG<`7Cge@yqU_;B#h((X1slEn5pQ_|r0k7m_jb4F+oG#kkE+&IdSaNl0b4{3V^d>gw z648{}SSkh2Y<>K>1Mzm0RqdHlG41&@uX6K2kXK1+I7_;Js~2Mi8q>jn2l#QHJvdE0 z5^Q;n$C-@YV!zzLzBY8VvmM`_z722DTolcD9r>@y6QZXvB;s8-v}p~#%cyzuIvIRx zGMPN7yoNJ-j#VQ*A42oyVT4&EKYs-GVsWQ;U&{E*=U7ZKBepOj?#=KqOCNM#KPzP^ z^(PAw6-UbOb9CaRRKjMy6Z|s4Kc-wM)AgC~359DZkm@yCG^k=|{|I^qASDtNs)?Qr zC&XrzVCYw;976qo@am!bUw%xqs#xy?E7noApQL)_c!=j>`km9OoAQjN6bD~$&+BRL zA0tIW2UNvzDV^y=D; + + + feather + Created with Sketch Beta. + + + + + + + \ No newline at end of file diff --git a/images/feathers.svg b/images/feathers.svg deleted file mode 100644 index cc2fdb7..0000000 --- a/images/feathers.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/images/frame.svg b/images/frame.svg deleted file mode 100644 index 21350ac..0000000 --- a/images/frame.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - Group - Created with Sketch Beta. - - - - - - - - - - - - - - \ No newline at end of file diff --git a/images/pens.svg b/images/pens.svg new file mode 100644 index 0000000..8f94436 --- /dev/null +++ b/images/pens.svg @@ -0,0 +1,21 @@ + + + + pens + Created with Sketch Beta. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/watch.svg b/images/watch.svg new file mode 100644 index 0000000..b6b16c6 --- /dev/null +++ b/images/watch.svg @@ -0,0 +1,18 @@ + + + + watch + Created with Sketch Beta. + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 5a92fc0..8b3f602 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Your Page Title Here + Skeleton: Responsive CSS Boilerplate @@ -33,6 +33,7 @@ + @@ -41,20 +42,24 @@ –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-

A dead simple, responsive boilerplate.

+

A dead simple, responsive boilerplate.

Download
-
- - Super light at less than a kb & built with mobile in mind. +
+ + Light as a feather at less than a kb & built with mobile in mind. +
-
- +
+ + + Styles designed to be a starting point, not a UI framework.
-
- - No compiling or installing necessary. Just vanilla CSS. +
+ + + Quick to start with zero compiling or installing necessary.
@@ -66,8 +71,8 @@
Is Skeleton for you?
-

You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has less than 100 lines of custom CSS.

-

Love Skeleton and want to share it, follow it, love it? Well, I appreciate that <3

+

You should use Skeleton if you're feeling like whole UI frameworks like Bootstrap and Foundation are overkill for your project and you just want the basics. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has just over 100 lines of custom CSS.

+

Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3

@@ -78,7 +83,7 @@
The grid
-

The grid is just a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes responsive implementation much, much easier. Go ahead, resize the browser.

+

The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.

One
@@ -167,11 +172,11 @@
Typography
-

Type is all set with the rems, so font-sizes and spacial relationships are responsively sized based on a single <html> font-size property. Everything is still base 10 though so, an <h1> is 5.0rem, which just means 50px.

+

Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

-

The typography base is 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

+

The typography base is Raleway served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

@@ -214,7 +219,7 @@
Buttons
-

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent.

+

Buttons come in two basic flavors in Skeleton. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.

Anchor button @@ -254,7 +259,7 @@
Forms
-

Forms are a huge pain, but hopefully these styles make it a bit easier.

+

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.

@@ -377,7 +382,7 @@
Code
-

Code styling was kept super basic – basically just wrap something in a <code> tag and it will look just like that code tag just did. For blocks of code, wrap a <code> tag with a <pre> tag.

+

Code styling is kept basic – just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

.some-class {
   background-color: red;
@@ -402,7 +407,7 @@
     
     

       
Tables

-      
Only super basic styling for tabular data. Using properly formed table markup with <thead> and <tbody> is important here.

+      
Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

       

         
@@ -467,7 +472,7 @@
     

       
Media queries

-      
Skeleton uses media queries to serve the scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries, the first is mobile-first style, meaning they target min-width so all the base styles are mobile, then queries are used to enhance for larger screen sizes. Mobile-first queries are how Skeleton's grid is styled. I've also provided the same set of queries with max-width if that's your preference. The sizes for the queries are:

+      
Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. There are two sets of queries. The first set is mobile-first, meaning it targets min-width. The other set is desktop-first, meaning  it targets max-width. Mobile-first queries are how Skeleton's grid is built and is a preferrable method of organizing CSS. The sizes for the queries are:

       

         

           
    
@@ -528,6 +533,45 @@
 
 
 
+    

+
+
+    
+    

+      
Utilities

+      
Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.

+
+
+
+
+/* Utility Classes */
+
+/* Make element full width */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+
+/* Make sure elements don't run outside containers (great for images in columns) */
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+
+/* Float either direction */
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+/* Clear a float */
+.u-cf { 
+  content: "";
+  display: table;
+  clear: both; }
+
+

+
+
+
     

 
     
@@ -535,13 +579,19 @@
       
Examples of Skeleton sites

     

 
-    
+    
     

-      
License & Log

+      
License

       
All parts of Skeleton are free to use and abuse under the open-source MIT license. More importantly, if you're into coding head over to the Github page and contribute or fork this bad boy.

       
Skeleton's version history is available on Github.

     

 
+    
+    

+      
Colophon

+      
Skeleton was built using Sublime Text 3 and designed with Sketch. The typeface Raleway was created by Matt McInerney and Pablo Impallari. Code highlighting by Google's Prettify library. Icons in the header are all derivative work of icon from The Noun Project. Feather by Zach VanDeHey, Pen (with cap) by Ed Harrison, Pen (with clicker) by Matthew Hall, and Watch by Julien Deveaux.

+    

+
     

       
       
diff --git a/stylesheets/custom.css b/stylesheets/custom.css
index 8725f58..7c87a17 100644
--- a/stylesheets/custom.css
+++ b/stylesheets/custom.css
@@ -1,11 +1,14 @@
 .container {
   max-width: 760px; }
 .header {
-  margin-top: 18rem;
+  margin-top: 6rem;
   text-align: center; }
+.value-prop {
+  margin-top: 1rem;
+}
 .value-props {
-  margin-top: 15rem;
-  margin-bottom: 10rem; }
+  margin-top: 4rem;
+  margin-bottom: 4rem; }
 .docs-header {
   text-transform: uppercase;
   font-size: 1.4rem;
@@ -18,7 +21,7 @@
 .value-img {
   display: block;
   text-align: center;
-  margin: 0 auto 1rem;}
+  margin: 2.5rem auto 0; }
 .example-grid .column,
 .example-grid .columns {
   background: #EEE;
@@ -99,6 +102,13 @@
   display: none; }
 
 @media (min-width: 550px) {
+  .header {
+    margin-top: 18rem; }
+  .value-props {
+    margin-top: 9rem;
+    margin-bottom: 7rem; }
+  .value-img {
+    margin-bottom: 1rem; }
   .example-grid .column,
   .example-grid .columns {
     margin-bottom: 1.5rem; }
@@ -108,4 +118,4 @@
     float: right;
     margin-top: 12px;
   }
-}
+}
\ No newline at end of file
diff --git a/stylesheets/skeleton.css b/stylesheets/skeleton.css
index 5dae9af..cbe037d 100644
--- a/stylesheets/skeleton.css
+++ b/stylesheets/skeleton.css
@@ -96,13 +96,23 @@ h1, h2, h3, h4, h5, h6 {
 	font-weight: 300;
 	margin-top: 0;
 	margin-bottom: 2rem; }
-h1 { font-size: 5.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
-h2 { font-size: 4.2rem; line-height: 1.25; letter-spacing: -.1rem; }
-h3 { font-size: 3.6rem; line-height: 1.3;  letter-spacing: -.1rem; }
-h4 { font-size: 3.0rem; line-height: 1.35; letter-spacing: -.08rem; }
-h5 { font-size: 2.4rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
 h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
 
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
 
 /* Links
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -183,10 +193,19 @@ textarea,
 select {
 	border: 1px solid #D1D1D1;
 	height: 36px;
-	padding: 0 10px;
+	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
 	border-radius: 4px;
 	box-shadow: none;
   background: #fff; }
+/* Removes awkard default styles on some inputs */
+input[type="email"],
+input[type="search"],
+input[type="text"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
 textarea {
 	min-height: 65px;
 	padding-top: 6px;
@@ -204,13 +223,11 @@ legend {
   display: block;
   font-weight: 600;
   margin-bottom: .5rem; }
-input[disabled] {
-	cursor: not-allowed;
-	background-color: #EFEFEF; }
 fieldset {
 	border-width: 0;
 	padding: 0; }
-input[type="checkbox"] {
+input[type="checkbox"],
+input[type="radio"] {
   display: inline; }
 label > .label-body {
   font-weight: normal;
@@ -279,7 +296,6 @@ select,
 fieldset {
 	margin-bottom: 1.5rem; }
 p,
-hr,
 pre,
 blockquote,
 form,
@@ -293,17 +309,30 @@ form {
 	margin-bottom: 2.5rem; }
 
 
+
 /* Utilities
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .u-full-width {
   width: 100%;
   box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
 .u-pull-right {
 	float: right; }
 .u-pull-left {
 	float: left; }
 
 
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1;
+}
+
 /* Clearing
 –––––––––––––––––––––––––––––––––––––––––––––––––– */