From b88e9fe316f5deca80e7051cc9d8b1cb51e0ea79 Mon Sep 17 00:00:00 2001 From: sylbal Date: Fri, 19 Oct 2012 09:23:03 +0200 Subject: [PATCH 1/6] 960 Grid system implementation --- helpless.1.0.1.less | 168 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 167 insertions(+), 1 deletion(-) diff --git a/helpless.1.0.1.less b/helpless.1.0.1.less index f87747b..a565b46 100644 --- a/helpless.1.0.1.less +++ b/helpless.1.0.1.less @@ -811,6 +811,172 @@ box-sizing: border-box; } } + + /************************************ + * Grid 960gs, see http://960.gs + ************************************/ + .grid960gs { + + /************************************ + * Make + * + * @what?: Defines the base variables needed + * for the 960 grid system. + * + * @params: @colnum, default = 16 + * @colgutter, default = 20 + * @margin, default = 10 + ************************************/ + .make(@colnum: 16, @colgutter: 20, @margin: 10) { + @col-width: (960px - (@colgutter * @colnum)) / @colnum; + @gutter-width: 0px + @colgutter; + @grid-margin: 0px + @margin; + margin-left: auto; + margin-right: auto; + width: 960px; + } + + /************************************ + * 12 + * + * @what?: Predefined 12 cols grid maker + * + ************************************/ + .12() { + .make(12); + } + + /************************************ + * 16 + * + * @what?: Predefined 16 cols grid maker + * + ************************************/ + .16() { + .make(16); + } + + /************************************ + * 24 + * + * @what?: Predefined 24 cols grid maker + * + ************************************/ + .24() { + .make(24, 10); + } + + /************************************ + * Row + * + * @what?: Defines an element as a row. + * clears all clearfixes all columns + * directly inside. + * + ************************************/ + .row() { + .clearfix(); + display: block; + /* + width: 100% - @col-gutter-percent; + overflow-y: visible; + */ + margin-left: @grid-margin; + margin-right: @grid-margin; + } + + /************************************ + * Col + * + * @what?: Defines an element as a column. + * Sets the width depending on the + * supplied arguments and the width + * set in .grid960gs() + * + * @params: @colSpan, default = 1 + * + ************************************/ + .col(@colSpan: 1) { + display: inline; + float: left; + width: 0px + (@col-width * @colSpan) + (@gutter-width * (@colSpan - 1)); + margin-left: 0px + (@gutter-width/2); + margin-right: 0px + (@gutter-width/2); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + /************************************ + * alpha + * + * @what?: Removes left margin + * + ************************************/ + .alpha() { + margin-left: 0; + } + + /************************************ + * omega + * + * @what?: Removes rigt margin + * + ************************************/ + .omega() { + margin-right: 0; + } + + /************************************ + * prefix + * + * @what?: Adds padding before col + * + * @params: @colSpan, default = 1 + * + ************************************/ + .prefix(@colSpan: 1) { + padding-left: 0px + (@colSpan * (@col-width + @gutter-width)); + } + + /************************************ + * suffix + * + * @what?: Adds padding after col + * + * @params: @colSpan, default = 1 + * + ************************************/ + .suffix(@colSpan: 1) { + padding-right: 0px + (@colSpan * (@col-width + @gutter-width)); + } + + /************************************ + * push + * + * @what?: Pushes cols on the right + * + * @params: @colSpan, default = 1 + * + ************************************/ + .push(@colSpan: 1) { + position:relative; + left: 0px + (@colSpan * (@col-width + @gutter-width)); + } + + /************************************ + * pull + * + * @what?: Pulls cols on the left + * + * @params: @colSpan, default = 1 + * + ************************************/ + .pull(@colSpan: 1) { + position:relative; + left: 0px - (@colSpan * (@col-width + @gutter-width)); + } + } /*********************************** * TYPOGRAPHY @@ -970,4 +1136,4 @@ } } } -} \ No newline at end of file +} From 6dc60e274ff96636dfd29f039c006cfb7ed89bc8 Mon Sep 17 00:00:00 2001 From: sylbal Date: Mon, 1 Jul 2013 15:00:14 +0200 Subject: [PATCH 2/6] Updated gitignore --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 496ee2c..d825d8a 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.DS_Store \ No newline at end of file +.DS_Store +.project From 3b67b201c5854f45847f95565492faa4db61125d Mon Sep 17 00:00:00 2001 From: sylbal Date: Mon, 1 Jul 2013 15:01:57 +0200 Subject: [PATCH 3/6] File rename to remove version info --- helpless.1.0.1.less | 1139 ------------------------------------------- 1 file changed, 1139 deletions(-) delete mode 100644 helpless.1.0.1.less diff --git a/helpless.1.0.1.less b/helpless.1.0.1.less deleted file mode 100644 index a565b46..0000000 --- a/helpless.1.0.1.less +++ /dev/null @@ -1,1139 +0,0 @@ -/* -------------------------------------------------------------------------------------- -* HelpLess is released under the MIT license. -* -* Copyright (C) 2011 by Matt Woodfield -* -* Permission is hereby granted, free of charge, to any person obtaining a copy of this -* software and associated documentation files (the "Software"), to deal in the Software -* without restriction, including without limitation the rights to use, copy, modify, -* merge, publish, distribute, sublicense, and/or sell copies of the Software, and to -* permit persons to whom the Software is furnished to do so, subject to the -* following conditions: -* -* The above copyright notice and this permission notice shall be included in all copies -* or substantial portions of the Software. -* -* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, -* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A -* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF -* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE -* OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -* -------------------------------------------------------------------------------------- -* -* HelpLess - A lot of Less help -* -------------------------------------------------------------------------------------- -* -* @What is it: -* HelpLess is a Helper Library for the brilliant LESS dynamic stylesheet language. -* Read more about LESS: http://lesscss.org/ -* -* I have tried to make HelpLess as all-encompasing as possible with support for dynamic -* grids and page starter themes as well as all the css3 features I could think of. -* Unlike other libraries, HelpLess has an invisible footprint until you call a mixin -* so if you import HelpLess but don't use it, it will not increase your compiled file size -* -* @thanks: -* Eric Meyer for html reset - http://meyerweb.com/eric/tools/css/reset/ -* Necolas for normalize - https://github.com/necolas/normalize.css -* -* @How to use: -* Import helpless.x.x.x.less into your main style.less file. -* -* @Author: -* Matt Woodfield - @m6tt -* -* @Reference: -* ------------------------------------------------------------------------------ -* BASICS => syntax -* ------------------------------------------------------------------------------ -* - .reset => #hl.reset() - call outside of element -* - .normalize => #hl.normalize - call outside of element -* - .clearfix => #hl.clearfix() -* - .centered => #hl.centered(width) -* - .border => #hl.border(color) -* - .opacity => #hl.opacity(value) -* - .round-all-corners => #hl.round-all-corners(radius) -* - .rounded-corners => #hl.rounded-corners(topLeft, topRight, bottomRight, bottomLeft) -* - .transition => #hl.transition(property, duration, ease, delay) -* - .drop-shadow => #hl.drop-shadow(x, y, blur, color) -* - .inner-shadow => #hl.inner-shadow(x, y, blur, color) -* - .text-shadow => #hl.text-shadow(x, y, blur, color) -* - .background-gradient => #hl.background-gradient(colorFrom, colorTo, fallbackColor, fallbackImageUrl) -* - .scale => #hl.scale(amount) -* - .scaleX => #hl.scaleX(amount) -* - .scaleY => #hl.scaleY(amount) -* - .rotate => #hl.rotate(degrees) -* - .rotateX => #hl.rotateX(degrees) -* - .rotateY => #hl.rotateY(degrees) -* - .skew => #hl.skew(angleX, angleY) -* - .skewX => #hl.skewX(angleX) -* - .skewY => #hl.skewY(angleY) -* - .translate => #hl.translate(x, y) -* - .translateX => #hl.translateX(x) -* - .translateY => #hl.translateY(y) -* - .matrix => #hl.matrix(n, n, n, n, n, n) -* -* ------------------------------------------------------------------------------ -* GRID => syntax -* ------------------------------------------------------------------------------ -* - .grid => namespace, do not call directly, use .make or one of the predefined grid makers -* - .make => #hl.grid.make(width, colNumber, gutterWidth) -* - .1200 => #hl.grid.1200(); -* - .1120 => #hl.grid.1120(); -* - .1040 => #hl.grid.1040(); -* - .960 => #hl.grid.960(); -* - .880 => #hl.grid.880(); -* - .800 => #hl.grid.800(); -* - .720 => #hl.grid.720(); -* - .640 => #hl.grid.640(); -* - .560 => #hl.grid.560(); -* - .480 => #hl.grid.480(); -* - .400 => #hl.grid.400(); -* - .320 => #hl.grid.320(); -* - .240 => #hl.grid.240(); -* - .row => #hl.grid.row(); -* - .col => #hl.grid.col(colSpan); -* -* --------------------------------------- -* TYPOGRAPHY -* --------------------------------------- -* - .typo => namespace, do not call directly -* - .serif => #hl.typo.serif(webfont-name-optional); -* - .sans => #hl.typo.sans(webfont-name-optional); -* - .columns => #hl.typo.columns(count, gap) -* -* --------------------------------------- -* IMAGES -* --------------------------------------- -* - .img => namespace, do not call directly -* - .responsive => #hl.img.responsive(); -* - .framed => #hl.img.framed(); - -* --------------------------------------- -* USER INTERFACE -* --------------------------------------- -* - .ui => namespace, do not call directly -* - .themes => namespace, do not call directly -* - .light => #hl.ui.themes.light(); - call within element -* - .dark => #hl.ui.themes.dark(); - call within element -* - .list => namespace, do not call directly -* - .subtle => #hl.list.subtle(); - call within
    element -* - .horizontal => #hl.list.horizontal(); - call within
      element -*/ - -#hl { - - /************************************ - * Meyer Reset - * http://meyerweb.com/eric/tools/css/reset/ - ************************************/ - .reset() { - /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 license: none(public domain) */ - html, body, div, span, applet, object, iframe, - h1, h2, h3, h4, h5, h6, p, blockquote, pre, - a, abbr, acronym, address, big, cite, code, - del, dfn, em, img, ins, kbd, q, s, samp, - small, strike, strong, sub, sup, tt, var, - b, u, i, center, - dl, dt, dd, ol, ul, li, - fieldset, form, label, legend, - table, caption, tbody, tfoot, thead, tr, th, td, - article, aside, canvas, details, embed, - figure, figcaption, footer, header, hgroup, - menu, nav, output, ruby, section, summary, - time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } - /* HTML5 display-role reset for older browsers */ - article, aside, details, figcaption, figure, - footer, header, hgroup, menu, nav, section { display: block; } - body { line-height: 1; } - ol, ul { list-style: none; } - blockquote, q { quotes: none; } - blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } - table { border-collapse: collapse; border-spacing: 0; } - } - - /************************************ - * Normalize by necolas - * https://github.com/necolas/normalize.css - ************************************/ - .normalize() { - /*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */ - article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;} - audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;} - [hidden]{display:none;} - /* - * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units - * http://clagnut.com/blog/348/#c790 - * 2. Keeps page centred in all browsers regardless of content height - * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom - * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ - */ - html {font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} - body{margin:0;font-size:13px;line-height:1.231;}/*Added font-size and line-height addition as seen in html5 boilerplate*/ - body,button,input,select,textarea{font-family:sans-serif;} - a{color:#00e;} - a:visited{color:#551a8b;} - a:focus{outline:thin dotted;} - a:hover,a:active{outline:0;} - abbr[title]{border-bottom:1px dotted;} - b,strong{font-weight:bold;} - blockquote{margin:1em 40px;} - dfn{font-style:italic;} - mark{background:#ff0;color:#000;} - /*Corrects font family set oddly in IE6, S4/5, Chrome en.wikipedia.org/wiki/User:Davidgothberg/Test59*/ - pre,code,kbd,samp{font-family: monospace, serif;_font-family:'courier new',monospace;font-size:1em;} - pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;} - q{quotes:none;} - q:before,q:after{content:'';content:none;}small{font-size:75%;} - sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} - sup{top:-0.5em;} - sub{bottom:-0.25em;} - ul,ol{margin:1em 0;padding:0 0 0 40px;} - dd{margin:0 0 0 40px;} - nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0;}/*Cleared margin and padding as seen in html5 boilerplate*/ - img{border:0;-ms-interpolation-mode:bicubic;} - svg:not(:root){overflow:hidden;} - figure{margin:0;} - form{margin:0;} - fieldset{margin:0 2px;padding:0.35em 0.625em 0.75em;} - legend{border:0;*margin-left:-7px;} - button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} - button,input {line-height: normal;*overflow:visible;} - table button,table input{*overflow:auto;} - 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;padding:0;} - input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing: content-box;} - input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} - button::-moz-focus-inner,input::-moz-focus-inner {border:0;padding:0;} - textarea {overflow:auto;vertical-align:top;} - table {border-collapse:collapse;border-spacing:0;} - } - - /************************************ - * Clearfix - * - * what?: Contains floats, for more info see h5bp.com/q. - * Removes the need to add .clearfix as a class - * to your elements. - * - ************************************/ - .clearfix() { - &:before { content: ''; display: block; } - &:after { content: ''; display: table; clear: both; } - zoom: 1; - } - - /************************************ - * Centered - * - * @what?: Center your object with an - * automatic margin - * - * @params: width, default = 960px - * - ************************************/ - .centered(@width: 960px) { - width: @width; - margin: 0 auto; - } - - /************************************ - * Border - * - * @what?: Add a 1px solid border - * super quick. - * - * @params: colour, default = #000 - * - ************************************/ - .border(@colour: #000) { - border: 1px solid @colour; - } - - /************************************ - * Opacity - * - * @what?: Add opacity to an HTML element that works - * in all browsers including ie6+ - * - * @params: value, default = .5 - * - ************************************/ - .opacity(@value: .5) { - opacity: @value; - filter: ~'alpha(opacity=(@value*100))'; - filter: ~'progid:DXImageTransform.Microsoft.Alpha(opacity=(@value*100))'; - -ms-filter: ~'"progid:DXImageTransform.Microsoft.Alpha(opacity=(@value*100))"'; - } - - /************************************ - * Round all corners - * - * @what?: Rounds every corner equally - * - * @params: radius, default = 5px - * - ************************************/ - .round-all-corners(@radius: 5px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; - } - - /************************************ - * Rounded corners - * - * @what?: Round each corner individually - * - * @params: topLeft, default = 5px - * topRight, default = 5px - * bottomRight, default = 5px - * bottomLeft, default = 5px - * - ************************************/ - .rounded-corners(@topLeft: 5px, @topRight: 5px, @bottomRight: 5px, @bottomLeft: 5px) { - -moz-border-radius-topleft: @topLeft; - -moz-border-radius-topright: @topRight; - -moz-border-radius-bottomright: @bottomRight; - -moz-border-radius-bottomleft: @bottomLeft; - -webkit-border-radius: @topLeft @topRight @bottomRight @bottomLeft; - border-radius: @topLeft @topRight @bottomRight @bottomLeft; - } - - /************************************ - * Transition - * - * @what?: Defines a CSS3 transition - * - * @params: property, default = all - * duration, default = .5s - * ease, default = linear - * delay, default = .0s - * - ************************************/ - .transition(@property: all, @duration: .5s, @ease: linear, @delay: .0s) { - -webkit-transition: @arguments; - -moz-transition: @arguments; - -o-transition: @arguments; - transition: @arguments; - } - - /************************************ - * Drop shadow - * - * @what?: Adds an outer shadow to the - * html element. To add a shadow - * to text use #hl.text-shadow(...) - * - * @params: x, default = 0px - * y, default = 1px - * blur, default = 1px - * colour, default = rgba(0, 0, 0, .6) - * - ************************************/ - .drop-shadow(@x: 0px, @y: 1px, @blur: 1px, @colour: rgba(0, 0, 0, .6)) { - -webkit-box-shadow: @arguments; - -moz-box-shadow: @arguments; - box-shadow: @arguments; - } - - /************************************ - * Inner shadow - * - * @what: Adds an inner shadow to the - * html element. - * - * @params: x, default = 0px - * y, default = 1px - * blur, default = 1px - * colour, default = rgba(0, 0, 0, .6) - * - ************************************/ - .inner-shadow(@x: 0px, @y: 1px, @blur: 1px, @colour: rgba(0, 0, 0, .6)) { - -webkit-box-shadow: inset @arguments; - -moz-box-shadow: inset @arguments; - box-shadow: inset @arguments; - } - - /************************************ - * Text shadow - * - * @what?: Adds an outer shadow to text - * - * @params: x, default = 1px - * y, default = 1px - * blur, default = 1px - * colour, default = rgba(0, 0, 0, .6) - * - ************************************/ - .text-shadow(@x: 1px, @y: 1px, @blur: 1px, @colour: rgba(0, 0, 0, .6)) { - text-shadow: @arguments; - } - - /************************************ - * Background Gradient - * - * @what?: Adds a background gradient to - * an HTML element - * - * @params: colourFrom, default = #bbb - * colourTo, default = #f1f1f1 - * fallbackColour, default = #f1f1f1 - * fallbackImageUrl, default = '' - * - ************************************/ - .background-gradient(@colourfrom: #bbb, @colourTo: #f1f1f1, @fallbackColour: #f1f1f1, @fallbackImageUrl: '') { - background-color: @fallbackColour; - background-image: url("@fallbackImage"); - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@colourfrom), to(@colourTo)); - background-image: -webkit-linear-gradient(bottom, @colourfrom, @colourTo); - background-image: -moz-linear-gradient(bottom, @colourfrom, @colourTo); - background-image: -ms-linear-gradient(bottom, @colourfrom, @colourTo); - background-image: -o-linear-gradient(bottom, @colourfrom, @colourTo); - /* For Internet Explorer 5.5 - 7 */ - filter: ~'progid:DXImageTransform.Microsoft.gradient(startColorstr=@colourfrom, endColorstr=@colourTo)'; - /* For Internet Explorer 8 and newer */ - -ms-filter: ~'"progid:DXImageTransform.Microsoft.gradient(startColorstr=@colourfrom, endColorstr=@colourTo)"'; - } - - /************************************ - * Scale - * - * @what?: Defines a 2D scale transformation - * - * @params: amount, default = 1 - * - ************************************/ - .scale(@amount: 1) { - transform:scale(@amount); - -ms-transform:scale(@amount); - -moz-transform:scale(@amount); - -webkit-transform:scale(@amount); - -o-transform:scale(@amount); - } - - /************************************ - * ScaleX - * - * @what?: Defines a scale transformation - * by giving a value for the X-axis - * - * @params: x, default = 1 - * - ************************************/ - .scaleX(@x: 1) { - transform:scaleX(@x); - -ms-transform:scaleX(@x); - -moz-transform:scaleX(@x); - -webkit-transform:scaleX(@x); - -o-transform:scaleX(@x); - } - - /************************************ - * ScaleY - * - * @what?: Defines a scale transformation - * by giving a value for the Y-axis - * - * @params: y, default = 1 - * - ************************************/ - .scaleY(@y: 1) { - transform:scaleY(@y); - -ms-transform:scaleY(@y); - -moz-transform:scaleY(@y); - -webkit-transform:scaleY(@y); - -o-transform:scaleY(@y); - } - - /************************************ - * Rotate - * - * @what?: Defines a 2D rotation, the angle - * is specified in the parameter - * - * @params: degrees, default = 90deg - * - ************************************/ - .rotate(@degrees: 90deg) { - transform:rotate(@degrees); - -ms-transform:rotate(@degrees); - -moz-transform:rotate(@degrees); - -webkit-transform:rotate(@degrees); - -o-transform:rotate(@degrees); - } - - /************************************ - * RotateX - * - * @what?: Defines a 3D rotation along the X-axis - * - * @params: degrees, default = 90deg - * - ************************************/ - .rotateX(@degrees: 90deg) { - transform:rotateX(@degrees); - -ms-transform:rotateX(@degrees); - -moz-transform:rotateX(@degrees); - -webkit-transform:rotateX(@degrees); - -o-transform:rotateX(@degrees); - } - - /************************************ - * RotateY - * - * @what?: Defines a 3D rotation along the Y-axis - * - * @params: degrees, default = 90deg - * - ************************************/ - .rotateY(@degrees: 90deg) { - transform:rotateY(@degrees); - -ms-transform:rotateY(@degrees); - -moz-transform:rotateY(@degrees); - -webkit-transform:rotateY(@degrees); - -o-transform:rotateY(@degrees); - } - - /************************************ - * Skew - * - * @what?: Defines a 2D skew transformation - * along the X- and the Y-axis - * - * @params: angleX, default = 10deg - * angleY, default = 10deg - * - ************************************/ - .skew(@angleX: 10deg, @angleY: 10deg) { - transform:skew(@angleX, @angleY); - -ms-transform:skew(@angleX, @angleY); - -moz-transform:skew(@angleX, @angleY); - -webkit-transform:skew(@angleX, @angleY); - -o-transform:skew(@angleX, @angleY); - } - - /************************************ - * SkewX - * - * @what?: Defines a 2D skew transformation - * along the X-axis - * - * @params: angleX, default = 10deg - * - ************************************/ - .skewX(@angleX: 10deg) { - transform:skewX(@angleX); - -ms-transform:skewX(@angleX); - -moz-transform:skewX(@angleX); - -webkit-transform:skewX(@angleX); - -o-transform:skewX(@angleX); - } - - /************************************ - * SkewY - * - * @what?: Defines a 2D skew transformation - * along the Y-axis - * - * @params: angleY, default = 10deg - * - ************************************/ - .skewY(@angleY: 10deg) { - transform:skewY(@angleY); - -ms-transform:skewY(@angleY); - -moz-transform:skewY(@angleY); - -webkit-transform:skewY(@angleY); - -o-transform:skewY(@angleY); - } - - /************************************ - * Translate - * - * @what?: Defines a 2D translation - * - * @params: x, default = 10px - * y, default = 10px - * - ************************************/ - .translate(@x: 10px, @y: 10px) { - transform:translate(@x, @y); - -ms-transform:translate(@x, @y); - -moz-transform:translate(@x, @y); - -webkit-transform:translate(@x, @y); - -o-transform:translate(@x, @y); - } - - /************************************ - * TranslateX - * - * @what?: Defines a translation, using - * only the value for the X-axis - * - * @params: x, default = 10px - * - ************************************/ - .translateX(@x: 0px) { - transform:translateX(@x); - -ms-transform:translateX(@x); - -moz-transform:translateX(@x); - -webkit-transform:translateX(@x); - -o-transform:translateX(@x); - } - - /************************************ - * TranslateY - * - * @what?: Defines a translation, using - * only the value for the Y-axis - * - * @params: y, default = 10px - * - ************************************/ - .translateY(@y: 0px) { - transform:translateY(@y); - -ms-transform:translateY(@y); - -moz-transform:translateY(@y); - -webkit-transform:translateY(@y); - -o-transform:translateY(@y); - } - - /************************************ - * Matrix - * - * @what?: Defines a 2D transformation, - * using a matrix of six values - * - * @params: n1, default = 0 - * n2, default = 0 - * n3, default = 0 - * n4, default = 0 - * n5, default = 0 - * n6, default = 0 - * - ************************************/ - .matrix(@n1: 0, @n2: 0, @n3: 0, @n4: 0, @n5: 0, @n6: 0) { - transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); - -ms-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); - -moz-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); - -webkit-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); - -o-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); - } - - /************************************ - * Grid - ************************************/ - .grid { - - /************************************ - * Make - * - * @what?: Defines the base variables needed - * for the HelpLess grid system. - * - * @params: @width, default = 960 - * @colnum, default = 16 - * @colgutter, default = 10 - * - ************************************/ - .make(@width: 960, @colnum: 16, @colgutter: 10) { - width: 0px + @width; - @col-width: 100% / @colnum; - @col-gutter-percent: 0% + ((@colgutter / @width) * 100); - } - - /************************************ - * 1200 - * - * @what?: Predefined grid maker - * - ************************************/ - .1200() { - .make(1200); - } - - /************************************ - * 1120 - * - * @what?: Predefined grid maker - * - ************************************/ - .1120() { - .make(1120); - } - - /************************************ - * 1040 - * - * @what?: Predefined grid maker - * - ************************************/ - .1040() { - .make(1040); - } - - /************************************ - * 960 - * - * @what?: Predefined grid maker - * - ************************************/ - .960() { - .make(960); - } - - /************************************ - * 880 - * - * @what?: Predefined grid maker - * - ************************************/ - .880() { - .make(880); - } - - /************************************ - * 800 - * - * @what?: Predefined grid maker - * - ************************************/ - .800() { - .make(800); - } - - /************************************ - * 720 - * - * @what?: Predefined grid maker - * - ************************************/ - .720() { - .make(720); - } - - /************************************ - * 640 - * - * @what?: Predefined grid maker - * - ************************************/ - .640() { - .make(640); - } - - /************************************ - * 560 - * - * @what?: Predefined grid maker - * - ************************************/ - .560() { - .make(560); - } - - /************************************ - * 480 - * - * @what?: Predefined grid maker - * - ************************************/ - .480() { - .make(480); - } - - /************************************ - * 400 - * - * @what?: Predefined grid maker - * - ************************************/ - .400() { - .make(400); - } - - /************************************ - * 320 - * - * @what?: Predefined grid maker - * - ************************************/ - .320() { - .make(320); - } - - /************************************ - * 240 - * - * @what?: Predefined grid maker - * - ************************************/ - .240() { - .make(240); - } - - /************************************ - * Row - * - * @what?: Defines an element as a row. - * clears all clearfixes all columns - * directly inside. - * - ************************************/ - .row() { - .clearfix(); - display: block; - width: 100%; - overflow-y: visible; - margin-left: -(@col-gutter-percent / 2); - } - - /************************************ - * Col - * - * @what?: Defines an element as a column. - * Sets the width depending on the - * supplied arguments and the width - * set in .grid() - * - * @params: @colSpan, default = 1 - * - ************************************/ - .col(@colSpan: 1) { - float: left; - display: block; - min-width: @col-width * @colSpan; - padding: 0 0 0 @col-gutter-percent !important; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - } - - /************************************ - * Grid 960gs, see http://960.gs - ************************************/ - .grid960gs { - - /************************************ - * Make - * - * @what?: Defines the base variables needed - * for the 960 grid system. - * - * @params: @colnum, default = 16 - * @colgutter, default = 20 - * @margin, default = 10 - ************************************/ - .make(@colnum: 16, @colgutter: 20, @margin: 10) { - @col-width: (960px - (@colgutter * @colnum)) / @colnum; - @gutter-width: 0px + @colgutter; - @grid-margin: 0px + @margin; - margin-left: auto; - margin-right: auto; - width: 960px; - } - - /************************************ - * 12 - * - * @what?: Predefined 12 cols grid maker - * - ************************************/ - .12() { - .make(12); - } - - /************************************ - * 16 - * - * @what?: Predefined 16 cols grid maker - * - ************************************/ - .16() { - .make(16); - } - - /************************************ - * 24 - * - * @what?: Predefined 24 cols grid maker - * - ************************************/ - .24() { - .make(24, 10); - } - - /************************************ - * Row - * - * @what?: Defines an element as a row. - * clears all clearfixes all columns - * directly inside. - * - ************************************/ - .row() { - .clearfix(); - display: block; - /* - width: 100% - @col-gutter-percent; - overflow-y: visible; - */ - margin-left: @grid-margin; - margin-right: @grid-margin; - } - - /************************************ - * Col - * - * @what?: Defines an element as a column. - * Sets the width depending on the - * supplied arguments and the width - * set in .grid960gs() - * - * @params: @colSpan, default = 1 - * - ************************************/ - .col(@colSpan: 1) { - display: inline; - float: left; - width: 0px + (@col-width * @colSpan) + (@gutter-width * (@colSpan - 1)); - margin-left: 0px + (@gutter-width/2); - margin-right: 0px + (@gutter-width/2); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - - /************************************ - * alpha - * - * @what?: Removes left margin - * - ************************************/ - .alpha() { - margin-left: 0; - } - - /************************************ - * omega - * - * @what?: Removes rigt margin - * - ************************************/ - .omega() { - margin-right: 0; - } - - /************************************ - * prefix - * - * @what?: Adds padding before col - * - * @params: @colSpan, default = 1 - * - ************************************/ - .prefix(@colSpan: 1) { - padding-left: 0px + (@colSpan * (@col-width + @gutter-width)); - } - - /************************************ - * suffix - * - * @what?: Adds padding after col - * - * @params: @colSpan, default = 1 - * - ************************************/ - .suffix(@colSpan: 1) { - padding-right: 0px + (@colSpan * (@col-width + @gutter-width)); - } - - /************************************ - * push - * - * @what?: Pushes cols on the right - * - * @params: @colSpan, default = 1 - * - ************************************/ - .push(@colSpan: 1) { - position:relative; - left: 0px + (@colSpan * (@col-width + @gutter-width)); - } - - /************************************ - * pull - * - * @what?: Pulls cols on the left - * - * @params: @colSpan, default = 1 - * - ************************************/ - .pull(@colSpan: 1) { - position:relative; - left: 0px - (@colSpan * (@col-width + @gutter-width)); - } - } - - /*********************************** - * TYPOGRAPHY - ***********************************/ - .typo { - - /************************************ - * Serif - * - * @what?: Quickly set your font family - * as a serif set - * - * @params: @webfont, default = none - * - ************************************/ - .serif(@webfont) { - font-family: @webfont, georgia, times, serif; - } - - /************************************ - * Serif - * - * @what?: Quickly set your font family - * - * @params: @webfont, default = none - * - ************************************/ - .sans(@webfont) { - font-family: @webfont, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - } - - /************************************ - * Columns - * - * @what?: Sets CSS3 columns within - * block of html text - * - * @params: count, default = 1 - * gap, default = 10px - * - ************************************/ - .columns(@count: 1, @gap: 10px) { - -moz-column-count: @count; - -moz-column-gap: @gap; - -webkit-column-count: @count; - -webkit-column-gap: @gap; - column-count: @count; - column-gap: @gap; - } - - } - - /*********************************** - * IMAGE - ***********************************/ - .img { - - /************************************ - * Responsive - * - * @what?: Set image max-width: 100% - * - ************************************/ - .responsive() { - max-width: 100%; - } - - /************************************ - * Framed - * - * @what?: Add a quick 10px frame to your image - * - ************************************/ - .framed() { - border: 1px solid #ccc; - padding: 9px; - .drop-shadow(); - outline: none; - } - - } - - /*********************************** - * UI - ***********************************/ - .ui { - - /*********************************** - * PREDEFINED THEMES - ***********************************/ - .themes { - - /*********************************** - * Theme: Light - * - * @what?: Quickly style the base elements - * of your page - * - ***********************************/ - .light() { - - background-color: #fff; - color: #555; - .text-shadow(1px, 1px, 1px, #fff); - - } - - /*********************************** - * Theme: Dark - * - * @what?: Quickly style the base elements - * of your page - * - ***********************************/ - .dark() { - - background-color: #333; - color: #ccc; - .text-shadow(1px, 1px, 1px, #333); - } - } - - /*********************************** - * LISTS - ***********************************/ - .list { - - /*********************************** - * Subtle - * - * @what?: Quickly removes the styling - * from a list - * - ***********************************/ - .subtle() { - list-style: none; - margin: 0; - padding: 0; - } - - /*********************************** - * Horizontal - * - * @what?: Creates a horizontal list, - * useful for styling your site nav - * - ***********************************/ - .horizontal(@itemSpacing: 10px) { - .subtle(); - .clearfix(); - - li { - float: left; - display: block; - margin-right: @itemSpacing; - } - } - } - } -} From 0399da5a75b489819458f8d1f98bd204a64d7272 Mon Sep 17 00:00:00 2001 From: sylbal Date: Mon, 1 Jul 2013 15:02:14 +0200 Subject: [PATCH 4/6] File rename to remove version info --- helpless.less | 1139 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1139 insertions(+) create mode 100644 helpless.less diff --git a/helpless.less b/helpless.less new file mode 100644 index 0000000..a565b46 --- /dev/null +++ b/helpless.less @@ -0,0 +1,1139 @@ +/* -------------------------------------------------------------------------------------- +* HelpLess is released under the MIT license. +* +* Copyright (C) 2011 by Matt Woodfield +* +* Permission is hereby granted, free of charge, to any person obtaining a copy of this +* software and associated documentation files (the "Software"), to deal in the Software +* without restriction, including without limitation the rights to use, copy, modify, +* merge, publish, distribute, sublicense, and/or sell copies of the Software, and to +* permit persons to whom the Software is furnished to do so, subject to the +* following conditions: +* +* The above copyright notice and this permission notice shall be included in all copies +* or substantial portions of the Software. +* +* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, +* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A +* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF +* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE +* OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +* -------------------------------------------------------------------------------------- +* +* HelpLess - A lot of Less help +* -------------------------------------------------------------------------------------- +* +* @What is it: +* HelpLess is a Helper Library for the brilliant LESS dynamic stylesheet language. +* Read more about LESS: http://lesscss.org/ +* +* I have tried to make HelpLess as all-encompasing as possible with support for dynamic +* grids and page starter themes as well as all the css3 features I could think of. +* Unlike other libraries, HelpLess has an invisible footprint until you call a mixin +* so if you import HelpLess but don't use it, it will not increase your compiled file size +* +* @thanks: +* Eric Meyer for html reset - http://meyerweb.com/eric/tools/css/reset/ +* Necolas for normalize - https://github.com/necolas/normalize.css +* +* @How to use: +* Import helpless.x.x.x.less into your main style.less file. +* +* @Author: +* Matt Woodfield - @m6tt +* +* @Reference: +* ------------------------------------------------------------------------------ +* BASICS => syntax +* ------------------------------------------------------------------------------ +* - .reset => #hl.reset() - call outside of element +* - .normalize => #hl.normalize - call outside of element +* - .clearfix => #hl.clearfix() +* - .centered => #hl.centered(width) +* - .border => #hl.border(color) +* - .opacity => #hl.opacity(value) +* - .round-all-corners => #hl.round-all-corners(radius) +* - .rounded-corners => #hl.rounded-corners(topLeft, topRight, bottomRight, bottomLeft) +* - .transition => #hl.transition(property, duration, ease, delay) +* - .drop-shadow => #hl.drop-shadow(x, y, blur, color) +* - .inner-shadow => #hl.inner-shadow(x, y, blur, color) +* - .text-shadow => #hl.text-shadow(x, y, blur, color) +* - .background-gradient => #hl.background-gradient(colorFrom, colorTo, fallbackColor, fallbackImageUrl) +* - .scale => #hl.scale(amount) +* - .scaleX => #hl.scaleX(amount) +* - .scaleY => #hl.scaleY(amount) +* - .rotate => #hl.rotate(degrees) +* - .rotateX => #hl.rotateX(degrees) +* - .rotateY => #hl.rotateY(degrees) +* - .skew => #hl.skew(angleX, angleY) +* - .skewX => #hl.skewX(angleX) +* - .skewY => #hl.skewY(angleY) +* - .translate => #hl.translate(x, y) +* - .translateX => #hl.translateX(x) +* - .translateY => #hl.translateY(y) +* - .matrix => #hl.matrix(n, n, n, n, n, n) +* +* ------------------------------------------------------------------------------ +* GRID => syntax +* ------------------------------------------------------------------------------ +* - .grid => namespace, do not call directly, use .make or one of the predefined grid makers +* - .make => #hl.grid.make(width, colNumber, gutterWidth) +* - .1200 => #hl.grid.1200(); +* - .1120 => #hl.grid.1120(); +* - .1040 => #hl.grid.1040(); +* - .960 => #hl.grid.960(); +* - .880 => #hl.grid.880(); +* - .800 => #hl.grid.800(); +* - .720 => #hl.grid.720(); +* - .640 => #hl.grid.640(); +* - .560 => #hl.grid.560(); +* - .480 => #hl.grid.480(); +* - .400 => #hl.grid.400(); +* - .320 => #hl.grid.320(); +* - .240 => #hl.grid.240(); +* - .row => #hl.grid.row(); +* - .col => #hl.grid.col(colSpan); +* +* --------------------------------------- +* TYPOGRAPHY +* --------------------------------------- +* - .typo => namespace, do not call directly +* - .serif => #hl.typo.serif(webfont-name-optional); +* - .sans => #hl.typo.sans(webfont-name-optional); +* - .columns => #hl.typo.columns(count, gap) +* +* --------------------------------------- +* IMAGES +* --------------------------------------- +* - .img => namespace, do not call directly +* - .responsive => #hl.img.responsive(); +* - .framed => #hl.img.framed(); + +* --------------------------------------- +* USER INTERFACE +* --------------------------------------- +* - .ui => namespace, do not call directly +* - .themes => namespace, do not call directly +* - .light => #hl.ui.themes.light(); - call within element +* - .dark => #hl.ui.themes.dark(); - call within element +* - .list => namespace, do not call directly +* - .subtle => #hl.list.subtle(); - call within
        element +* - .horizontal => #hl.list.horizontal(); - call within
          element +*/ + +#hl { + + /************************************ + * Meyer Reset + * http://meyerweb.com/eric/tools/css/reset/ + ************************************/ + .reset() { + /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 license: none(public domain) */ + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { display: block; } + body { line-height: 1; } + ol, ul { list-style: none; } + blockquote, q { quotes: none; } + blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } + table { border-collapse: collapse; border-spacing: 0; } + } + + /************************************ + * Normalize by necolas + * https://github.com/necolas/normalize.css + ************************************/ + .normalize() { + /*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */ + article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;} + audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;} + [hidden]{display:none;} + /* + * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units + * http://clagnut.com/blog/348/#c790 + * 2. Keeps page centred in all browsers regardless of content height + * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ + html {font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} + body{margin:0;font-size:13px;line-height:1.231;}/*Added font-size and line-height addition as seen in html5 boilerplate*/ + body,button,input,select,textarea{font-family:sans-serif;} + a{color:#00e;} + a:visited{color:#551a8b;} + a:focus{outline:thin dotted;} + a:hover,a:active{outline:0;} + abbr[title]{border-bottom:1px dotted;} + b,strong{font-weight:bold;} + blockquote{margin:1em 40px;} + dfn{font-style:italic;} + mark{background:#ff0;color:#000;} + /*Corrects font family set oddly in IE6, S4/5, Chrome en.wikipedia.org/wiki/User:Davidgothberg/Test59*/ + pre,code,kbd,samp{font-family: monospace, serif;_font-family:'courier new',monospace;font-size:1em;} + pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;} + q{quotes:none;} + q:before,q:after{content:'';content:none;}small{font-size:75%;} + sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} + sup{top:-0.5em;} + sub{bottom:-0.25em;} + ul,ol{margin:1em 0;padding:0 0 0 40px;} + dd{margin:0 0 0 40px;} + nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0;}/*Cleared margin and padding as seen in html5 boilerplate*/ + img{border:0;-ms-interpolation-mode:bicubic;} + svg:not(:root){overflow:hidden;} + figure{margin:0;} + form{margin:0;} + fieldset{margin:0 2px;padding:0.35em 0.625em 0.75em;} + legend{border:0;*margin-left:-7px;} + button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} + button,input {line-height: normal;*overflow:visible;} + table button,table input{*overflow:auto;} + 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;padding:0;} + input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing: content-box;} + input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} + button::-moz-focus-inner,input::-moz-focus-inner {border:0;padding:0;} + textarea {overflow:auto;vertical-align:top;} + table {border-collapse:collapse;border-spacing:0;} + } + + /************************************ + * Clearfix + * + * what?: Contains floats, for more info see h5bp.com/q. + * Removes the need to add .clearfix as a class + * to your elements. + * + ************************************/ + .clearfix() { + &:before { content: ''; display: block; } + &:after { content: ''; display: table; clear: both; } + zoom: 1; + } + + /************************************ + * Centered + * + * @what?: Center your object with an + * automatic margin + * + * @params: width, default = 960px + * + ************************************/ + .centered(@width: 960px) { + width: @width; + margin: 0 auto; + } + + /************************************ + * Border + * + * @what?: Add a 1px solid border + * super quick. + * + * @params: colour, default = #000 + * + ************************************/ + .border(@colour: #000) { + border: 1px solid @colour; + } + + /************************************ + * Opacity + * + * @what?: Add opacity to an HTML element that works + * in all browsers including ie6+ + * + * @params: value, default = .5 + * + ************************************/ + .opacity(@value: .5) { + opacity: @value; + filter: ~'alpha(opacity=(@value*100))'; + filter: ~'progid:DXImageTransform.Microsoft.Alpha(opacity=(@value*100))'; + -ms-filter: ~'"progid:DXImageTransform.Microsoft.Alpha(opacity=(@value*100))"'; + } + + /************************************ + * Round all corners + * + * @what?: Rounds every corner equally + * + * @params: radius, default = 5px + * + ************************************/ + .round-all-corners(@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; + } + + /************************************ + * Rounded corners + * + * @what?: Round each corner individually + * + * @params: topLeft, default = 5px + * topRight, default = 5px + * bottomRight, default = 5px + * bottomLeft, default = 5px + * + ************************************/ + .rounded-corners(@topLeft: 5px, @topRight: 5px, @bottomRight: 5px, @bottomLeft: 5px) { + -moz-border-radius-topleft: @topLeft; + -moz-border-radius-topright: @topRight; + -moz-border-radius-bottomright: @bottomRight; + -moz-border-radius-bottomleft: @bottomLeft; + -webkit-border-radius: @topLeft @topRight @bottomRight @bottomLeft; + border-radius: @topLeft @topRight @bottomRight @bottomLeft; + } + + /************************************ + * Transition + * + * @what?: Defines a CSS3 transition + * + * @params: property, default = all + * duration, default = .5s + * ease, default = linear + * delay, default = .0s + * + ************************************/ + .transition(@property: all, @duration: .5s, @ease: linear, @delay: .0s) { + -webkit-transition: @arguments; + -moz-transition: @arguments; + -o-transition: @arguments; + transition: @arguments; + } + + /************************************ + * Drop shadow + * + * @what?: Adds an outer shadow to the + * html element. To add a shadow + * to text use #hl.text-shadow(...) + * + * @params: x, default = 0px + * y, default = 1px + * blur, default = 1px + * colour, default = rgba(0, 0, 0, .6) + * + ************************************/ + .drop-shadow(@x: 0px, @y: 1px, @blur: 1px, @colour: rgba(0, 0, 0, .6)) { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; + } + + /************************************ + * Inner shadow + * + * @what: Adds an inner shadow to the + * html element. + * + * @params: x, default = 0px + * y, default = 1px + * blur, default = 1px + * colour, default = rgba(0, 0, 0, .6) + * + ************************************/ + .inner-shadow(@x: 0px, @y: 1px, @blur: 1px, @colour: rgba(0, 0, 0, .6)) { + -webkit-box-shadow: inset @arguments; + -moz-box-shadow: inset @arguments; + box-shadow: inset @arguments; + } + + /************************************ + * Text shadow + * + * @what?: Adds an outer shadow to text + * + * @params: x, default = 1px + * y, default = 1px + * blur, default = 1px + * colour, default = rgba(0, 0, 0, .6) + * + ************************************/ + .text-shadow(@x: 1px, @y: 1px, @blur: 1px, @colour: rgba(0, 0, 0, .6)) { + text-shadow: @arguments; + } + + /************************************ + * Background Gradient + * + * @what?: Adds a background gradient to + * an HTML element + * + * @params: colourFrom, default = #bbb + * colourTo, default = #f1f1f1 + * fallbackColour, default = #f1f1f1 + * fallbackImageUrl, default = '' + * + ************************************/ + .background-gradient(@colourfrom: #bbb, @colourTo: #f1f1f1, @fallbackColour: #f1f1f1, @fallbackImageUrl: '') { + background-color: @fallbackColour; + background-image: url("@fallbackImage"); + background-repeat: no-repeat; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@colourfrom), to(@colourTo)); + background-image: -webkit-linear-gradient(bottom, @colourfrom, @colourTo); + background-image: -moz-linear-gradient(bottom, @colourfrom, @colourTo); + background-image: -ms-linear-gradient(bottom, @colourfrom, @colourTo); + background-image: -o-linear-gradient(bottom, @colourfrom, @colourTo); + /* For Internet Explorer 5.5 - 7 */ + filter: ~'progid:DXImageTransform.Microsoft.gradient(startColorstr=@colourfrom, endColorstr=@colourTo)'; + /* For Internet Explorer 8 and newer */ + -ms-filter: ~'"progid:DXImageTransform.Microsoft.gradient(startColorstr=@colourfrom, endColorstr=@colourTo)"'; + } + + /************************************ + * Scale + * + * @what?: Defines a 2D scale transformation + * + * @params: amount, default = 1 + * + ************************************/ + .scale(@amount: 1) { + transform:scale(@amount); + -ms-transform:scale(@amount); + -moz-transform:scale(@amount); + -webkit-transform:scale(@amount); + -o-transform:scale(@amount); + } + + /************************************ + * ScaleX + * + * @what?: Defines a scale transformation + * by giving a value for the X-axis + * + * @params: x, default = 1 + * + ************************************/ + .scaleX(@x: 1) { + transform:scaleX(@x); + -ms-transform:scaleX(@x); + -moz-transform:scaleX(@x); + -webkit-transform:scaleX(@x); + -o-transform:scaleX(@x); + } + + /************************************ + * ScaleY + * + * @what?: Defines a scale transformation + * by giving a value for the Y-axis + * + * @params: y, default = 1 + * + ************************************/ + .scaleY(@y: 1) { + transform:scaleY(@y); + -ms-transform:scaleY(@y); + -moz-transform:scaleY(@y); + -webkit-transform:scaleY(@y); + -o-transform:scaleY(@y); + } + + /************************************ + * Rotate + * + * @what?: Defines a 2D rotation, the angle + * is specified in the parameter + * + * @params: degrees, default = 90deg + * + ************************************/ + .rotate(@degrees: 90deg) { + transform:rotate(@degrees); + -ms-transform:rotate(@degrees); + -moz-transform:rotate(@degrees); + -webkit-transform:rotate(@degrees); + -o-transform:rotate(@degrees); + } + + /************************************ + * RotateX + * + * @what?: Defines a 3D rotation along the X-axis + * + * @params: degrees, default = 90deg + * + ************************************/ + .rotateX(@degrees: 90deg) { + transform:rotateX(@degrees); + -ms-transform:rotateX(@degrees); + -moz-transform:rotateX(@degrees); + -webkit-transform:rotateX(@degrees); + -o-transform:rotateX(@degrees); + } + + /************************************ + * RotateY + * + * @what?: Defines a 3D rotation along the Y-axis + * + * @params: degrees, default = 90deg + * + ************************************/ + .rotateY(@degrees: 90deg) { + transform:rotateY(@degrees); + -ms-transform:rotateY(@degrees); + -moz-transform:rotateY(@degrees); + -webkit-transform:rotateY(@degrees); + -o-transform:rotateY(@degrees); + } + + /************************************ + * Skew + * + * @what?: Defines a 2D skew transformation + * along the X- and the Y-axis + * + * @params: angleX, default = 10deg + * angleY, default = 10deg + * + ************************************/ + .skew(@angleX: 10deg, @angleY: 10deg) { + transform:skew(@angleX, @angleY); + -ms-transform:skew(@angleX, @angleY); + -moz-transform:skew(@angleX, @angleY); + -webkit-transform:skew(@angleX, @angleY); + -o-transform:skew(@angleX, @angleY); + } + + /************************************ + * SkewX + * + * @what?: Defines a 2D skew transformation + * along the X-axis + * + * @params: angleX, default = 10deg + * + ************************************/ + .skewX(@angleX: 10deg) { + transform:skewX(@angleX); + -ms-transform:skewX(@angleX); + -moz-transform:skewX(@angleX); + -webkit-transform:skewX(@angleX); + -o-transform:skewX(@angleX); + } + + /************************************ + * SkewY + * + * @what?: Defines a 2D skew transformation + * along the Y-axis + * + * @params: angleY, default = 10deg + * + ************************************/ + .skewY(@angleY: 10deg) { + transform:skewY(@angleY); + -ms-transform:skewY(@angleY); + -moz-transform:skewY(@angleY); + -webkit-transform:skewY(@angleY); + -o-transform:skewY(@angleY); + } + + /************************************ + * Translate + * + * @what?: Defines a 2D translation + * + * @params: x, default = 10px + * y, default = 10px + * + ************************************/ + .translate(@x: 10px, @y: 10px) { + transform:translate(@x, @y); + -ms-transform:translate(@x, @y); + -moz-transform:translate(@x, @y); + -webkit-transform:translate(@x, @y); + -o-transform:translate(@x, @y); + } + + /************************************ + * TranslateX + * + * @what?: Defines a translation, using + * only the value for the X-axis + * + * @params: x, default = 10px + * + ************************************/ + .translateX(@x: 0px) { + transform:translateX(@x); + -ms-transform:translateX(@x); + -moz-transform:translateX(@x); + -webkit-transform:translateX(@x); + -o-transform:translateX(@x); + } + + /************************************ + * TranslateY + * + * @what?: Defines a translation, using + * only the value for the Y-axis + * + * @params: y, default = 10px + * + ************************************/ + .translateY(@y: 0px) { + transform:translateY(@y); + -ms-transform:translateY(@y); + -moz-transform:translateY(@y); + -webkit-transform:translateY(@y); + -o-transform:translateY(@y); + } + + /************************************ + * Matrix + * + * @what?: Defines a 2D transformation, + * using a matrix of six values + * + * @params: n1, default = 0 + * n2, default = 0 + * n3, default = 0 + * n4, default = 0 + * n5, default = 0 + * n6, default = 0 + * + ************************************/ + .matrix(@n1: 0, @n2: 0, @n3: 0, @n4: 0, @n5: 0, @n6: 0) { + transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); + -ms-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); + -moz-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); + -webkit-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); + -o-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); + } + + /************************************ + * Grid + ************************************/ + .grid { + + /************************************ + * Make + * + * @what?: Defines the base variables needed + * for the HelpLess grid system. + * + * @params: @width, default = 960 + * @colnum, default = 16 + * @colgutter, default = 10 + * + ************************************/ + .make(@width: 960, @colnum: 16, @colgutter: 10) { + width: 0px + @width; + @col-width: 100% / @colnum; + @col-gutter-percent: 0% + ((@colgutter / @width) * 100); + } + + /************************************ + * 1200 + * + * @what?: Predefined grid maker + * + ************************************/ + .1200() { + .make(1200); + } + + /************************************ + * 1120 + * + * @what?: Predefined grid maker + * + ************************************/ + .1120() { + .make(1120); + } + + /************************************ + * 1040 + * + * @what?: Predefined grid maker + * + ************************************/ + .1040() { + .make(1040); + } + + /************************************ + * 960 + * + * @what?: Predefined grid maker + * + ************************************/ + .960() { + .make(960); + } + + /************************************ + * 880 + * + * @what?: Predefined grid maker + * + ************************************/ + .880() { + .make(880); + } + + /************************************ + * 800 + * + * @what?: Predefined grid maker + * + ************************************/ + .800() { + .make(800); + } + + /************************************ + * 720 + * + * @what?: Predefined grid maker + * + ************************************/ + .720() { + .make(720); + } + + /************************************ + * 640 + * + * @what?: Predefined grid maker + * + ************************************/ + .640() { + .make(640); + } + + /************************************ + * 560 + * + * @what?: Predefined grid maker + * + ************************************/ + .560() { + .make(560); + } + + /************************************ + * 480 + * + * @what?: Predefined grid maker + * + ************************************/ + .480() { + .make(480); + } + + /************************************ + * 400 + * + * @what?: Predefined grid maker + * + ************************************/ + .400() { + .make(400); + } + + /************************************ + * 320 + * + * @what?: Predefined grid maker + * + ************************************/ + .320() { + .make(320); + } + + /************************************ + * 240 + * + * @what?: Predefined grid maker + * + ************************************/ + .240() { + .make(240); + } + + /************************************ + * Row + * + * @what?: Defines an element as a row. + * clears all clearfixes all columns + * directly inside. + * + ************************************/ + .row() { + .clearfix(); + display: block; + width: 100%; + overflow-y: visible; + margin-left: -(@col-gutter-percent / 2); + } + + /************************************ + * Col + * + * @what?: Defines an element as a column. + * Sets the width depending on the + * supplied arguments and the width + * set in .grid() + * + * @params: @colSpan, default = 1 + * + ************************************/ + .col(@colSpan: 1) { + float: left; + display: block; + min-width: @col-width * @colSpan; + padding: 0 0 0 @col-gutter-percent !important; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + } + + /************************************ + * Grid 960gs, see http://960.gs + ************************************/ + .grid960gs { + + /************************************ + * Make + * + * @what?: Defines the base variables needed + * for the 960 grid system. + * + * @params: @colnum, default = 16 + * @colgutter, default = 20 + * @margin, default = 10 + ************************************/ + .make(@colnum: 16, @colgutter: 20, @margin: 10) { + @col-width: (960px - (@colgutter * @colnum)) / @colnum; + @gutter-width: 0px + @colgutter; + @grid-margin: 0px + @margin; + margin-left: auto; + margin-right: auto; + width: 960px; + } + + /************************************ + * 12 + * + * @what?: Predefined 12 cols grid maker + * + ************************************/ + .12() { + .make(12); + } + + /************************************ + * 16 + * + * @what?: Predefined 16 cols grid maker + * + ************************************/ + .16() { + .make(16); + } + + /************************************ + * 24 + * + * @what?: Predefined 24 cols grid maker + * + ************************************/ + .24() { + .make(24, 10); + } + + /************************************ + * Row + * + * @what?: Defines an element as a row. + * clears all clearfixes all columns + * directly inside. + * + ************************************/ + .row() { + .clearfix(); + display: block; + /* + width: 100% - @col-gutter-percent; + overflow-y: visible; + */ + margin-left: @grid-margin; + margin-right: @grid-margin; + } + + /************************************ + * Col + * + * @what?: Defines an element as a column. + * Sets the width depending on the + * supplied arguments and the width + * set in .grid960gs() + * + * @params: @colSpan, default = 1 + * + ************************************/ + .col(@colSpan: 1) { + display: inline; + float: left; + width: 0px + (@col-width * @colSpan) + (@gutter-width * (@colSpan - 1)); + margin-left: 0px + (@gutter-width/2); + margin-right: 0px + (@gutter-width/2); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + /************************************ + * alpha + * + * @what?: Removes left margin + * + ************************************/ + .alpha() { + margin-left: 0; + } + + /************************************ + * omega + * + * @what?: Removes rigt margin + * + ************************************/ + .omega() { + margin-right: 0; + } + + /************************************ + * prefix + * + * @what?: Adds padding before col + * + * @params: @colSpan, default = 1 + * + ************************************/ + .prefix(@colSpan: 1) { + padding-left: 0px + (@colSpan * (@col-width + @gutter-width)); + } + + /************************************ + * suffix + * + * @what?: Adds padding after col + * + * @params: @colSpan, default = 1 + * + ************************************/ + .suffix(@colSpan: 1) { + padding-right: 0px + (@colSpan * (@col-width + @gutter-width)); + } + + /************************************ + * push + * + * @what?: Pushes cols on the right + * + * @params: @colSpan, default = 1 + * + ************************************/ + .push(@colSpan: 1) { + position:relative; + left: 0px + (@colSpan * (@col-width + @gutter-width)); + } + + /************************************ + * pull + * + * @what?: Pulls cols on the left + * + * @params: @colSpan, default = 1 + * + ************************************/ + .pull(@colSpan: 1) { + position:relative; + left: 0px - (@colSpan * (@col-width + @gutter-width)); + } + } + + /*********************************** + * TYPOGRAPHY + ***********************************/ + .typo { + + /************************************ + * Serif + * + * @what?: Quickly set your font family + * as a serif set + * + * @params: @webfont, default = none + * + ************************************/ + .serif(@webfont) { + font-family: @webfont, georgia, times, serif; + } + + /************************************ + * Serif + * + * @what?: Quickly set your font family + * + * @params: @webfont, default = none + * + ************************************/ + .sans(@webfont) { + font-family: @webfont, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + } + + /************************************ + * Columns + * + * @what?: Sets CSS3 columns within + * block of html text + * + * @params: count, default = 1 + * gap, default = 10px + * + ************************************/ + .columns(@count: 1, @gap: 10px) { + -moz-column-count: @count; + -moz-column-gap: @gap; + -webkit-column-count: @count; + -webkit-column-gap: @gap; + column-count: @count; + column-gap: @gap; + } + + } + + /*********************************** + * IMAGE + ***********************************/ + .img { + + /************************************ + * Responsive + * + * @what?: Set image max-width: 100% + * + ************************************/ + .responsive() { + max-width: 100%; + } + + /************************************ + * Framed + * + * @what?: Add a quick 10px frame to your image + * + ************************************/ + .framed() { + border: 1px solid #ccc; + padding: 9px; + .drop-shadow(); + outline: none; + } + + } + + /*********************************** + * UI + ***********************************/ + .ui { + + /*********************************** + * PREDEFINED THEMES + ***********************************/ + .themes { + + /*********************************** + * Theme: Light + * + * @what?: Quickly style the base elements + * of your page + * + ***********************************/ + .light() { + + background-color: #fff; + color: #555; + .text-shadow(1px, 1px, 1px, #fff); + + } + + /*********************************** + * Theme: Dark + * + * @what?: Quickly style the base elements + * of your page + * + ***********************************/ + .dark() { + + background-color: #333; + color: #ccc; + .text-shadow(1px, 1px, 1px, #333); + } + } + + /*********************************** + * LISTS + ***********************************/ + .list { + + /*********************************** + * Subtle + * + * @what?: Quickly removes the styling + * from a list + * + ***********************************/ + .subtle() { + list-style: none; + margin: 0; + padding: 0; + } + + /*********************************** + * Horizontal + * + * @what?: Creates a horizontal list, + * useful for styling your site nav + * + ***********************************/ + .horizontal(@itemSpacing: 10px) { + .subtle(); + .clearfix(); + + li { + float: left; + display: block; + margin-right: @itemSpacing; + } + } + } + } +} From 7edcd5b317929f56e5bfab0aac8bc1ec01bf71c2 Mon Sep 17 00:00:00 2001 From: sylbal Date: Mon, 1 Jul 2013 15:07:05 +0200 Subject: [PATCH 5/6] Grids are extracted as plugins to offer more flexibility. Also includes various fix never merged in Matt repo and "normalize" function drop. --- 960gs-plugin.less | 186 +++++++++++++++++ frameless-plugin.less | 76 +++++++ helpless.less | 455 +----------------------------------------- hlgrid-plugin.less | 253 +++++++++++++++++++++++ 4 files changed, 524 insertions(+), 446 deletions(-) create mode 100644 960gs-plugin.less create mode 100644 frameless-plugin.less create mode 100644 hlgrid-plugin.less diff --git a/960gs-plugin.less b/960gs-plugin.less new file mode 100644 index 0000000..6778b43 --- /dev/null +++ b/960gs-plugin.less @@ -0,0 +1,186 @@ +/* -------------------------------------------------------------------------------------- +* 960 Grid System by Nathan Smith +* +* Adapted by Sylvain Balbous (https://github.com/sylbal) for H5BP-Less plugin +* +* ------------------------------------------------------------------------------ +* GRID 960gs => syntax +* ------------------------------------------------------------------------------ +* - #960gs => namespace, do not call directly, use .make or one of the predefined grid makers +* - .make => #960gs > .make(colNumber, gutterWidth, gridMargin) +* - .12 => #960gs > .grid.12(); +* - .16 => #960gs > .grid.16(); +* - .24 => #960gs > .grid.24(); +* - .row => #960gs > .grid.row(); +* - .col => #960gs > .grid.col(colSpan); +* - .alpha => #960gs > .grid.alpha(); +* - .omega => #960gs > .grid.omega(); +* - .prefix => #960gs > .grid.prefix(colSpan); +* - .suffix => #960gs > .grid.suffix(colSpan); +* - .push => #960gs > .grid.push(colSpan); +* - .pull => #960gs > .grid.pull(colSpan); +* +*/ + +#960gs { + /************************************ + * Make + * + * @what?: Defines the base variables needed + * for the 960 grid system. + * + * @params: @colnum, default = 16 + * @colgutter, default = 20 + * @margin, default = 10 + ************************************/ + .make(@colnum: 16, @colgutter: 20, @margin: 10) { + @col-width: (960px - (@colgutter * @colnum)) / @colnum; + @gutter-width: 0px + @colgutter; + @grid-margin: 0px + @margin; + margin-left: auto; + margin-right: auto; + width: 960px; + } + + /************************************ + * 12 + * + * @what?: Predefined 12 cols grid maker + * + ************************************/ + .12() { + .make(12); + } + + /************************************ + * 16 + * + * @what?: Predefined 16 cols grid maker + * + ************************************/ + .16() { + .make(16); + } + + /************************************ + * 24 + * + * @what?: Predefined 24 cols grid maker + * + ************************************/ + .24() { + .make(24, 10); + } + + /************************************ + * Row + * + * @what?: Defines an element as a row. + * clears all clearfixes all columns + * directly inside. + * + ************************************/ + .row() { + .clearfix(); + display: block; + /* + width: 100% - @col-gutter-percent; + overflow-y: visible; + */ + margin-left: @grid-margin; + margin-right: @grid-margin; + } + + /************************************ + * Col + * + * @what?: Defines an element as a column. + * Sets the width depending on the + * supplied arguments and the width + * set in .grid960gs() + * + * @params: @colSpan, default = 1 + * + ************************************/ + .col(@colSpan: 1) { + display: inline; + float: left; + width: 0px + (@col-width * @colSpan) + (@gutter-width * (@colSpan - 1)); + margin-left: 0px + (@gutter-width/2); + margin-right: 0px + (@gutter-width/2); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + /************************************ + * alpha + * + * @what?: Removes left margin + * + ************************************/ + .alpha() { + margin-left: 0; + } + + /************************************ + * omega + * + * @what?: Removes rigt margin + * + ************************************/ + .omega() { + margin-right: 0; + } + + /************************************ + * prefix + * + * @what?: Adds padding before col + * + * @params: @colSpan, default = 1 + * + ************************************/ + .prefix(@colSpan: 1) { + padding-left: 0px + (@colSpan * (@col-width + @gutter-width)); + } + + /************************************ + * suffix + * + * @what?: Adds padding after col + * + * @params: @colSpan, default = 1 + * + ************************************/ + .suffix(@colSpan: 1) { + padding-right: 0px + (@colSpan * (@col-width + @gutter-width)); + } + + /************************************ + * push + * + * @what?: Pushes cols on the right + * + * @params: @colSpan, default = 1 + * + ************************************/ + .push(@colSpan: 1) { + position:relative; + left: 0px + (@colSpan * (@col-width + @gutter-width)); + } + + /************************************ + * pull + * + * @what?: Pulls cols on the left + * + * @params: @colSpan, default = 1 + * + ************************************/ + .pull(@colSpan: 1) { + position:relative; + left: 0px - (@colSpan * (@col-width + @gutter-width)); + } + +} \ No newline at end of file diff --git a/frameless-plugin.less b/frameless-plugin.less new file mode 100644 index 0000000..f658b04 --- /dev/null +++ b/frameless-plugin.less @@ -0,0 +1,76 @@ +/* + Frameless + by Joni Korpi + licensed under CC0 + + Adapted by Sylvain Balbous (https://github.com/sylbal) for H5BP-Less plugin + - Removed Reset and Normalize parts + - Added helper functions for margin + - Added namespace #fl + * to use vars in your mixin, import the namespace, ie.: + .mixin { + #fl; + width:@4cols; + } + * to use functions, call it via the mixin, ie.: + .mixin { + #fl > .width (4); +*/ + +#fl { + // + // Configuration + // + + @font-size: 16; // Your base font-size in pixels + @em: @font-size*1em; // Shorthand for outputting ems, e.g. "12/@em" + + @column: 60; // The column-width of your grid in pixels + @gutter: 20; // The gutter-width of your grid in pixels + + + // + // Column-widths in variables, in ems + // + + @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols; + @2cols: ( 2 * (@column + @gutter) - @gutter) / @em; + @3cols: ( 3 * (@column + @gutter) - @gutter) / @em; + @4cols: ( 4 * (@column + @gutter) - @gutter) / @em; + @5cols: ( 5 * (@column + @gutter) - @gutter) / @em; + @6cols: ( 6 * (@column + @gutter) - @gutter) / @em; + @7cols: ( 7 * (@column + @gutter) - @gutter) / @em; + @8cols: ( 8 * (@column + @gutter) - @gutter) / @em; + @9cols: ( 9 * (@column + @gutter) - @gutter) / @em; + @10cols: (10 * (@column + @gutter) - @gutter) / @em; + @11cols: (11 * (@column + @gutter) - @gutter) / @em; + @12cols: (12 * (@column + @gutter) - @gutter) / @em; + @13cols: (13 * (@column + @gutter) - @gutter) / @em; + @14cols: (14 * (@column + @gutter) - @gutter) / @em; + @15cols: (15 * (@column + @gutter) - @gutter) / @em; + @16cols: (16 * (@column + @gutter) - @gutter) / @em; + + + // + // Column-widths in a function, in ems + // + + .width (@cols:1) { + width: (@cols * (@column + @gutter) - @gutter) / @em; + } + + // + // Left margin in a function, in ems + // + .margin-left () { + margin-left: @gutter/@em; + } + + // + // Prefix function to add some "blank" columns before the content column + // The prefix includes all the necessary gutters + // + .prefix (@cols:1) { + padding-left: (@cols * (@column + @gutter)) / @em; + } +} \ No newline at end of file diff --git a/helpless.less b/helpless.less index a565b46..708a1f7 100644 --- a/helpless.less +++ b/helpless.less @@ -33,12 +33,8 @@ * Unlike other libraries, HelpLess has an invisible footprint until you call a mixin * so if you import HelpLess but don't use it, it will not increase your compiled file size * -* @thanks: -* Eric Meyer for html reset - http://meyerweb.com/eric/tools/css/reset/ -* Necolas for normalize - https://github.com/necolas/normalize.css -* * @How to use: -* Import helpless.x.x.x.less into your main style.less file. +* Import helpless.less into your main style.less file. * * @Author: * Matt Woodfield - @m6tt @@ -48,7 +44,6 @@ * BASICS => syntax * ------------------------------------------------------------------------------ * - .reset => #hl.reset() - call outside of element -* - .normalize => #hl.normalize - call outside of element * - .clearfix => #hl.clearfix() * - .centered => #hl.centered(width) * - .border => #hl.border(color) @@ -74,27 +69,6 @@ * - .translateY => #hl.translateY(y) * - .matrix => #hl.matrix(n, n, n, n, n, n) * -* ------------------------------------------------------------------------------ -* GRID => syntax -* ------------------------------------------------------------------------------ -* - .grid => namespace, do not call directly, use .make or one of the predefined grid makers -* - .make => #hl.grid.make(width, colNumber, gutterWidth) -* - .1200 => #hl.grid.1200(); -* - .1120 => #hl.grid.1120(); -* - .1040 => #hl.grid.1040(); -* - .960 => #hl.grid.960(); -* - .880 => #hl.grid.880(); -* - .800 => #hl.grid.800(); -* - .720 => #hl.grid.720(); -* - .640 => #hl.grid.640(); -* - .560 => #hl.grid.560(); -* - .480 => #hl.grid.480(); -* - .400 => #hl.grid.400(); -* - .320 => #hl.grid.320(); -* - .240 => #hl.grid.240(); -* - .row => #hl.grid.row(); -* - .col => #hl.grid.col(colSpan); -* * --------------------------------------- * TYPOGRAPHY * --------------------------------------- @@ -153,63 +127,6 @@ table { border-collapse: collapse; border-spacing: 0; } } - /************************************ - * Normalize by necolas - * https://github.com/necolas/normalize.css - ************************************/ - .normalize() { - /*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */ - article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;} - audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;} - [hidden]{display:none;} - /* - * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units - * http://clagnut.com/blog/348/#c790 - * 2. Keeps page centred in all browsers regardless of content height - * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom - * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ - */ - html {font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} - body{margin:0;font-size:13px;line-height:1.231;}/*Added font-size and line-height addition as seen in html5 boilerplate*/ - body,button,input,select,textarea{font-family:sans-serif;} - a{color:#00e;} - a:visited{color:#551a8b;} - a:focus{outline:thin dotted;} - a:hover,a:active{outline:0;} - abbr[title]{border-bottom:1px dotted;} - b,strong{font-weight:bold;} - blockquote{margin:1em 40px;} - dfn{font-style:italic;} - mark{background:#ff0;color:#000;} - /*Corrects font family set oddly in IE6, S4/5, Chrome en.wikipedia.org/wiki/User:Davidgothberg/Test59*/ - pre,code,kbd,samp{font-family: monospace, serif;_font-family:'courier new',monospace;font-size:1em;} - pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;} - q{quotes:none;} - q:before,q:after{content:'';content:none;}small{font-size:75%;} - sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} - sup{top:-0.5em;} - sub{bottom:-0.25em;} - ul,ol{margin:1em 0;padding:0 0 0 40px;} - dd{margin:0 0 0 40px;} - nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0;}/*Cleared margin and padding as seen in html5 boilerplate*/ - img{border:0;-ms-interpolation-mode:bicubic;} - svg:not(:root){overflow:hidden;} - figure{margin:0;} - form{margin:0;} - fieldset{margin:0 2px;padding:0.35em 0.625em 0.75em;} - legend{border:0;*margin-left:-7px;} - button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} - button,input {line-height: normal;*overflow:visible;} - table button,table input{*overflow:auto;} - 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;padding:0;} - input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing: content-box;} - input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} - button::-moz-focus-inner,input::-moz-focus-inner {border:0;padding:0;} - textarea {overflow:auto;vertical-align:top;} - table {border-collapse:collapse;border-spacing:0;} - } - /************************************ * Clearfix * @@ -261,10 +178,12 @@ * ************************************/ .opacity(@value: .5) { + -moz-opacity: @value; + -webkit-opacity: @value; opacity: @value; - filter: ~'alpha(opacity=(@value*100))'; - filter: ~'progid:DXImageTransform.Microsoft.Alpha(opacity=(@value*100))'; - -ms-filter: ~'"progid:DXImageTransform.Microsoft.Alpha(opacity=(@value*100))"'; + filter: ~'alpha(opacity=(@{value}*100))'; + filter: ~'progid:DXImageTransform.Microsoft.Alpha(opacity=(@{value}*100))'; + -ms-filter: ~'"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{value}*100))"'; } /************************************ @@ -385,7 +304,7 @@ ************************************/ .background-gradient(@colourfrom: #bbb, @colourTo: #f1f1f1, @fallbackColour: #f1f1f1, @fallbackImageUrl: '') { background-color: @fallbackColour; - background-image: url("@fallbackImage"); + background-image: url("@{fallbackImageUrl}"); background-repeat: no-repeat; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@colourfrom), to(@colourTo)); background-image: -webkit-linear-gradient(bottom, @colourfrom, @colourTo); @@ -393,9 +312,9 @@ background-image: -ms-linear-gradient(bottom, @colourfrom, @colourTo); background-image: -o-linear-gradient(bottom, @colourfrom, @colourTo); /* For Internet Explorer 5.5 - 7 */ - filter: ~'progid:DXImageTransform.Microsoft.gradient(startColorstr=@colourfrom, endColorstr=@colourTo)'; + filter: ~'progid:DXImageTransform.Microsoft.gradient(startColorstr=@{colourfrom}, endColorstr=@{colourTo})'; /* For Internet Explorer 8 and newer */ - -ms-filter: ~'"progid:DXImageTransform.Microsoft.gradient(startColorstr=@colourfrom, endColorstr=@colourTo)"'; + -ms-filter: ~'"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{colourfrom}, endColorstr=@{colourTo})"'; } /************************************ @@ -622,362 +541,6 @@ -o-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6); } - /************************************ - * Grid - ************************************/ - .grid { - - /************************************ - * Make - * - * @what?: Defines the base variables needed - * for the HelpLess grid system. - * - * @params: @width, default = 960 - * @colnum, default = 16 - * @colgutter, default = 10 - * - ************************************/ - .make(@width: 960, @colnum: 16, @colgutter: 10) { - width: 0px + @width; - @col-width: 100% / @colnum; - @col-gutter-percent: 0% + ((@colgutter / @width) * 100); - } - - /************************************ - * 1200 - * - * @what?: Predefined grid maker - * - ************************************/ - .1200() { - .make(1200); - } - - /************************************ - * 1120 - * - * @what?: Predefined grid maker - * - ************************************/ - .1120() { - .make(1120); - } - - /************************************ - * 1040 - * - * @what?: Predefined grid maker - * - ************************************/ - .1040() { - .make(1040); - } - - /************************************ - * 960 - * - * @what?: Predefined grid maker - * - ************************************/ - .960() { - .make(960); - } - - /************************************ - * 880 - * - * @what?: Predefined grid maker - * - ************************************/ - .880() { - .make(880); - } - - /************************************ - * 800 - * - * @what?: Predefined grid maker - * - ************************************/ - .800() { - .make(800); - } - - /************************************ - * 720 - * - * @what?: Predefined grid maker - * - ************************************/ - .720() { - .make(720); - } - - /************************************ - * 640 - * - * @what?: Predefined grid maker - * - ************************************/ - .640() { - .make(640); - } - - /************************************ - * 560 - * - * @what?: Predefined grid maker - * - ************************************/ - .560() { - .make(560); - } - - /************************************ - * 480 - * - * @what?: Predefined grid maker - * - ************************************/ - .480() { - .make(480); - } - - /************************************ - * 400 - * - * @what?: Predefined grid maker - * - ************************************/ - .400() { - .make(400); - } - - /************************************ - * 320 - * - * @what?: Predefined grid maker - * - ************************************/ - .320() { - .make(320); - } - - /************************************ - * 240 - * - * @what?: Predefined grid maker - * - ************************************/ - .240() { - .make(240); - } - - /************************************ - * Row - * - * @what?: Defines an element as a row. - * clears all clearfixes all columns - * directly inside. - * - ************************************/ - .row() { - .clearfix(); - display: block; - width: 100%; - overflow-y: visible; - margin-left: -(@col-gutter-percent / 2); - } - - /************************************ - * Col - * - * @what?: Defines an element as a column. - * Sets the width depending on the - * supplied arguments and the width - * set in .grid() - * - * @params: @colSpan, default = 1 - * - ************************************/ - .col(@colSpan: 1) { - float: left; - display: block; - min-width: @col-width * @colSpan; - padding: 0 0 0 @col-gutter-percent !important; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - } - - /************************************ - * Grid 960gs, see http://960.gs - ************************************/ - .grid960gs { - - /************************************ - * Make - * - * @what?: Defines the base variables needed - * for the 960 grid system. - * - * @params: @colnum, default = 16 - * @colgutter, default = 20 - * @margin, default = 10 - ************************************/ - .make(@colnum: 16, @colgutter: 20, @margin: 10) { - @col-width: (960px - (@colgutter * @colnum)) / @colnum; - @gutter-width: 0px + @colgutter; - @grid-margin: 0px + @margin; - margin-left: auto; - margin-right: auto; - width: 960px; - } - - /************************************ - * 12 - * - * @what?: Predefined 12 cols grid maker - * - ************************************/ - .12() { - .make(12); - } - - /************************************ - * 16 - * - * @what?: Predefined 16 cols grid maker - * - ************************************/ - .16() { - .make(16); - } - - /************************************ - * 24 - * - * @what?: Predefined 24 cols grid maker - * - ************************************/ - .24() { - .make(24, 10); - } - - /************************************ - * Row - * - * @what?: Defines an element as a row. - * clears all clearfixes all columns - * directly inside. - * - ************************************/ - .row() { - .clearfix(); - display: block; - /* - width: 100% - @col-gutter-percent; - overflow-y: visible; - */ - margin-left: @grid-margin; - margin-right: @grid-margin; - } - - /************************************ - * Col - * - * @what?: Defines an element as a column. - * Sets the width depending on the - * supplied arguments and the width - * set in .grid960gs() - * - * @params: @colSpan, default = 1 - * - ************************************/ - .col(@colSpan: 1) { - display: inline; - float: left; - width: 0px + (@col-width * @colSpan) + (@gutter-width * (@colSpan - 1)); - margin-left: 0px + (@gutter-width/2); - margin-right: 0px + (@gutter-width/2); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - - /************************************ - * alpha - * - * @what?: Removes left margin - * - ************************************/ - .alpha() { - margin-left: 0; - } - - /************************************ - * omega - * - * @what?: Removes rigt margin - * - ************************************/ - .omega() { - margin-right: 0; - } - - /************************************ - * prefix - * - * @what?: Adds padding before col - * - * @params: @colSpan, default = 1 - * - ************************************/ - .prefix(@colSpan: 1) { - padding-left: 0px + (@colSpan * (@col-width + @gutter-width)); - } - - /************************************ - * suffix - * - * @what?: Adds padding after col - * - * @params: @colSpan, default = 1 - * - ************************************/ - .suffix(@colSpan: 1) { - padding-right: 0px + (@colSpan * (@col-width + @gutter-width)); - } - - /************************************ - * push - * - * @what?: Pushes cols on the right - * - * @params: @colSpan, default = 1 - * - ************************************/ - .push(@colSpan: 1) { - position:relative; - left: 0px + (@colSpan * (@col-width + @gutter-width)); - } - - /************************************ - * pull - * - * @what?: Pulls cols on the left - * - * @params: @colSpan, default = 1 - * - ************************************/ - .pull(@colSpan: 1) { - position:relative; - left: 0px - (@colSpan * (@col-width + @gutter-width)); - } - } - /*********************************** * TYPOGRAPHY ***********************************/ diff --git a/hlgrid-plugin.less b/hlgrid-plugin.less new file mode 100644 index 0000000..509fb6e --- /dev/null +++ b/hlgrid-plugin.less @@ -0,0 +1,253 @@ +/* -------------------------------------------------------------------------------------- +* HelpLess is released under the MIT license. +* +* Copyright (C) 2011 by Matt Woodfield +* +* Permission is hereby granted, free of charge, to any person obtaining a copy of this +* software and associated documentation files (the "Software"), to deal in the Software +* without restriction, including without limitation the rights to use, copy, modify, +* merge, publish, distribute, sublicense, and/or sell copies of the Software, and to +* permit persons to whom the Software is furnished to do so, subject to the +* following conditions: +* +* The above copyright notice and this permission notice shall be included in all copies +* or substantial portions of the Software. +* +* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, +* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A +* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF +* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE +* OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +* -------------------------------------------------------------------------------------- +* +* HelpLess - A lot of Less help +* -------------------------------------------------------------------------------------- +* +* @What is it: +* HelpLess is a Helper Library for the brilliant LESS dynamic stylesheet language. +* Read more about LESS: http://lesscss.org/ +* +* I have tried to make HelpLess as all-encompasing as possible with support for dynamic +* grids and page starter themes as well as all the css3 features I could think of. +* Unlike other libraries, HelpLess has an invisible footprint until you call a mixin +* so if you import HelpLess but don't use it, it will not increase your compiled file size +* +* @How to use: +* Import helpless.less into your main style.less file. +* +* @Author: +* Matt Woodfield - @m6tt +* +* @Reference: +* ------------------------------------------------------------------------------ +* GRID => syntax +* ------------------------------------------------------------------------------ +* - #hlgrid => namespace, do not call directly, use .make or one of the predefined grid makers +* - .make => #hlgrid > .make(width, colNumber, gutterWidth) +* - .1200 => #hlgrid > .1200(); +* - .1120 => #hlgrid > .1120(); +* - .1040 => #hlgrid > 1040(); +* - .960 => #hlgrid > 960(); +* - .880 => #hlgrid > .880(); +* - .800 => #hlgrid > .800(); +* - .720 => #hlgrid > .720(); +* - .640 => #hlgrid > .640(); +* - .560 => #hlgrid > .560(); +* - .480 => #hlgrid > .480(); +* - .400 => #hlgrid > .400(); +* - .320 => #hlgrid > .320(); +* - .240 => #hlgrid > .240(); +* - .row => #hlgrid > .row(); +* - .col => #hlgrid > .col(colSpan); +* + +/************************************ +* HelpLess grid System +************************************/ +#hlgrid { + + /************************************ + * Make + * + * @what?: Defines the base variables needed + * for the HelpLess grid system. + * + * @params: @width, default = 960 + * @colnum, default = 16 + * @colgutter, default = 10 + * + ************************************/ + .make(@width: 960, @colnum: 16, @colgutter: 10) { + width: 0px + @width; + @col-width: 100% / @colnum; + @col-gutter-percent: 0% + ((@colgutter / @width) * 100); + } + + /************************************ + * 1200 + * + * @what?: Predefined grid maker + * + ************************************/ + .1200() { + .make(1200); + } + + /************************************ + * 1120 + * + * @what?: Predefined grid maker + * + ************************************/ + .1120() { + .make(1120); + } + + /************************************ + * 1040 + * + * @what?: Predefined grid maker + * + ************************************/ + .1040() { + .make(1040); + } + + /************************************ + * 960 + * + * @what?: Predefined grid maker + * + ************************************/ + .960() { + .make(960); + } + + /************************************ + * 880 + * + * @what?: Predefined grid maker + * + ************************************/ + .880() { + .make(880); + } + + /************************************ + * 800 + * + * @what?: Predefined grid maker + * + ************************************/ + .800() { + .make(800); + } + + /************************************ + * 720 + * + * @what?: Predefined grid maker + * + ************************************/ + .720() { + .make(720); + } + + /************************************ + * 640 + * + * @what?: Predefined grid maker + * + ************************************/ + .640() { + .make(640); + } + + /************************************ + * 560 + * + * @what?: Predefined grid maker + * + ************************************/ + .560() { + .make(560); + } + + /************************************ + * 480 + * + * @what?: Predefined grid maker + * + ************************************/ + .480() { + .make(480); + } + + /************************************ + * 400 + * + * @what?: Predefined grid maker + * + ************************************/ + .400() { + .make(400); + } + + /************************************ + * 320 + * + * @what?: Predefined grid maker + * + ************************************/ + .320() { + .make(320); + } + + /************************************ + * 240 + * + * @what?: Predefined grid maker + * + ************************************/ + .240() { + .make(240); + } + + /************************************ + * Row + * + * @what?: Defines an element as a row. + * clears all clearfixes all columns + * directly inside. + * + ************************************/ + .row() { + .clearfix(); + display: block; + width: 100%; + overflow-y: visible; + margin-left: -(@col-gutter-percent / 2); + } + + /************************************ + * Col + * + * @what?: Defines an element as a column. + * Sets the width depending on the + * supplied arguments and the width + * set in .grid() + * + * @params: @colSpan, default = 1 + * + ************************************/ + .col(@colSpan: 1) { + float: left; + display: block; + min-width: @col-width * @colSpan; + padding: 0 0 0 @col-gutter-percent !important; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } +} From 6f2876cc2c0fd391ab39c5d30ce317010b51b885 Mon Sep 17 00:00:00 2001 From: sylbal Date: Mon, 1 Jul 2013 15:24:50 +0200 Subject: [PATCH 6/6] Updated info. --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0a14399..dc58b21 100755 --- a/README.md +++ b/README.md @@ -7,11 +7,16 @@ HelpLess is a Helper Library for the brilliant LESS dynamic stylesheet language. Read more about LESS: http://lesscss.org/ - HelpLess also comes bundled with [less-boilerplate](https://github.com/m6tt/less-boilerplate), which compiles LESS to CSS using the boilerplate build tool. I have tried to make HelpLess as all-encompasing as possible with support for dynamic grids and page starter themes as well as all the css3 features I could think of. HelpLess has an invisible footprint until you call a mixin so if you import HelpLess but don't use it, it will not increase your compiled file size. + HelpLess also comes bundled with [html5-boilerplate-less](https://github.com/sylbal/html5-boilerplate-less), which compiles LESS to CSS using the boilerplate build tool. I have tried to make HelpLess as all-encompasing as possible with support for dynamic grids and page starter themes as well as all the css3 features I could think of. HelpLess has an invisible footprint until you call a mixin so if you import HelpLess but don't use it, it will not increase your compiled file size. + + Most of the work here was made by Matt Woodfield and all his credits are present. I have forked the project as it seems to be slepping since 2012. + My major contribution (so far) is the implementation of the [960 Grid System](http://960.gs). I have choose to implement it as an external plugin to give more flexibility. + To offer another alternative, I have included another plugin to use [Frameless](http://framelessgrid.com/). + Finally, the original HelpLess grid system by Matt was also extracted to run as a plugin. 2. Installing - Clone the repository or download the zip and include helpless in your main style.less file. Alternatively you can use [less-boilerplate](https://github.com/m6tt/less-boilerplate) as mentioned above. + Clone the repository or download the zip and include helpless (and optionally the desired grid plugin) in your main style.less file. Alternatively you can use [html5-boilerplate-less](https://github.com/sylbal/html5-boilerplate-less) as mentioned above. 3. Compatibility