diff --git a/README.md b/README.md index 7800359..76ac55f 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ ClearLESS ========= -A reuseable collection of carefully-considered LESS mixins to help speed up development and increase maintainability. +A reuseable collection of carefully-considered LESS mixins to help speed up development and increase maintainability of stylesheets in large projects. + + diff --git a/_compiled/example.css b/_compiled/example.css index 0032f47..bf7a3ff 100644 --- a/_compiled/example.css +++ b/_compiled/example.css @@ -13,10 +13,57 @@ body { padding: 20px; margin: 0; background: #DDD; + font-size: 10px; + font-family: sans-serif; + min-width: 320px; +} +p, +li { + font-size: 10px; + font-size: 1rem; +} +h1 { + font-size: 15px; + font-size: 1.5rem; +} +h2 { + font-size: 12px; + font-size: 1.2rem; } .receptacle { max-width: 1200px; margin: 0 auto; + border-bottom: 1px dashed #666; +} +.nav { + padding: 10px 0 10px 10px; +} +.nav li { + margin-bottom: 5px; + list-style: none; + padding: 0; +} +.nav a { + display: inline-block; + position: relative; + padding-left: 16px; +} +.ie6 .nav a, +.ie7 .nav a { + display: inline; + zoom: 1; +} +.nav a:before { + position: absolute; + display: block; + content: ' '; + background-image: url('/examples/sprite.png'); + background-repeat: no-repeat; + background-position: -100px -50px; + height: 11px; + width: 6px; + top: 4px; + left: 0; } /* ---- grids ---- */ .primary, @@ -29,8 +76,6 @@ body { margin-bottom: 2%; } .segment { - box-sizing: border-box; - padding: 10px; margin-bottom: 2%; overflow: hidden; } @@ -88,8 +133,13 @@ body { .section-3 .segment { width: 49.2063492063492%; } +.section-4 .segment { + width: 49.2063492063492%; +} +/* media query example */ @media all and (max-width: 40em) { - .section-3 .segment:nth-child(2n) { + .section-3 .segment:nth-child(2n), + .section-4 .segment:nth-child(2n) { margin-right: 0; float: right; } @@ -128,13 +178,28 @@ body { margin-right: 0; float: right; } + .section-4 .primary { + width: 11.11111111111111%; + padding-right: 6.349206349206349%; + } + .section-4 .secondary { + width: 11.11111111111111%; + padding-left: 6.349206349206349%; + margin-left: 6.349206349206349%; + } + .section-4 .tertiary { + width: 17.46031746031746%; + margin-left: 6.349206349206349%; + } + .section-4 .quaternary { + width: 17.46031746031746%; + padding-left: 6.349206349206349%; + margin-right: 6.349206349206349%; + } } /* Nested Grids */ .section-parent .segment { - display: inline; - float: left; width: 49.2063492063492%; - margin-right: 1.5873015873015872%; } .section-parent > .secondary { background-color: transparent; @@ -143,16 +208,19 @@ body { float: right; } .section-nested .segment { - display: inline; - float: left; width: 22.58064516129032%; margin-right: 3.225806451612903%; background: #999; } -.section-nested .segment:nth-child(4n) { +.floated .section-nested .segment > .secondary, +.floated .section-parent .segment:nth-child(4n) { margin-right: 0; float: right; } +.inline .section-nested .segment > .secondary, +.inline .section-parent .segment:nth-child(4n) { + margin-right: 0; +} /* Sprites & Icons */ .more { display: inline-block; @@ -176,13 +244,19 @@ body { top: 4px; right: 0; } -.nav li { +.icon-nav a { + display: inline-block; padding-top: 10px; padding-bottom: 10px; position: relative; padding-left: 38px; } -.nav li:before { +.ie6 .icon-nav a, +.ie7 .icon-nav a { + display: inline; + zoom: 1; +} +.icon-nav a:before { position: absolute; display: block; content: ' '; @@ -194,13 +268,28 @@ body { top: 2px; left: 0; } -.nav li.rockets:before { - background-position: 0px -50px; +.icon-nav .robots a:before { + background-position: 0px 0px; } -.nav li.runners:before { +.icon-nav .robots a:hover:before { background-position: -50px 0px; } -.nav li.ghosts:before { +.icon-nav .rockets a:before { + background-position: 0px -50px; +} +.icon-nav .rockets a:hover:before { background-position: -50px -50px; } +.icon-nav .runners a:before { + background-position: 0px -100px; +} +.icon-nav .runners a:hover:before { + background-position: -50px -100px; +} +.icon-nav .ghosts a:before { + background-position: 0px -150px; +} +.icon-nav .ghosts a:hover:before { + background-position: -50px -150px; +} /* Other Helpers */ diff --git a/examples/example.less b/examples/example.less index 9ddcee8..8907a44 100644 --- a/examples/example.less +++ b/examples/example.less @@ -1,14 +1,18 @@ @import "../mixins/all"; // Default settings override + @sprite-image: url('/examples/sprite.png'); @using-modernizr: false; @using-ieclasses: true; -@column-width: 60px; -@gutter-width: 20px; +@column-width: 60; +@gutter-width: 20; + +@base-font-size: 10; // Project settings + @mobile-width: 40em; /* ---- setup ---- */ @@ -17,11 +21,40 @@ body { padding: 20px; margin: 0; background: #DDD; + font-size: ~"@{base-font-size}px"; + font-family: sans-serif; + min-width: 320px; +} + +p, li { + .font-size-rems(1); +} + +h1 { + .font-size-rems(1.5); +} + +h2 { + .font-size-rems(1.2); } .receptacle { max-width: 1200px; margin: 0 auto; + border-bottom: 1px dashed #666; +} + +.nav { + padding: 10px 0 10px 10px; + li { + margin-bottom: 5px; + list-style: none; + padding: 0; + } + a { + .inline-block(); + .icon(2, 1, 6px, 11px, 10px, 0, 4px); + } } /* ---- grids ---- */ @@ -38,8 +71,6 @@ body { } .segment { - box-sizing: border-box; - padding: 10px; margin-bottom: 2%; overflow: hidden; } @@ -87,8 +118,18 @@ body { } } +.section-4 { + .segment { + .span(8); + } +} + + +/* media query example */ + @media all and ( max-width: @mobile-width ) { - .section-3 .segment:nth-child(2n) { + .section-3 .segment:nth-child(2n), + .section-4 .segment:nth-child(2n) { .end-column(); } } @@ -110,7 +151,7 @@ body { } .secondary { .span(6); - .end-column() + .end-column(); } } @@ -129,17 +170,40 @@ body { } .quaternary { .span(3); - .end-column() + .end-column(); } } - + + .section-4 { + .primary { + .span(2); + .post-pad(1); + } + .secondary { + .span(2); + .pre-pad(1); + .pre-push(1); + } + .tertiary { + .span(3); + .pre-push(1); + } + + .quaternary { + .span(3); + .pre-pad(1); + .post-push-end(1); + } + + } + } /* Nested Grids */ .section-parent { .segment { - .column(8); + .span(8); } > .secondary { background-color: transparent; @@ -150,37 +214,64 @@ body { .section-nested { .segment { - .column(2,8); + .span(2,8); background: #999; } - .segment:nth-child(4n) { +} + +.floated { + .section-nested .segment > .secondary, + .section-parent .segment:nth-child(4n) { .end-column(); } } +.inline { + .section-nested .segment > .secondary, + .section-parent .segment:nth-child(4n) { + .inline-end-column(); + } +} + + /* Sprites & Icons */ .more { .inline-block(); - .icon-right(2, 1, 6px, 11px, 10px, 0, 4px); -} - -.nav li { - padding-top: 10px; - padding-bottom: 10px; - .icon-left(0, 0, 28px, 28px, 10px, 0, 2px); + .right-icon(2, 1, 6px, 11px, 10px, 0, 4px); } -.nav li.rockets { - .icon-left-pos(0,1); -} - -.nav li.runners { - .icon-left-pos(1,0); -} - -.nav li.ghosts { - .icon-left-pos(1,1); +.icon-nav { + a { + .inline-block(); + padding-top: 10px; + padding-bottom: 10px; + .icon(0, 0, 28px, 28px, 10px, 0, 2px); + } + .robots a { + .icon-pos(0,0); + &:hover { + .icon-pos(1,0); + } + } + .rockets a { + .icon-pos(0,1); + &:hover { + .icon-pos(1,1); + } + } + .runners a { + .icon-pos(0,2); + &:hover { + .icon-pos(1,2); + } + } + .ghosts a { + .icon-pos(0,3); + &:hover { + .icon-pos(1,3); + } + } } /* Other Helpers */ diff --git a/examples/grids.html b/examples/grids.html index d9d0ae4..3a52e7f 100644 --- a/examples/grids.html +++ b/examples/grids.html @@ -2,7 +2,8 @@ - + + @@ -72,6 +73,26 @@ +
+ +
+

primary

+
+ +
+

secondary

+
+ +
+

tertiary

+
+ +
+

quaternary

+
+ +
+
@@ -130,6 +151,27 @@
+
+ +
+

primary

+
+ +
+

secondary

+
+ +
+

tertiary

+
+ +
+

quaternary

+
+ +
+ + diff --git a/examples/index.html b/examples/index.html index e688c50..4fbb1cd 100644 --- a/examples/index.html +++ b/examples/index.html @@ -2,6 +2,7 @@ + @@ -11,12 +12,20 @@ -

ClearLESS Examples

+
+

ClearLESS Examples

+
+ +
- + + +
diff --git a/examples/nested-grids.html b/examples/nested-grids.html index 7c9b4b6..dd20607 100644 --- a/examples/nested-grids.html +++ b/examples/nested-grids.html @@ -2,6 +2,7 @@ + @@ -75,5 +76,65 @@ +
+ +

Inline

+ +
+ +
+

primary

+
+ +
+

secondary

+
+ +
+

tertiary

+
+ +
+

quaternary

+
+ +
+ + +
+ +
+

primary

+
+ +
+ +
+ +
+

primary

+
+ +
+

secondary

+
+ +
+

tertiary

+
+ +
+

quaternary

+
+ +
+ +
+ +
+ +
+ + diff --git a/examples/other.html b/examples/other.html new file mode 100644 index 0000000..b992a88 --- /dev/null +++ b/examples/other.html @@ -0,0 +1,28 @@ + + + + + + + + + + ClearLESS Examples + + + +
+ +

Other Examples

+ +
+ + +
+ + + +
+ + + diff --git a/examples/sprite.png b/examples/sprite.png index 46bebcc..9d704cb 100644 Binary files a/examples/sprite.png and b/examples/sprite.png differ diff --git a/examples/sprites.html b/examples/sprites.html index abf1f5a..c766cb3 100644 --- a/examples/sprites.html +++ b/examples/sprites.html @@ -2,6 +2,7 @@ + @@ -10,13 +11,21 @@ -

Sprites & Icons

+
+ +

Sprites & Icons

+ +

Read more

-
+ +
+ +