From 5529e30f27fbce2ae40bc8859014fcebacaffa0b Mon Sep 17 00:00:00 2001 From: Joni Korpi Date: Sat, 23 Jul 2011 17:35:12 +0300 Subject: [PATCH 1/7] Initial cleanup and branching --- README.markdown | 20 ----- main-17px.css | 167 -------------------------------------- main-18px.css | 167 -------------------------------------- main-16px.css => main.css | 0 main.html | 3 +- 5 files changed, 1 insertion(+), 356 deletions(-) delete mode 100644 main-17px.css delete mode 100644 main-18px.css rename main-16px.css => main.css (100%) diff --git a/README.markdown b/README.markdown index 17fae94..e69de29 100644 --- a/README.markdown +++ b/README.markdown @@ -1,20 +0,0 @@ -Less Framework is a CSS grid system for designing adaptive web sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. - -For more information, visit http://lessframework.com/ - -# Differences to the version at lessframework.com - -The [configurable version](http://lessframework.com/) lets you choose between three sets of type presets, as well as lets you add an optional Retina media query and the [http://code.google.com/p/html5shim/](HTML5 Shim). In this version, the type presets have been split into three versions of the main CSS file, all of which also include the Retina media query. The HTML5 Shim is not included. - -# Included files - -- main.html: Required HTML -- main-16px.css: Required CSS with type presets based on a font-size of 16px at a line-height of 24px -- main-17px.css: Same as above, but based on a font-size of 17px -- main-18px.css: Same as above, but based on a font-size of 18px - -# Usage - -Solid knowledge of HTML and CSS is recommended. You'll find the dimensions for each layout noted down in comments within the CSS files. - -Less Framework is licensed under MIT: http://opensource.org/licenses/mit-license.php \ No newline at end of file diff --git a/main-17px.css b/main-17px.css deleted file mode 100644 index 2a71a4e..0000000 --- a/main-17px.css +++ /dev/null @@ -1,167 +0,0 @@ -/* Less Framework 4 with 17/24 type presets - 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: 116px; - line-height: 120px; - letter-spacing: -2px; -} - -.huge, h1 { - font-size: 72px; - line-height: 72px; - letter-spacing: -1px; -} - -.large, h2 { - font-size: 44px; - line-height: 48px; -} - -.bigger, h3 { - font-size: 28px; - line-height: 36px; -} - -.big, h4 { - font-size: 24px; - line-height: 30px; -} - -body { - font: 17px/24px Palatino, Constantia, "Palatino Linotype", 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 { - - } - -} \ No newline at end of file diff --git a/main-18px.css b/main-18px.css deleted file mode 100644 index fd97d27..0000000 --- a/main-18px.css +++ /dev/null @@ -1,167 +0,0 @@ -/* Less Framework 4 with 18/24 type presets - 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: 123px; - line-height: 132px; - letter-spacing: -2px; -} - -.huge, h1 { - font-size: 76px; - line-height: 84px; - letter-spacing: -1px; -} - -.large, h2 { - font-size: 47px; - line-height: 48px; -} - -.bigger, h3 { - font-size: 29px; - line-height: 36px; -} - -.big, h4 { - font-size: 25px; - line-height: 30px; -} - -body { - font: 18px/24px "Times New Roman", Times, 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 { - - } - -} \ No newline at end of file diff --git a/main-16px.css b/main.css similarity index 100% rename from main-16px.css rename to main.css diff --git a/main.html b/main.html index 0541905..305f0b6 100644 --- a/main.html +++ b/main.html @@ -6,8 +6,7 @@ - - + From 9d051475982e460731e3ecb7dc6d27756f83c8f4 Mon Sep 17 00:00:00 2001 From: Joni Korpi Date: Sat, 23 Jul 2011 17:36:29 +0300 Subject: [PATCH 2/7] Initial cleanups --- README.markdown | 1 + main.css | 167 ------------------------------------------------ 2 files changed, 1 insertion(+), 167 deletions(-) diff --git a/README.markdown b/README.markdown index e69de29..ece61dc 100644 --- a/README.markdown +++ b/README.markdown @@ -0,0 +1 @@ +Under development. \ No newline at end of file diff --git a/main.css b/main.css index bbfbc59..e69de29 100644 --- a/main.css +++ b/main.css @@ -1,167 +0,0 @@ -/* Less Framework 4 with 16/24 type presets - 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 { - - } - -} \ No newline at end of file From 3974e1863b5d86f3edff55847e58fffc9c5f9211 Mon Sep 17 00:00:00 2001 From: Joni Korpi Date: Sat, 23 Jul 2011 22:48:50 +0300 Subject: [PATCH 3/7] Foundations --- main.css | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ main.html | 16 +++++++++----- 2 files changed, 74 insertions(+), 5 deletions(-) diff --git a/main.css b/main.css index e69de29..185203f 100644 --- a/main.css +++ b/main.css @@ -0,0 +1,63 @@ +/* + Resets +*/ + + + +/* + Consistency fixes +*/ + + + +/* + Typography +*/ + + + +/* + Narrow Layout +*/ + + /* + Narrow Layout + Spot-fixes for 320 px + */ + + /* + Narrow Layout + Spot-fixes for 480 px + */ + + + +/* + Portrait Layout +*/ + + /* + Portrait Layout + Zoomed to 1.0625 + */ + + /* + Portrait Layout + Zoomed to 1.125 + */ + + + +/* + Landscape Layout +*/ + + /* + Landscape Layout + Zoomed to 1.0625 + */ + + /* + Landscape Layout + Zoomed to 1.125 + */ \ No newline at end of file diff --git a/main.html b/main.html index 305f0b6..41634ec 100644 --- a/main.html +++ b/main.html @@ -1,16 +1,22 @@ - + + - + + + Less Framework 5 Demo - + + - - + +

+ New ethos: the layout only adapts when it's useful for the content. +

\ No newline at end of file From 60162082e4d2a05d582610e1321e25c8b42d21b4 Mon Sep 17 00:00:00 2001 From: Joni Korpi Date: Sun, 24 Jul 2011 00:48:08 +0300 Subject: [PATCH 4/7] More fundamentals --- main.css | 3 +++ main.html | 6 ++++++ 2 files changed, 9 insertions(+) diff --git a/main.css b/main.css index 185203f..e6be5bc 100644 --- a/main.css +++ b/main.css @@ -18,6 +18,7 @@ /* Narrow Layout + primarily single-column */ /* @@ -34,6 +35,7 @@ /* Portrait Layout + optimal width for text content */ /* @@ -50,6 +52,7 @@ /* Landscape Layout + empty columns around text content */ /* diff --git a/main.html b/main.html index 41634ec..e6c44a6 100644 --- a/main.html +++ b/main.html @@ -17,6 +17,12 @@

New ethos: the layout only adapts when it's useful for the content.

+

+ Try to largely ignore the viewport, while keeping the most popular screen sizes today in mind. Don't try to fit the layout exactly to the screen's proportions. Just make it good enough. +

+

+ Most useful for simple sites, where the main content is text. +

\ No newline at end of file From af80159ab2c5a0da0686852e09012a3d9dbacd49 Mon Sep 17 00:00:00 2001 From: Joni Korpi Date: Mon, 25 Jul 2011 20:56:42 +0300 Subject: [PATCH 5/7] Consistency fixes and resets --- main.css | 126 +++++++++++++++++++++++++++++++++++++++++++----------- main.html | 10 +---- 2 files changed, 103 insertions(+), 33 deletions(-) diff --git a/main.css b/main.css index e6be5bc..70706b1 100644 --- a/main.css +++ b/main.css @@ -1,66 +1,144 @@ /* - Resets +* +* Less Framework 5 (5.0) http://lessframework.com/ +* by Joni Korpi http://jonikorpi.com/ +* */ +/* +* +* Resets for margins, paddings, and borders +* Except for form elements +* +*/ + +html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video, canvas { + margin: 0; + padding: 0; + border: 0; +} + /* - Consistency fixes +* +* Consistency fixes +* Adopted from http://necolas.github.com/normalize.css/ +* */ +input, textarea, button, select { + margin: 0; + font-size: 100%; + line-height: normal; + vertical-align: baseline; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; +} + +textarea {overflow: auto;} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, audio, canvas, video {display: block;} +html {height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} +body {min-height: 100%; font-size: 100%;} +img {border: 0; -ms-interpolation-mode: bicubic;} +sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} +sup {top: -0.5em;} +sub {bottom: -0.25em;} +pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;} +b, strong {font-weight: bold;} +abbr[title] {border-bottom: 1px dotted;} +figure {position: relative;} +figure img, figure object, figure embed, figure video {max-width: 100%; display: block;} /* - Typography +* +* Typography +* */ +body, input, textarea, button, select, textarea { + font-family: sans-serif; +} + +pre, code { + font-family: monospace; +} /* - Narrow Layout - primarily single-column +* +* Narrow Layout +* primarily single-column +* */ /* - Narrow Layout - Spot-fixes for 320 px + * Narrow Layout + * Spot-fixes for 320 px */ /* - Narrow Layout - Spot-fixes for 480 px + * Narrow Layout + * Spot-fixes for 480 px + */ + + /* + * Narrow Layout + * Fixes for IE6–8 */ - /* - Portrait Layout - optimal width for text content +* +* Portrait Layout +* optimal width for text content +* */ /* - Portrait Layout - Zoomed to 1.0625 + * Portrait Layout + * Zoomed to 1.0625 */ /* - Portrait Layout - Zoomed to 1.125 + * Portrait Layout + * Zoomed to 1.125 */ - /* - Landscape Layout - empty columns around text content +* +* Landscape Layout +* empty columns around text content +* */ /* - Landscape Layout - Zoomed to 1.0625 + * Landscape Layout + * Zoomed to 1.0625 */ /* - Landscape Layout - Zoomed to 1.125 - */ \ No newline at end of file + * Landscape Layout + * Zoomed to 1.125 + */ + + \ No newline at end of file diff --git a/main.html b/main.html index e6c44a6..d1ce353 100644 --- a/main.html +++ b/main.html @@ -14,15 +14,7 @@ -

- New ethos: the layout only adapts when it's useful for the content. -

-

- Try to largely ignore the viewport, while keeping the most popular screen sizes today in mind. Don't try to fit the layout exactly to the screen's proportions. Just make it good enough. -

-

- Most useful for simple sites, where the main content is text. -

+ \ No newline at end of file From 511fca6c81ec641f7596483c4da3d19446f91624 Mon Sep 17 00:00:00 2001 From: Joni Korpi Date: Mon, 25 Jul 2011 21:43:59 +0300 Subject: [PATCH 6/7] Media query foundations --- main.css | 323 +++++++++++++++++++++++++++++++++++++++--------------- main.less | 200 +++++++++++++++++++++++++++++++++ 2 files changed, 433 insertions(+), 90 deletions(-) create mode 100644 main.less diff --git a/main.css b/main.css index 70706b1..9735685 100644 --- a/main.css +++ b/main.css @@ -2,143 +2,286 @@ * * Less Framework 5 (5.0) http://lessframework.com/ * by Joni Korpi http://jonikorpi.com/ +* licensed under MIT http://opensource.org/licenses/mit-license.php * */ - - /* * -* Resets for margins, paddings, and borders -* Except for form elements +* Margin, padding, and border resets +* except for form elements * */ - -html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video, canvas { - margin: 0; - padding: 0; - border: 0; -} - - +html, +body, +div, +span, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +a, +blockquote, +pre, +abbr, +address, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +samp, +small, +strong, +sub, +sup, +var, +b, +i, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +menu, +time, +mark, +audio, +video, +canvas { + margin: 0; + padding: 0; + border: 0; +} /* * * Consistency fixes -* Adopted from http://necolas.github.com/normalize.css/ +* adopted from http://necolas.github.com/normalize.css/ * */ - -input, textarea, button, select { - margin: 0; - font-size: 100%; - line-height: normal; - vertical-align: baseline; -} - +html { + height: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + min-height: 100%; + font-size: 100%; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +audio, +canvas, +video { + display: block; +} +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} +b, strong { + font-weight: bold; +} +abbr[title] { + border-bottom: 1px dotted; +} +img { + border: 0; + -ms-interpolation-mode: bicubic; +} +figure { + position: relative; +} +figure img, +figure object, +figure embed, +figure video { + max-width: 100%; + display: block; +} +input, +textarea, +button, +select { + margin: 0; + font-size: 100%; + line-height: normal; + vertical-align: baseline; +} button, -html input[type="button"], -input[type="reset"], +html input[type="button"], +input[type="reset"], input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; + cursor: pointer; + -webkit-appearance: button; } - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; +input[type="checkbox"], input[type="radio"] { + box-sizing: border-box; +} +textarea { + overflow: auto; } - -textarea {overflow: auto;} - table { - border-collapse: collapse; - border-spacing: 0; -} - -article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, audio, canvas, video {display: block;} -html {height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} -body {min-height: 100%; font-size: 100%;} -img {border: 0; -ms-interpolation-mode: bicubic;} -sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} -sup {top: -0.5em;} -sub {bottom: -0.25em;} -pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;} -b, strong {font-weight: bold;} -abbr[title] {border-bottom: 1px dotted;} -figure {position: relative;} -figure img, figure object, figure embed, figure video {max-width: 100%; display: block;} - - + border-collapse: collapse; + border-spacing: 0; +} /* * * Typography * */ - -body, input, textarea, button, select, textarea { - font-family: sans-serif; +body, +input, +textarea, +button, +select, +textarea { + font-family: sans-serif; } - pre, code { - font-family: monospace; + font-family: monospace; } - - /* * * Narrow Layout -* primarily single-column +* 240–540 px +* for all browsers, including IE6–8 * */ - - /* - * Narrow Layout - * Spot-fixes for 320 px +body { + min-width: 240px; + max-width: 540px; +} +/* + * Fixes for IE6–8 */ - - /* - * Narrow Layout - * Spot-fixes for 480 px +.ie body { + width: 540px; +} +/* + * 320 px and above + * for modern mobile browsers */ - - /* - * Narrow Layout - * Fixes for IE6–8 +@media screen and (min-width: 320px) { + +} +/* + * 480 px and above + * for modern mobile browsers */ - - +@media screen and (min-width: 480px) { + +} /* * * Portrait Layout -* optimal width for text content +* 540 px +* for modern tablet-sized browsers * */ - - /* +@media screen and (min-width: ???px) { + body { + max-width: none; + width: 540px; + } +} +/* * Portrait Layout - * Zoomed to 1.0625 + * zoomed to 1.0625x */ - - /* +@media screen and (min-width: ???px) { + body { + font-size: 1.0625em; + } +} +/* * Portrait Layout - * Zoomed to 1.125 + * zoomed to 1.125x */ - - +@media screen and (min-width: ???px) { + body { + font-size: 1.125em; + } +} /* * * Landscape Layout -* empty columns around text content +* ??? px +* for modern widescreen browsers * */ - - /* +@media screen and (min-width: ???px) { + body { + font-size: 1em; + width: ???px; + } +} +/* * Landscape Layout - * Zoomed to 1.0625 + * zoomed to 1.0625x */ - - /* +@media screen and (min-width: ???px) { + body { + font-size: 1.0625em; + } +} +/* * Landscape Layout - * Zoomed to 1.125 + * zoomed to 1.125x */ - - \ No newline at end of file +@media screen and (min-width: ???px) { + body { + font-size: 1.125em; + } +} diff --git a/main.less b/main.less new file mode 100644 index 0000000..b17363b --- /dev/null +++ b/main.less @@ -0,0 +1,200 @@ +/* +* +* Less Framework 5 (5.0) http://lessframework.com/ +* by Joni Korpi http://jonikorpi.com/ +* licensed under MIT http://opensource.org/licenses/mit-license.php +* +*/ + + +/* +* +* Margin, padding, and border resets +* except for form elements +* +*/ + +html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video, canvas { + margin: 0; + padding: 0; + border: 0; +} + + +/* +* +* Consistency fixes +* adopted from http://necolas.github.com/normalize.css/ +* +*/ + +html {height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} +body {min-height: 100%; font-size: 100%;} + +article, aside, details, figcaption, figure, +footer, header, hgroup, nav, section, audio, canvas, video { + display: block; +} + +sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} +sup {top: -0.5em;} +sub {bottom: -0.25em;} +pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;} +b, strong {font-weight: bold;} +abbr[title] {border-bottom: 1px dotted;} + +img {border: 0; -ms-interpolation-mode: bicubic;} +figure {position: relative;} +figure img, figure object, figure embed, figure video {max-width: 100%; display: block;} + +input, textarea, button, select { + margin: 0; + font-size: 100%; + line-height: normal; + vertical-align: baseline; +} +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; +} +textarea {overflow: auto;} +table { + border-collapse: collapse; + border-spacing: 0; +} + + +/* +* +* Typography +* +*/ + +body, input, textarea, button, select, textarea { + font-family: sans-serif; +} + +pre, code { + font-family: monospace; +} + + +/* +* +* Narrow Layout +* 240–540 px +* for all browsers, including IE6–8 +* +*/ + +body { + min-width: 240px; + max-width: 540px; +} + + + /* + * Fixes for IE6–8 + */ + + .ie body { + width: 540px; + } + + /* + * 320 px and above + * for modern mobile browsers + */ + + @media screen and (min-width: 320px) { + + } + + /* + * 480 px and above + * for modern mobile browsers + */ + + @media screen and (min-width: 480px) { + + } + + +/* +* +* Portrait Layout +* 540 px +* for modern tablet-sized browsers +* +*/ + +@media screen and (min-width: ???px) { + + body { + max-width: none; + width: 540px; + } +} + + /* + * Portrait Layout + * zoomed to 1.0625x + */ + + @media screen and (min-width: ???px) { + body {font-size: 17/16*1em;} + } + + /* + * Portrait Layout + * zoomed to 1.125x + */ + + @media screen and (min-width: ???px) { + body {font-size: 18/16*1em;} + } + + +/* +* +* Landscape Layout +* ??? px +* for modern widescreen browsers +* +*/ + +@media screen and (min-width: ???px) { + + body { + font-size: 16/16*1em; + width: ???px; + } + +} + + /* + * Landscape Layout + * zoomed to 1.0625x + */ + + @media screen and (min-width: ???px) { + body {font-size: 17/16*1em;} + } + + /* + * Landscape Layout + * zoomed to 1.125x + */ + + @media screen and (min-width: ???px) { + body {font-size: 18/16*1em;} + } + + \ No newline at end of file From 9cf5c1501c5555707ac9b18547d6fd2aaca0ef36 Mon Sep 17 00:00:00 2001 From: Joni Korpi Date: Mon, 25 Jul 2011 22:04:20 +0300 Subject: [PATCH 7/7] Removed second stylesheet --- main.html | 1 - 1 file changed, 1 deletion(-) diff --git a/main.html b/main.html index d1ce353..56b9bd3 100644 --- a/main.html +++ b/main.html @@ -10,7 +10,6 @@ -