diff --git a/README.markdown b/README.markdown
index 17fae94..ece61dc 100644
--- a/README.markdown
+++ b/README.markdown
@@ -1,20 +1 @@
-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
+Under development.
\ No newline at end of file
diff --git a/main-16px.css b/main-16px.css
deleted file mode 100644
index bbfbc59..0000000
--- a/main-16px.css
+++ /dev/null
@@ -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
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.css b/main.css
new file mode 100644
index 0000000..9735685
--- /dev/null
+++ b/main.css
@@ -0,0 +1,287 @@
+/*
+*
+* 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: 1.0625em;
+ }
+}
+/*
+ * Portrait Layout
+ * zoomed to 1.125x
+ */
+@media screen and (min-width: ???px) {
+ body {
+ font-size: 1.125em;
+ }
+}
+/*
+*
+* Landscape Layout
+* ??? px
+* for modern widescreen browsers
+*
+*/
+@media screen and (min-width: ???px) {
+ body {
+ font-size: 1em;
+ width: ???px;
+ }
+}
+/*
+ * Landscape Layout
+ * zoomed to 1.0625x
+ */
+@media screen and (min-width: ???px) {
+ body {
+ font-size: 1.0625em;
+ }
+}
+/*
+ * Landscape Layout
+ * zoomed to 1.125x
+ */
+@media screen and (min-width: ???px) {
+ body {
+ font-size: 1.125em;
+ }
+}
diff --git a/main.html b/main.html
index 0541905..56b9bd3 100644
--- a/main.html
+++ b/main.html
@@ -1,16 +1,18 @@
-
+
+
-
+
-
-
-
+ Less Framework 5 Demo
+
+
+
-
+
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