Home Explore Help
Sign In
caleb
/
pelican-elegant
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Default files for Less Framework added

Selected options
Optimize for 1.5 line height
Add HTML5 Shim
Include retina media query
Muhammad Talha Mansoor 12 years ago
parent
944adeb513
commit
7f9af3186a
2 changed files with 185 additions and 0 deletions
Unified View Show Diff Stats
  1. 19 0
      index.html
  2. 166 0
      lessFrameWork4.css

+ 19 - 0
index.html
View File 

@@ -0,0 +1,19 @@
 
+<!doctype html>
 
+<html>
 
+
 
+        <head>
 
+                <meta charset="utf-8"/>
 
+                <title></title>
 
+                <!--[if lt IE 9]>
 
+                        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 
+                <![endif]-->
 
+                <link rel="stylesheet" media="all" href=""/>
 
+                <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
+                <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
 
+        </head>
 
+        
+        <body lang="en">
 
+                
+        </body>
 
+        
+</html>

+ 166 - 0
lessFrameWork4.css
View File 

@@ -0,0 +1,166 @@
 
+/*      Less Framework 4
 
+        http://lessframework.com
 
+        by Joni Korpi
 
+        License: http://opensource.org/licenses/mit-license.php */
 
+
 
+
 
+/*      Resets
 
+        ------  */
 
+
 
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
+p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
+img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
+dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
+table, caption, tbody, tfoot, thead, tr, th, td,
 
+article, aside, canvas, details, figure, figcaption, hgroup, 
+menu, footer, header, nav, section, summary, time, mark, audio, video {
 
+        margin: 0;
 
+        padding: 0;
 
+        border: 0;
 
+}
 
+
 
+article, aside, canvas, figure, figure img, figcaption, hgroup,
 
+footer, header, nav, section, audio, video {
 
+        display: block;
 
+}
 
+
 
+a img {border: 0;}
 
+
 
+
 
+
 
+/*      Typography presets
 
+        ------------------      */
 
+
 
+.gigantic {
 
+        font-size: 110px;
 
+        line-height: 120px;
 
+        letter-spacing: -2px;
 
+}
 
+
 
+.huge, h1 {
 
+        font-size: 68px;
 
+        line-height: 72px;
 
+        letter-spacing: -1px;
 
+}
 
+
 
+.large, h2 {
 
+        font-size: 42px;
 
+        line-height: 48px;
 
+}
 
+
 
+.bigger, h3 {
 
+        font-size: 26px;
 
+        line-height: 36px;
 
+}
 
+
 
+.big, h4 {
 
+        font-size: 22px;
 
+        line-height: 30px;
 
+}
 
+
 
+body {
 
+        font: 16px/24px Georgia, serif;
 
+}
 
+
 
+.small, small {
 
+        font-size: 13px;
 
+        line-height: 18px;
 
+}
 
+
 
+/* Selection colours (easy to forget) */
 
+
 
+::selection             {background: rgb(255,255,158);}
 
+::-moz-selection        {background: rgb(255,255,158);}
 
+img::selection          {background: transparent;}
 
+img::-moz-selection     {background: transparent;}
 
+body {-webkit-tap-highlight-color: rgb(255,255,158);}
 
+
 
+
 
+
 
+/*              Default Layout: 992px. 
+                Gutters: 24px.
 
+                Outer margins: 48px.
 
+                Leftover space for scrollbars @1024px: 32px.
 
+-------------------------------------------------------------------------------
 
+cols    1     2      3      4      5      6      7      8      9      10
 
+px      68    160    252    344    436    528    620    712    804    896    */
 
+
 
+body {
 
+        width: 896px;
 
+        padding: 72px 48px 84px;
 
+        background: rgb(232,232,232);
 
+        color: rgb(60,60,60);
 
+        -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
 
+}
 
+
 
+
 
+
 
+/*              Tablet Layout: 768px.
 
+                Gutters: 24px.
 
+                Outer margins: 28px.
 
+                Inherits styles from: Default Layout.
 
+-----------------------------------------------------------------
 
+cols    1     2      3      4      5      6      7      8
 
+px      68    160    252    344    436    528    620    712    */
 
+
 
+@media only screen and (min-width: 768px) and (max-width: 991px) {
 
+        
+        body {
 
+                width: 712px;
 
+                padding: 48px 28px 60px;
 
+        }
 
+}
 
+
 
+
 
+
 
+/*              Mobile Layout: 320px.
 
+                Gutters: 24px.
 
+                Outer margins: 34px.
 
+                Inherits styles from: Default Layout.
 
+---------------------------------------------
 
+cols    1     2      3
 
+px      68    160    252    */
 
+
 
+@media only screen and (max-width: 767px) {
 
+        
+        body {
 
+                width: 252px;
 
+                padding: 48px 34px 60px;
 
+        }
 
+        
+}
 
+
 
+
 
+
 
+/*              Wide Mobile Layout: 480px.
 
+                Gutters: 24px.
 
+                Outer margins: 22px.
 
+                Inherits styles from: Default Layout, Mobile Layout.
 
+------------------------------------------------------------
 
+cols    1     2      3      4      5
 
+px      68    160    252    344    436    */
 
+
 
+@media only screen and (min-width: 480px) and (max-width: 767px) {
 
+        
+        body {
 
+                width: 436px;
 
+                padding: 36px 22px 48px;
 
+        }
 
+        
+}
 
+
 
+
 
+/*      Retina media query.
 
+        Overrides styles for devices with a 
+        device-pixel-ratio of 2+, such as iPhone 4.
 
+-----------------------------------------------    */
 
+
 
+@media 
+        only screen and (-webkit-min-device-pixel-ratio: 2),
 
+        only screen and (min-device-pixel-ratio: 2) {
 
+        
+        body {
 
+        
+        }
 
+        
+}