mirror of
https://github.com/clearleft/clearless.git
synced 2026-01-07 21:03:51 -05:00
More doc updates
This commit is contained in:
Mark Perkins
119
README.md
119
README.md
@@ -10,10 +10,22 @@ The core tenets of this mixin library are to *avoid output bloat wherever possib
|
||||
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.
|
||||
Simply `@import` the `mixins/all.less` file into the top of your main Less file, and then (optionally) override any of the settings as described below.
|
||||
|
||||
Settings
|
||||
--------
|
||||
The `mixins/all.less` file itself simply imports all the individual Less files into one place. The mixins and settings for these individual files are documented under in their various groupings below:
|
||||
|
||||
* [Settings](#global-settings)
|
||||
* [Resets](#resets)
|
||||
* [Shortcuts & Helpers](#shortcuts--helpers)
|
||||
* [Typography](#typography)
|
||||
* [Sprites](#sprites)
|
||||
* [Icons](#icons)
|
||||
* [Grids](#grids)
|
||||
|
||||
|
||||
|
||||
Global 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`.
|
||||
|
||||
@@ -30,7 +42,9 @@ The following global settings are defined:
|
||||
|
||||
### @using-modernizr
|
||||
|
||||
`@using-modernizr: false;`
|
||||
```css
|
||||
@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.
|
||||
|
||||
@@ -40,7 +54,9 @@ Modernizr feature tests currently used (if using a custom Modernizr build):
|
||||
|
||||
### @using-ieclasses
|
||||
|
||||
`@using-ieclasses: true;`
|
||||
```css
|
||||
@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.
|
||||
|
||||
@@ -53,13 +69,17 @@ Convinience mixins that should be used *outside of element selectors* as a quick
|
||||
|
||||
### .reset;
|
||||
|
||||
`.reset();`
|
||||
```css
|
||||
.reset();
|
||||
```
|
||||
|
||||
Outputs styles from the '[Meyer Reset](http://meyerweb.com/eric/tools/css/reset/)'.
|
||||
|
||||
### .normalize;
|
||||
|
||||
`.normalize();`
|
||||
```css
|
||||
.normalize();
|
||||
```
|
||||
|
||||
Outputs styles from [normalize.css](http://necolas.github.com/normalize.css/).
|
||||
|
||||
@@ -70,6 +90,81 @@ 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.
|
||||
|
||||
|
||||
### .border-radius()
|
||||
|
||||
Generates a box-radius property with the appropriate vendor prefixes.
|
||||
|
||||
```css
|
||||
.border-radius( <@radius> );
|
||||
```
|
||||
|
||||
* `@radius`: Radius to round all corners to. Defaults to 5px.
|
||||
|
||||
```css
|
||||
.border-radius( <@top-left>, <@top-right>, <@bottom-left>, <@bottom-right>);
|
||||
```
|
||||
|
||||
* `@top-left`: Radius to round the top-left corner to. Defaults to 5px.
|
||||
* `@top-right`: Radius to round the top-right corner to. Defaults to 5px.
|
||||
* `@bottom-left`: Radius to round the bottom-left corner to. Defaults to 5px.
|
||||
* `@bottom-right`: Radius to round the bottom-right corner to. Defaults to 5px.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.div1 {
|
||||
.border-radius( 5px );
|
||||
}
|
||||
.div2 {
|
||||
.border-radius( 5px, 7px, 5px, 10px );
|
||||
}
|
||||
|
||||
/* Output: */
|
||||
.div1 {
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.div2 {
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
-webkit-border-top-right-radius: 7px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
-webkit-border-bottom-right-radius: 10px;
|
||||
-moz-border-radius-topleft: 5px;
|
||||
-moz-border-radius-topright: 7px;
|
||||
-moz-border-radius-bottomleft: 5px;
|
||||
-moz-border-radius-bottomright: 10px;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 7px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### .box-sizing()
|
||||
|
||||
Generates a box-sizing property with the appropriate vendor prefixes.
|
||||
|
||||
```css
|
||||
.box-sizing( <@type> );
|
||||
```
|
||||
|
||||
* `@type`: Box-sizing property value. Defaults to border-box.
|
||||
|
||||
```css
|
||||
/* Usage: */
|
||||
.div {
|
||||
.box-sizing( border-box );
|
||||
}
|
||||
/* Output: */
|
||||
.div {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
Typography
|
||||
-------
|
||||
@@ -127,12 +222,6 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
Grids
|
||||
-------
|
||||
|
||||
Documentation coming soon.
|
||||
|
||||
|
||||
Sprites
|
||||
-------
|
||||
|
||||
@@ -145,6 +234,10 @@ Icons
|
||||
Documentation coming soon.
|
||||
|
||||
|
||||
Grids
|
||||
-------
|
||||
|
||||
Documentation coming soon.
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -287,7 +287,7 @@ h2 {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background-image: url('/examples/sprite.png');
|
||||
background-image: url('../examples/sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: -100px -50px;
|
||||
height: 11px;
|
||||
@@ -466,7 +466,7 @@ h2 {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background-image: url('/examples/sprite.png');
|
||||
background-image: url('../examples/sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: -100px -50px;
|
||||
height: 11px;
|
||||
@@ -490,7 +490,7 @@ h2 {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: ' ';
|
||||
background-image: url('/examples/sprite.png');
|
||||
background-image: url('../examples/sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 0px;
|
||||
height: 28px;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
// Default settings override
|
||||
|
||||
@sprite-image: url('/examples/sprite.png');
|
||||
@sprite-image: url('../examples/sprite.png');
|
||||
@using-modernizr: false;
|
||||
@using-ieclasses: true;
|
||||
|
||||
|
||||
@@ -5,7 +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" href="/_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
@@ -5,7 +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" href="/_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
@@ -5,7 +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" href="/_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
@@ -5,7 +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" href="/_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
@@ -5,7 +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" href="/_compiled/example.css" type="text/css">
|
||||
<link rel="stylesheet" href="../_compiled/example.css" type="text/css">
|
||||
|
||||
<title>ClearLESS Examples</title>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user