mirror of
https://github.com/clearleft/clearless.git
synced 2026-01-07 21:03:51 -05:00
Initial commit
This commit is contained in:
Mark Perkins
5
README.md
Normal file
5
README.md
Normal file
@@ -0,0 +1,5 @@
|
||||
ClearLESS
|
||||
=========
|
||||
|
||||
A reuseable collection of LESS mixins to help speed up development and increase maintainability.
|
||||
|
||||
66
examples/example.less
Normal file
66
examples/example.less
Normal file
@@ -0,0 +1,66 @@
|
||||
@import "/mixins/all";
|
||||
|
||||
// Default settings override
|
||||
@sprite-image: url('/examples/sprite.png');
|
||||
@using-modernizr: false;
|
||||
@using-ieclasses: true;
|
||||
|
||||
@column-width: 60px;
|
||||
@gutter-width: 60px;
|
||||
|
||||
body {
|
||||
background-color: #EEE;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.primary,
|
||||
.secondary,
|
||||
.test1,
|
||||
.test2 {
|
||||
.float-column();
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
.float-wrapper();
|
||||
}
|
||||
|
||||
.primary {
|
||||
.span(10);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
.span(6);
|
||||
}
|
||||
|
||||
.test1 {
|
||||
.span(3,6);
|
||||
}
|
||||
|
||||
.test2 {
|
||||
.span(3,6);
|
||||
}
|
||||
|
||||
|
||||
.more {
|
||||
.inline-block();
|
||||
.icon-right(2, 1, 6px, 11px, 10px, 0, 4px)
|
||||
}
|
||||
|
||||
.nav li {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
.icon-left(0, 0, 28px, 28px, 10px, 0, 2px);
|
||||
}
|
||||
|
||||
.nav li.rockets {
|
||||
.icon-left-pos(0,1);
|
||||
}
|
||||
|
||||
.nav li.runners {
|
||||
.icon-left-pos(1,0);
|
||||
}
|
||||
|
||||
.nav li.ghosts {
|
||||
.icon-left-pos(1,1);
|
||||
}
|
||||
50
examples/index.html
Normal file
50
examples/index.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="generatedcontent">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link rel="stylesheet/less" type="text/css" href="example.less">
|
||||
<script src="less.js"></script>
|
||||
|
||||
<title>Clearless Examples</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="primary">
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p><a href="#" class="more">Read more</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="secondary">
|
||||
|
||||
<ul class="nav">
|
||||
<li class="robots"><a href="#">Robots</a></li>
|
||||
<li class="rockets"><a href="#">Rockets</a></li>
|
||||
<li class="runners"><a href="#">Runners</a></li>
|
||||
<li class="ghosts"><a href="#">Ghosts</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="test1">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
|
||||
<div class="test2">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
9
examples/less.js
Normal file
9
examples/less.js
Normal file
File diff suppressed because one or more lines are too long
BIN
examples/sprite.png
Normal file
BIN
examples/sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
4
mixins/all.less
Normal file
4
mixins/all.less
Normal file
@@ -0,0 +1,4 @@
|
||||
@import "settings";
|
||||
@import "helpers";
|
||||
@import "sprites";
|
||||
@import "grids";
|
||||
47
mixins/grids.less
Normal file
47
mixins/grids.less
Normal file
@@ -0,0 +1,47 @@
|
||||
|
||||
@grid-width: (@column-width*@total-columns) + (@gutter-width*(@total-columns - 1));
|
||||
|
||||
.float-wrapper() {
|
||||
.clearfix();
|
||||
}
|
||||
|
||||
.float-column() {
|
||||
display: inline;
|
||||
float: left;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.inline-wrapper() {
|
||||
letter-spacing: -0.31em;
|
||||
*letter-spacing: normal;
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
.inline-column() {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.span( @span, @total-columns:@total-columns ) {
|
||||
@calc-column-width: 100%*((((@gutter-width+@column-width)*@span)-@gutter-width) / @grid-width);
|
||||
@calc-gutter-width: 100%*(@gutter-width/@grid-width);
|
||||
width: @calc-column-width;
|
||||
margin-left: @calc-gutter-width;
|
||||
}
|
||||
|
||||
.column( @span, @total-columns:@total-columns ) {
|
||||
.float-column();
|
||||
.span( @span, @total-columns );
|
||||
}
|
||||
|
||||
.inline-column( @span, @total-columns:@total-columns ) {
|
||||
.inline-column();
|
||||
.span( @span, @total-columns );
|
||||
}
|
||||
153
mixins/helpers.less
Normal file
153
mixins/helpers.less
Normal file
@@ -0,0 +1,153 @@
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
&:after {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
clear: both;
|
||||
content: ".";
|
||||
}
|
||||
}
|
||||
|
||||
.font-size-ems(@target-px-size, @context-px-size:@base-font-size-px) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.border-radius(@radius: 5px) {
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
.border-radius(@top-left: 5px, @top-right: 5px, @bottom-left: 5px, @bottom-right: 5px) {
|
||||
-webkit-border-top-left-radius: @top-left;
|
||||
-webkit-border-top-right-radius: @top-right;
|
||||
-webkit-border-bottom-left-radius: @bottom-left;
|
||||
-webkit-border-bottom-right-radius: @bottom-right;
|
||||
-moz-border-radius-topleft: @top-left;
|
||||
-moz-border-radius-topright: @top-right;
|
||||
-moz-border-radius-bottomleft: @bottom-left;
|
||||
-moz-border-radius-bottomright: @bottom-right;
|
||||
border-top-left-radius: @top-left;
|
||||
border-top-right-radius: @top-right;
|
||||
border-bottom-left-radius: @bottom-left;
|
||||
border-bottom-right-radius: @bottom-right;
|
||||
}
|
||||
|
||||
.box-sizing( @type: border-box) {
|
||||
-moz-box-sizing: @type;
|
||||
-webkit-box-sizing: @type;
|
||||
-ms-box-sizing: @type;
|
||||
box-sizing: @type;
|
||||
}
|
||||
|
||||
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||
-webkit-box-shadow: @shadow;
|
||||
-moz-box-shadow: @shadow;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.transition(@transition) {
|
||||
-webkit-transition: @transition;
|
||||
-moz-transition: @transition;
|
||||
transition: @transition;
|
||||
}
|
||||
|
||||
.rotate(@rotation) {
|
||||
-webkit-transform: rotate(@rotation);
|
||||
-moz-transform: rotate(@rotation);
|
||||
-o-transform: rotate(@rotation);
|
||||
transform: rotate(@rotation);
|
||||
}
|
||||
|
||||
// Gradients
|
||||
#gradient {
|
||||
.horizontal (@startColor: #555, @endColor: #333) {
|
||||
background-color: @endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); /* Konqueror */
|
||||
background-image: -moz-linear-gradient(left, @startColor, @endColor); /* FF 3.6+ */
|
||||
background-image: -ms-linear-gradient(left, @startColor, @endColor); /* IE10 */
|
||||
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
|
||||
background-image: -webkit-linear-gradient(left, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
|
||||
background-image: -o-linear-gradient(left, @startColor, @endColor); /* Opera 11.10 */
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); /* IE6 & IE7 */
|
||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
|
||||
background-image: linear-gradient(left, @startColor, @endColor); /* the standard */
|
||||
}
|
||||
.vertical (@startColor: #555, @endColor: #333) {
|
||||
background-color: @endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */
|
||||
background-image: -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */
|
||||
background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
|
||||
background-image: -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
|
||||
background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */
|
||||
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
|
||||
background-image: linear-gradient(@startColor, @endColor); /* the standard */
|
||||
}
|
||||
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
|
||||
background-color: @endColor;
|
||||
background-repeat: repeat-x;
|
||||
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); /* FF 3.6+ */
|
||||
background-image: -ms-linear-gradient(@deg, @startColor, @endColor); /* IE10 */
|
||||
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
|
||||
background-image: -o-linear-gradient(@deg, @startColor, @endColor); /* Opera 11.10 */
|
||||
background-image: linear-gradient(@deg, @startColor, @endColor); /* the standard */
|
||||
}
|
||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
|
||||
background-color: @endColor;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
|
||||
background-image: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
|
||||
background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
|
||||
}
|
||||
}
|
||||
|
||||
.center-block() {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.size(@thesize) {
|
||||
height: @thesize;
|
||||
width: @thesize;
|
||||
}
|
||||
|
||||
.size(@width, @height) {
|
||||
height: @height;
|
||||
width: @width;
|
||||
}
|
||||
|
||||
.nudge-l( @pos ) when ( @pos = 0 ) {}
|
||||
.nudge-l( @pos ) when ( @pos > 0 ) { left: @pos; }
|
||||
.nudge-r( @pos ) when ( @pos = 0 ) {}
|
||||
.nudge-r( @pos ) when ( @pos > 0 ) { right: @pos; }
|
||||
.nudge-t( @pos ) when ( @pos = 0 ) {}
|
||||
.nudge-t( @pos ) when ( @pos > 0 ) { top: @pos; }
|
||||
.nudge-b( @pos ) when ( @pos = 0 ) {}
|
||||
.nudge-b( @pos ) when ( @pos > 0 ) { top: @pos; }
|
||||
23
mixins/settings.less
Normal file
23
mixins/settings.less
Normal file
@@ -0,0 +1,23 @@
|
||||
// ==============================================
|
||||
// Clearless default settings
|
||||
// ----------------------------------------------
|
||||
// Override on a per-project basis as required.
|
||||
// ==============================================
|
||||
|
||||
// General --------------------------------
|
||||
|
||||
@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
|
||||
|
||||
@base-font-size-px: 16; // base pixel font size. Used as a default for px-em conversions
|
||||
|
||||
// Sprites --------------------------------
|
||||
|
||||
@sprite-image: url('/example.png');
|
||||
@sprite-grid: 50px;
|
||||
|
||||
// Grid --------------------------------
|
||||
|
||||
@total-columns: 16;
|
||||
@column-width: 80px;
|
||||
@gutter-width: 40px;
|
||||
118
mixins/sprites.less
Normal file
118
mixins/sprites.less
Normal file
@@ -0,0 +1,118 @@
|
||||
// ==============================================
|
||||
// Sprite helpers
|
||||
// ==============================================
|
||||
|
||||
.sprite(@x, @y, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
|
||||
.sprite-image(@sprite-image);
|
||||
.sprite-pos(@x, @y, @sprite-grid);
|
||||
}
|
||||
|
||||
.sprite-sized(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
|
||||
.sprite(@x, @y, @sprite-image, @sprite-grid);
|
||||
.size(@width,@height);
|
||||
}
|
||||
|
||||
.sprite-pos(@x, @y, @sprite-grid:@sprite-grid) {
|
||||
background-position: -(@x*@sprite-grid*1px) -(@y*@sprite-grid*1px);
|
||||
}
|
||||
|
||||
.sprite-pos-sized(@x, @y, @width, @height, @sprite-grid:@sprite-grid) {
|
||||
.sprite-pos(@x, @y, @sprite-grid);
|
||||
.size(@width,@height);
|
||||
}
|
||||
|
||||
.sprite-image(@sprite-image:@sprite-image) {
|
||||
background-image: @sprite-image;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// ==============================================
|
||||
// Generated content icon helpers
|
||||
// ----------------------------------------------
|
||||
// These can only be used on block or inline-block elements.
|
||||
// ==============================================
|
||||
|
||||
.icon-left(@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-left(@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;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-right(@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;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-right(@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-left-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-left-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);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-right-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);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-right-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);
|
||||
}
|
||||
Reference in New Issue
Block a user