mirror of
https://github.com/clearleft/clearless.git
synced 2026-01-07 21:03:51 -05:00
Start work on docs, a little reorg on the LESS files
This commit is contained in:
Mark Perkins
133
README.md
133
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.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -5,8 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="http://clearleft.com/favicon.ico" type="image/x-icon" />
|
||||
|
||||
<link rel="stylesheet/less" type="text/css" href="example.less">
|
||||
<script src="less.js"></script>
|
||||
<link rel="stylesheet" href="/_compiled/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
@@ -3,6 +3,9 @@
|
||||
// ==============================================
|
||||
|
||||
@import "settings";
|
||||
@import "typography";
|
||||
@import "resets";
|
||||
@import "helpers";
|
||||
@import "sprites";
|
||||
@import "icons";
|
||||
@import "grids";
|
||||
@@ -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 ) {}
|
||||
|
||||
90
mixins/icons.less
Normal file
90
mixins/icons.less
Normal file
@@ -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);
|
||||
}
|
||||
283
mixins/resets.less
Normal file
283
mixins/resets.less
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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 --------------------------------
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
14
mixins/typography.less
Normal file
14
mixins/typography.less
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user