From 0f5e945985da98b6d533367b12fa9e3232c0a71e Mon Sep 17 00:00:00 2001 From: Mark Perkins Date: Mon, 25 Jun 2012 12:30:18 +0100 Subject: [PATCH] Start work on docs, a little reorg on the LESS files --- README.md | 133 ++++++++++++++++++- _compiled/example.css | 232 ++++++++++++++++++++++++++++++++- examples/example.less | 6 +- examples/index.html | 3 +- mixins/all.less | 3 + mixins/helpers.less | 118 ++++++++++------- mixins/icons.less | 90 +++++++++++++ mixins/resets.less | 283 +++++++++++++++++++++++++++++++++++++++++ mixins/settings.less | 2 + mixins/sprites.less | 91 ------------- mixins/typography.less | 14 ++ 11 files changed, 832 insertions(+), 143 deletions(-) create mode 100644 mixins/icons.less create mode 100644 mixins/resets.less create mode 100644 mixins/typography.less diff --git a/README.md b/README.md index 76ac55f..b4c7218 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,136 @@ -ClearLESS +ClearLess ========= -A reuseable collection of carefully-considered LESS mixins to help speed up development and increase maintainability of stylesheets in large projects. +A reuseable collection of carefully-considered Less mixins to help make development faster and more maintainable. + +The core tenets of this mixin library are to *avoid output bloat wherever possible* (via duplicated properties etc) and to *provide flexibile, configurable solutions* to the problems that are addressed by the library (i.e. by using Modernizr classes, browser hacks or not, etc). The aim is to give the author the benefits of reusable shortcuts without obliterating personal style and generating bloated stylesheets. + +**Remember!** Just because there is a mixin for it doesn't mean you *need* to use it. If you have a individual case that needs the properties tweaking then it is often better to roll the solution by hand rather than to use the mixin and then override half the generated properties. + +Usage +----- + +Simply `@import` the `mixins/all.less` file into the top of your main Less file, and then override any of the settings as described below, if required. + +Settings +-------- + +ClearLess defines a few settings that affect the output of some of the mixins. These are just [Less variables](http://lesscss.org/#-variables), and have their default values defined in `mixins/settings.less`. + +To override the defaults, simply redefine them after importing the mixins: + +```css +@import "mixins/all"; + +@using-modernizr: true; +@base-font-size: 14; +``` + +The following global settings are defined: + +### @using-modernizr + +`@using-modernizr: false;` + +If using Modernizr, some of the mixins will swap to using the Modernizr-generated classes to determine support for various features and thus what CSS to generate (see the icon/sprites mixins for an example). Set this to `true` to enable this behaviour. + +Modernizr feature tests currently used (if using a custom Modernizr build): + +* Generated Content (`.generatedcontent`) + +### @using-ieclasses + +`@using-ieclasses: true;` + +If using [H5BP](http://html5boilerplate.com/)-style conditional comments to add IE-indentifying classes to the HTML element, some mixins will use them to patch IE support where there are known issues. If this is set to `false` then these mixins will fall back to hacks like the [star hack](http://en.wikipedia.org/wiki/CSS_filter#Star_hack) to provide this support instead. + +**Other section-specific settings are documented alongside their mixins below.** + +Resets +------- + +Convinience mixins that should be used *outside of element selectors* as a quick way to generate popular reset stylesheet contents. + +### .reset; + +`.reset();` + +Outputs styles from the '[Meyer Reset](http://meyerweb.com/eric/tools/css/reset/)'. + +### .normalize; + +`.normalize();` + +Outputs styles from [normalize.css](http://necolas.github.com/normalize.css/). + + +Shortcuts & Helpers +------------------- + +These are the most basic mixins. *Shortcuts* typically provide a quick way to generate all the required vendor-prefixed versions of a property, and/or give a more manageable syntax for defining things like CSS gradients. *Helpers* are mixins that typically generate boilerplate code for common use cases, such as `display: inline-block;` statements with IE7 fixes, or image replacement code. + + + +Typography +------- + +### @base-font-size + +`@base-font-size: 16;` + +A variable to sets the base font-size (in pixels) that is used as the default in certain calculations (such as in the pixels to rems conversion helper). Units should be omited. + +Note that this doesn't stop you doing your base `body` font size calculations/definitions any way you please - this should just be set to the result of that. For instance, if you set your base font size to `62.5%` then just set the `@base-font-size` value to `10`. + +### .font-size-rems + +Generates a font-size property the font-size in ems. + +```css +/* .font-size-ems( <@px-size> [, <@context-px-size>] ); */ + +p { + .font-size-ems( 12 ); +} +``` + +* `@px-size`: Font size (in pixels) to convert to ems. +* `@context-px-size`: *(Optional)* The font size (in pixels) of the current context. Defaults to the value of `@base-font-size` if not specified. + +### .font-size-rems + +Calculates the font-size in rems and provides a pixel based fallback for browsers that do not support rem units. + +```css +/* .font-size-rems( <@px-size> [, <@context-px-size>] ); */ + +p { + .font-size-rems( 12 ); +} +``` + +* `@px-size`: Font size (in pixels) to convert to rems. +* `@context-px-size`: *(Optional)* The font size (in pixels) of the current context. Defaults to the value of `@base-font-size` if not specified. + + +Grids +------- + +Documentation coming soon. + + +Sprites +------- + +Documentation coming soon. + + +Icons +------- + +Documentation coming soon. + + diff --git a/_compiled/example.css b/_compiled/example.css index bf7a3ff..0428f1c 100644 --- a/_compiled/example.css +++ b/_compiled/example.css @@ -8,10 +8,240 @@ clear: both; content: "."; } +/* ---- reset ---- */ +/* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} +audio:not([controls]) { + display: none; + height: 0; +} +[hidden] { + display: none; +} +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} +body { + margin: 0; +} +a:focus { + outline: thin dotted; +} +a:hover, +a:active { + outline: 0; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} +h3 { + font-size: 1.17em; + margin: 1em 0; +} +h4 { + font-size: 1em; + margin: 1.33em 0; +} +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} +h6 { + font-size: 0.75em; + margin: 2.33em 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; +} +p, +pre { + margin: 1em 0; +} +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; +} +dl, +menu, +ol, +ul { + margin: 1em 0; +} +dd { + margin: 0 0 0 40px; +} +menu, +ol, +ul { + padding: 0 0 0 40px; +} +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} +img { + border: 0; + -ms-interpolation-mode: bicubic; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 0; +} +form { + margin: 0; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + border: 0; + padding: 0; + white-space: normal; + *margin-left: -7px; +} +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} +button, +input { + line-height: normal; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + *overflow: visible; +} +button[disabled], +input[disabled] { + cursor: default; +} +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + padding: 0; + *height: 13px; + *width: 13px; +} +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, +input[type="search"]::-webkit-search-cancel-button { + -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; +} /* ---- setup ---- */ body { padding: 20px; - margin: 0; background: #DDD; font-size: 10px; font-family: sans-serif; diff --git a/examples/example.less b/examples/example.less index 8907a44..5c8888d 100644 --- a/examples/example.less +++ b/examples/example.less @@ -15,11 +15,14 @@ @mobile-width: 40em; +/* ---- reset ---- */ + +.normalize(); + /* ---- setup ---- */ body { padding: 20px; - margin: 0; background: #DDD; font-size: ~"@{base-font-size}px"; font-family: sans-serif; @@ -194,7 +197,6 @@ h2 { .pre-pad(1); .post-push-end(1); } - } } diff --git a/examples/index.html b/examples/index.html index 4fbb1cd..435462d 100644 --- a/examples/index.html +++ b/examples/index.html @@ -5,8 +5,7 @@ - - + ClearLESS Examples diff --git a/mixins/all.less b/mixins/all.less index 63dc27a..80af424 100644 --- a/mixins/all.less +++ b/mixins/all.less @@ -3,6 +3,9 @@ // ============================================== @import "settings"; +@import "typography"; +@import "resets"; @import "helpers"; @import "sprites"; +@import "icons"; @import "grids"; \ No newline at end of file diff --git a/mixins/helpers.less b/mixins/helpers.less index 25e6efe..8f65e9c 100644 --- a/mixins/helpers.less +++ b/mixins/helpers.less @@ -2,50 +2,7 @@ // Misc helpers and shortcuts // ============================================== -.clearfix { - zoom: 1; - &:after { - display: block; - visibility: hidden; - height: 0; - clear: both; - content: "."; - } -} - -.font-size-rems(@px-size, @context-px-size:@base-font-size){ - @rem-value: @px-size; - @px-value: (@px-size * @context-px-size); - font-size: ~"@{px-value}px"; - font-size: ~"@{rem-value}rem"; -} - -.font-size-ems(@target-px-size, @context-px-size:@base-font-size) { - font-size: (@target-px-size / @context-px-size) * 1em; -} - -.inline-block() when (@using-ieclasses) { - display: inline-block; - .ie6 &, .ie7 & { - display: inline; - zoom: 1; - } -} - -.inline-block() when (@using-ieclasses = false) { - display: inline-block; - *display: inline; - *zoom: 1; -} - -.placeholder(@color: #DDD) { - :-moz-placeholder { - color: @color; - } - ::-webkit-input-placeholder { - color: @color; - } -} +// Shortcuts -------------------------------- .border-radius(@radius: 5px) { -moz-border-radius: @radius; @@ -67,7 +24,7 @@ border-bottom-right-radius: @bottom-right; } -.box-sizing( @type: border-box) { +.box-sizing(@type: border-box) { -moz-box-sizing: @type; -webkit-box-sizing: @type; -ms-box-sizing: @type; @@ -93,6 +50,15 @@ transform: rotate(@rotation); } +.placeholder(@color: #DDD) { + :-moz-placeholder { + color: @color; + } + ::-webkit-input-placeholder { + color: @color; + } +} + // Gradients #gradient { .horizontal (@startColor: #555, @endColor: #333) { @@ -139,6 +105,33 @@ } } +// Helpers -------------------------------- + +.clearfix { + zoom: 1; + &:after { + display: block; + visibility: hidden; + height: 0; + clear: both; + content: "."; + } +} + +.inline-block() when (@using-ieclasses) { + display: inline-block; + .ie6 &, .ie7 & { + display: inline; + zoom: 1; + } +} + +.inline-block() when (@using-ieclasses = false) { + display: inline-block; + *display: inline; + *zoom: 1; +} + .center-block() { display: block; margin: 0 auto; @@ -154,6 +147,41 @@ width: @width; } +.ir() { + border: 0; + font: 0/0 a; + text-shadow: none; + color: transparent; + background-color: transparent; +} + +.hidden() { + display: none !important; + visibility: hidden; +} + +.visually-hidden() { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + &.focusable:active, + &.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; + } +} + +// System -------------------------------- + .nudge-l( @pos ) when ( @pos = 0 ) {} .nudge-l( @pos ) when ( @pos > 0 ) { left: @pos; } .nudge-r( @pos ) when ( @pos = 0 ) {} diff --git a/mixins/icons.less b/mixins/icons.less new file mode 100644 index 0000000..a0bd1db --- /dev/null +++ b/mixins/icons.less @@ -0,0 +1,90 @@ +// ============================================== +// Generated content icon helpers +// ---------------------------------------------- +// These can only be used on block or inline-block elements. +// ============================================== + +.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) { + .generatedcontent & { + position: relative; + padding-left: (@width + @pad) * 1px; + } + .generatedcontent &:before { + ._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid ); + top: @nudge-top; + left: @nudge-left; + } +} + +.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) { + position: relative; + padding-left: (@width + @pad) * 1px; + &:before { + ._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid ); + top: @nudge-top; + left: @nudge-left; + } +} + +.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) { + .generatedcontent & { + padding-right: (@width + @pad) * 1px; + position: relative; + } + .generatedcontent &:before { + ._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid ); + top: @nudge-top; + right: @nudge-right; + } +} + +.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) { + position: relative; + padding-right: (@width + @pad) * 1px; + &:before { + ._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid ); + top: @nudge-top; + right: @nudge-right; + } +} + +.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) { + .generatedcontent &:before { + .sprite-pos(@x, @y, @sprite-grid); + .nudge-l(@nudge-left); + .nudge-t(@nudge-top); + } +} + +.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) { + &:before { + .sprite-pos(@x, @y, @sprite-grid); + .nudge-l(@nudge-left); + .nudge-t(@nudge-top); + } +} + +.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) { + .generatedcontent &:before { + .sprite-pos(@x, @y, @sprite-grid); + .nudge-r(@nudge-right); + .nudge-t(@nudge-top); + } +} + +.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) { + &:before { + .sprite-pos(@x, @y, @sprite-grid); + .nudge-r(@nudge-right); + .nudge-t(@nudge-top); + } +} + +// ---- internal use mixins ----------------------- + +._generated-icon(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) { + position: absolute; + display: block; + content: ' '; + .sprite-sized(@x, @y, @width, @height, @sprite-image, @sprite-grid); +} diff --git a/mixins/resets.less b/mixins/resets.less new file mode 100644 index 0000000..6c4a522 --- /dev/null +++ b/mixins/resets.less @@ -0,0 +1,283 @@ +.normalize() { + + /* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */ + + article, + aside, + details, + figcaption, + figure, + footer, + header, + hgroup, + nav, + section, + summary { + display: block; + } + audio, + canvas, + video { + display: inline-block; + *display: inline; + *zoom: 1; + } + audio:not([controls]) { + display: none; + height: 0; + } + [hidden] { + display: none; + } + html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + } + html, + button, + input, + select, + textarea { + font-family: sans-serif; + } + body { + margin: 0; + } + a:focus { + outline: thin dotted; + } + a:hover, + a:active { + outline: 0; + } + h1 { + font-size: 2em; + margin: 0.67em 0; + } + h2 { + font-size: 1.5em; + margin: 0.83em 0; + } + h3 { + font-size: 1.17em; + margin: 1em 0; + } + h4 { + font-size: 1em; + margin: 1.33em 0; + } + h5 { + font-size: 0.83em; + margin: 1.67em 0; + } + h6 { + font-size: 0.75em; + margin: 2.33em 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; + } + p, + pre { + margin: 1em 0; + } + 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; + } + dl, + menu, + ol, + ul { + margin: 1em 0; + } + dd { + margin: 0 0 0 40px; + } + menu, + ol, + ul { + padding: 0 0 0 40px; + } + nav ul, + nav ol { + list-style: none; + list-style-image: none; + } + img { + border: 0; + -ms-interpolation-mode: bicubic; + } + svg:not(:root) { + overflow: hidden; + } + figure { + margin: 0; + } + form { + margin: 0; + } + fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; + } + legend { + border: 0; + padding: 0; + white-space: normal; + *margin-left: -7px; + } + button, + input, + select, + textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; + } + button, + input { + line-height: normal; + } + button, + input[type="button"], + input[type="reset"], + input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + *overflow: visible; + } + button[disabled], + input[disabled] { + cursor: default; + } + input[type="checkbox"], + input[type="radio"] { + box-sizing: border-box; + padding: 0; + *height: 13px; + *width: 13px; + } + 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, + input[type="search"]::-webkit-search-cancel-button { + -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; + } +} + +.reset() { + + /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */ + + 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; + } + 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; + } + +} \ No newline at end of file diff --git a/mixins/settings.less b/mixins/settings.less index 5048516..3ed1010 100644 --- a/mixins/settings.less +++ b/mixins/settings.less @@ -9,6 +9,8 @@ @using-ieclasses: true; // whether or not the markup has html5-boilerplate style IE classes in it or not @using-modernizr: false; // whether or not modernizer feature-detection classes are being used +// Typography -------------------------------- + @base-font-size: 16; // base pixel font size. Used as a default for px-em conversions // Sprites -------------------------------- diff --git a/mixins/sprites.less b/mixins/sprites.less index a4ac861..66eaba2 100644 --- a/mixins/sprites.less +++ b/mixins/sprites.less @@ -25,94 +25,3 @@ background-image: @sprite-image; background-repeat: no-repeat; } - -// ============================================== -// Generated content icon helpers -// ---------------------------------------------- -// These can only be used on block or inline-block elements. -// ============================================== - -.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) { - .generatedcontent & { - position: relative; - padding-left: (@width + @pad) * 1px; - } - .generatedcontent &:before { - ._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid ); - top: @nudge-top; - left: @nudge-left; - } -} - -.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) { - position: relative; - padding-left: (@width + @pad) * 1px; - &:before { - ._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid ); - top: @nudge-top; - left: @nudge-left; - } -} - -.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) { - .generatedcontent & { - padding-right: (@width + @pad) * 1px; - position: relative; - } - .generatedcontent &:before { - ._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid ); - top: @nudge-top; - right: @nudge-right; - } -} - -.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) { - position: relative; - padding-right: (@width + @pad) * 1px; - &:before { - ._generated-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid ); - top: @nudge-top; - right: @nudge-right; - } -} - -.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) { - .generatedcontent &:before { - .sprite-pos(@x, @y, @sprite-grid); - .nudge-l(@nudge-left); - .nudge-t(@nudge-top); - } -} - -.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) { - &:before { - .sprite-pos(@x, @y, @sprite-grid); - .nudge-l(@nudge-left); - .nudge-t(@nudge-top); - } -} - -.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) { - .generatedcontent &:before { - .sprite-pos(@x, @y, @sprite-grid); - .nudge-r(@nudge-right); - .nudge-t(@nudge-top); - } -} - -.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) { - &:before { - .sprite-pos(@x, @y, @sprite-grid); - .nudge-r(@nudge-right); - .nudge-t(@nudge-top); - } -} - -// ---- internal use mixins ----------------------- - -._generated-icon(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) { - position: absolute; - display: block; - content: ' '; - .sprite-sized(@x, @y, @width, @height, @sprite-image, @sprite-grid); -} diff --git a/mixins/typography.less b/mixins/typography.less new file mode 100644 index 0000000..9acac04 --- /dev/null +++ b/mixins/typography.less @@ -0,0 +1,14 @@ +// ============================================== +// Typography related mixins +// ============================================== + +.font-size-rems(@px-size, @context-px-size:@base-font-size){ + @rem-value: @px-size; + @px-value: (@px-size * @context-px-size); + font-size: ~"@{px-value}px"; + font-size: ~"@{rem-value}rem"; +} + +.font-size-ems(@target-px-size, @context-px-size:@base-font-size) { + font-size: (@target-px-size / @context-px-size) * 1em; +}