compass-less-plugin 0.8 → 1.0.beta.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +88 -32
- data/compass-less-plugin.gemspec +3 -3
- data/lib/{lessframework.rb → less.rb} +0 -0
- data/stylesheets/less/_framework.scss +39 -0
- data/stylesheets/less/_reset.scss +18 -0
- data/stylesheets/less/typography/_16px.scss +35 -0
- data/stylesheets/less/typography/_17px.scss +35 -0
- data/stylesheets/less/typography/_18px.scss +37 -0
- data/templates/project/example.html +16 -0
- data/templates/project/less.sass +19 -0
- data/templates/project/manifest.rb +3 -8
- data/templates/project/partials/_default.sass +7 -0
- data/templates/project/partials/_global.sass +28 -0
- data/templates/project/partials/_high-px-ratio.scss +8 -0
- data/templates/project/partials/_mobile.sass +8 -0
- data/templates/project/partials/_tablet.sass +8 -0
- data/templates/project/partials/_wide-mobile.sass +8 -0
- metadata +30 -26
- data/stylesheets/lessframework/_grid.scss +0 -30
- data/stylesheets/lessframework/_reset.scss +0 -3
- data/stylesheets/lessframework/reset/_utilities.scss +0 -30
- data/stylesheets/lessframework/text/_13.scss +0 -38
- data/stylesheets/lessframework/text/_15.scss +0 -37
- data/templates/project/partials/_11.sass +0 -6
- data/templates/project/partials/_13.sass +0 -6
- data/templates/project/partials/_3.sass +0 -7
- data/templates/project/partials/_5.sass +0 -7
- data/templates/project/partials/_8.sass +0 -5
- data/templates/project/partials/_base.sass +0 -4
- data/templates/project/partials/_iphone4.scss +0 -5
- data/templates/project/styles.sass +0 -28
data/README.mkdn
CHANGED
@@ -1,10 +1,20 @@
|
|
1
1
|
Less Framework Compass Plugin
|
2
2
|
=============================
|
3
3
|
|
4
|
-
This plugin adds Less Framework
|
4
|
+
This plugin adds Less Framework 4 to [Compass](http://compass-style.org/).
|
5
5
|
|
6
|
-
Less Framework
|
7
|
-
[http:/lessframework.com/](http://lessframework.com/)
|
6
|
+
Less Framework was written by Joni Korpi. For more information, visit the
|
7
|
+
official site at [http:/lessframework.com/](http://lessframework.com/)
|
8
|
+
|
9
|
+
|
10
|
+
Less Framework 4
|
11
|
+
================
|
12
|
+
|
13
|
+
Less Framework 4 was a significant upgrade to the version that came before it.
|
14
|
+
As a result, this plugin is now **backwards incompatible** with earlier
|
15
|
+
versions.
|
16
|
+
|
17
|
+
If you need to use Less Framework 3, use version 0.8 of this plugin.
|
8
18
|
|
9
19
|
|
10
20
|
Installation
|
@@ -16,23 +26,45 @@ Installation
|
|
16
26
|
Getting Started
|
17
27
|
===============
|
18
28
|
|
19
|
-
To create a Compass project using Less Framework
|
29
|
+
To create a Compass project using Less Framework, enter:
|
30
|
+
|
31
|
+
compass create -r less my_project --using less
|
32
|
+
|
33
|
+
The above command will generate a directory named `my_project` populated with
|
34
|
+
the Compass project files. If you look in the project `src` directory, you will
|
35
|
+
find a `less.scss` file and a `partials` directory.
|
20
36
|
|
21
|
-
|
37
|
+
`less.scss` is the plugin bootstrap file, and imports all necessary support
|
38
|
+
files to use the framework. This file can also be used to configure some of the
|
39
|
+
plugin settings (see the `Framework Configuration Variables` section for more
|
40
|
+
details).
|
22
41
|
|
23
|
-
The
|
24
|
-
|
42
|
+
The `partials` directory contains files pre-populated with media queries for
|
43
|
+
the grid layouts defined by the Less Framework:
|
44
|
+
|
45
|
+
* `default` - 10 columns at 992px; for desktops, laptops, tablets in landscape
|
46
|
+
orientation, and all old browsers
|
47
|
+
* `tablet` - 8 columns at 768px; for iPads and other tablets
|
48
|
+
* `mobile` - 3 columns at 320px; for iPhones, iPod Touches, and most other
|
49
|
+
modern mobile devices
|
50
|
+
* `wide-mobile` - 5 columns at 480px; for large mobile devices, as well as
|
51
|
+
iPhones and iPod Touches in landscape orientation
|
52
|
+
* `high-px-ratio` - Overrides styles for devices with a device-pixel-ratio of
|
53
|
+
2+, such as the iPhone 4
|
54
|
+
|
55
|
+
A `partials/global` file is also provided to define global styles shared by all
|
56
|
+
layouts.
|
57
|
+
|
58
|
+
|
59
|
+
Global Reset
|
60
|
+
============
|
25
61
|
|
26
|
-
|
27
|
-
|
28
|
-
* `partials/_5` - For 480 px mobile devices, narrow browsers, and landscape iPhones
|
29
|
-
* `partials/_11` - 984 px layout for those wanting something close to 960 px
|
30
|
-
* `partials/_13` - For laptops, desktops, and hdtvs at 1280 px and beyond.
|
31
|
-
* `partials/_iphone4` - Overrides for iPhone 4 and other high device-pixel-ratio devices
|
62
|
+
The global reset included with the Less Framework can be used by importing the
|
63
|
+
`less/reset` file.
|
32
64
|
|
33
65
|
|
34
|
-
|
35
|
-
|
66
|
+
The Grid
|
67
|
+
========
|
36
68
|
|
37
69
|
To calculate column widths, use the `column(n, [last])` mixin:
|
38
70
|
|
@@ -40,10 +72,10 @@ To calculate column widths, use the `column(n, [last])` mixin:
|
|
40
72
|
@include column(5);
|
41
73
|
}
|
42
74
|
|
43
|
-
This will
|
75
|
+
This will give an element a width of 436px with a 24px gutter to the right.
|
44
76
|
|
45
|
-
To avoid creating the right gutter (e.g. an element is the last column in a
|
46
|
-
set the
|
77
|
+
To avoid creating the right gutter (e.g. an element is the last column in a
|
78
|
+
row), set the `$last` parameter to `true`:
|
47
79
|
|
48
80
|
#sidebar {
|
49
81
|
@include column(3, true);
|
@@ -53,26 +85,50 @@ set the `last` parameter to `true`:
|
|
53
85
|
Typography
|
54
86
|
==========
|
55
87
|
|
56
|
-
Less Framework contains
|
57
|
-
and `1.3`. While this plugin includes the `1.5` line height optimizations by default,
|
58
|
-
this can easily be switched by importing `lessframework/text/13` instead of
|
59
|
-
`lessframework/text/15` in `styles.scss`.
|
88
|
+
Less Framework 4 contains three typographic presets:
|
60
89
|
|
61
|
-
|
62
|
-
|
90
|
+
* `typography/16px` - Optimized for 1.5 line-height; good for fonts like
|
91
|
+
Georgia
|
92
|
+
* `typography/17px` - Optimized for 1.4 line-height; good for fonts like
|
93
|
+
Palatino
|
94
|
+
* `typography/18px` - Optimized for 1.33 line-height; good for fonts like Times
|
63
95
|
|
64
|
-
|
65
|
-
|
66
|
-
=================
|
67
|
-
|
68
|
-
The following typography mixins are available:
|
96
|
+
If one of the above presets are imported, the following CSS classes also become
|
97
|
+
available to help customize your text:
|
69
98
|
|
70
99
|
* `gigantic`
|
71
100
|
* `huge`
|
72
101
|
* `large`
|
102
|
+
* `bigger`
|
73
103
|
* `big`
|
74
|
-
* `normal`
|
75
104
|
* `small`
|
76
105
|
|
77
|
-
|
78
|
-
|
106
|
+
|
107
|
+
Framework Configuration Variables
|
108
|
+
=================================
|
109
|
+
|
110
|
+
The following variables are available to configure the plugin:
|
111
|
+
|
112
|
+
* `$less-grid-element` - The element to mix the grid definition into; defaults
|
113
|
+
to `body`
|
114
|
+
* `$less-grid-padding` - Globally determines if the grid mixin should also
|
115
|
+
include the default padding; defaults to `true`
|
116
|
+
|
117
|
+
Be sure to configure these variables before any `@import` calls are made,
|
118
|
+
otherwise the results may be inconsistent. Also, wrap any string variable
|
119
|
+
values with the `unquote` function, e.g.
|
120
|
+
|
121
|
+
$less-grid-element: unquote("#container");
|
122
|
+
|
123
|
+
|
124
|
+
Mixins
|
125
|
+
======
|
126
|
+
|
127
|
+
* `grid($columns)` - Sets up a grid with given number of columns
|
128
|
+
* `grid-padding($columns)` - Imports the default padding for a grid with the
|
129
|
+
given number of columns; can be used to specify which layouts will use the
|
130
|
+
default grid padding as defined by the Less Framework
|
131
|
+
* `column($columns, $last)` - Sets the width of an element to span the number
|
132
|
+
of given columns with a margin to the right; to disable the margin, set
|
133
|
+
`$last` to `false`
|
134
|
+
* `selection-color($color)` - Sets the background color used for text selection
|
data/compass-less-plugin.gemspec
CHANGED
@@ -3,12 +3,12 @@ $:.push File.expand_path("../lib", __FILE__)
|
|
3
3
|
|
4
4
|
Gem::Specification.new do |s|
|
5
5
|
s.name = "compass-less-plugin"
|
6
|
-
s.version = "0.
|
6
|
+
s.version = "1.0.beta.0"
|
7
7
|
s.platform = Gem::Platform::RUBY
|
8
8
|
s.authors = ["William Wells"]
|
9
|
-
s.email = ["
|
9
|
+
s.email = ["less@hapa.me"]
|
10
10
|
s.homepage = "http://github.com/willhw/compass-less-plugin"
|
11
|
-
s.summary = %q{Compass compatible port of Less Framework
|
11
|
+
s.summary = %q{Compass compatible port of Less Framework}
|
12
12
|
s.description = %q{Less Framework is a cross-device CSS grid system based on using inline media queries.}
|
13
13
|
|
14
14
|
s.rubyforge_project = "compass-less-plugin"
|
File without changes
|
@@ -0,0 +1,39 @@
|
|
1
|
+
$less-grid-element: unquote("body") !default;
|
2
|
+
$less-grid-padding: true !default;
|
3
|
+
$less-font-family: Arial, sans-serif !default;
|
4
|
+
|
5
|
+
@mixin grid($columns, $padding: $less-grid-padding) {
|
6
|
+
@include column($columns, true);
|
7
|
+
|
8
|
+
@if $padding == true {
|
9
|
+
@include grid-padding($columns);
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
@mixin grid-padding($columns) {
|
14
|
+
@if $columns == 10 {
|
15
|
+
padding: 72px 48px 84px;
|
16
|
+
} @else if $columns == 8 {
|
17
|
+
padding: 48px 28px 60px;
|
18
|
+
} @else if $columns == 3 {
|
19
|
+
padding: 48px 34px 60px;
|
20
|
+
} @else if $columns == 5 {
|
21
|
+
padding: 36px 22px 48px;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
@mixin column($columns, $last: false) {
|
26
|
+
width: (68px * $columns) + (24px * ($columns - 1));
|
27
|
+
|
28
|
+
@if $last != true {
|
29
|
+
margin-right: 24px;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
@mixin selection-color($color: unquote("rgb(255,255,158)")) {
|
34
|
+
::selection {background: #{$color};}
|
35
|
+
::-moz-selection {background: #{$color};}
|
36
|
+
img::selection {background: transparent;}
|
37
|
+
img::-moz-selection {background: transparent;}
|
38
|
+
body {-webkit-tap-highlight-color: #{$color};}
|
39
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
|
2
|
+
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
|
3
|
+
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
|
4
|
+
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
|
5
|
+
table, caption, tbody, tfoot, thead, tr, th, td,
|
6
|
+
article, aside, canvas, details, figure, figcaption, hgroup,
|
7
|
+
menu, footer, header, nav, section, summary, time, mark, audio, video {
|
8
|
+
margin: 0;
|
9
|
+
padding: 0;
|
10
|
+
border: 0;
|
11
|
+
}
|
12
|
+
|
13
|
+
article, aside, canvas, figure, figure img, figcaption, hgroup,
|
14
|
+
footer, header, nav, section, audio, video {
|
15
|
+
display: block;
|
16
|
+
}
|
17
|
+
|
18
|
+
a img {border: 0;}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
.gigantic {
|
2
|
+
font-size: 110px;
|
3
|
+
line-height: 120px;
|
4
|
+
letter-spacing: -2px;
|
5
|
+
}
|
6
|
+
|
7
|
+
.huge {
|
8
|
+
font-size: 68px;
|
9
|
+
line-height: 72px;
|
10
|
+
letter-spacing: -1px;
|
11
|
+
}
|
12
|
+
|
13
|
+
.large {
|
14
|
+
font-size: 42px;
|
15
|
+
line-height: 48px;
|
16
|
+
}
|
17
|
+
|
18
|
+
.bigger {
|
19
|
+
font-size: 26px;
|
20
|
+
line-height: 36px;
|
21
|
+
}
|
22
|
+
|
23
|
+
.big {
|
24
|
+
font-size: 22px;
|
25
|
+
line-height: 30px;
|
26
|
+
}
|
27
|
+
|
28
|
+
body {
|
29
|
+
font: 16px/24px Georgia, serif;
|
30
|
+
}
|
31
|
+
|
32
|
+
.small {
|
33
|
+
font-size: 13px;
|
34
|
+
line-height: 18px;
|
35
|
+
}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
.gigantic {
|
2
|
+
font-size: 116px;
|
3
|
+
line-height: 120px;
|
4
|
+
letter-spacing: -2px;
|
5
|
+
}
|
6
|
+
|
7
|
+
.huge {
|
8
|
+
font-size: 72px;
|
9
|
+
line-height: 72px;
|
10
|
+
letter-spacing: -1px;
|
11
|
+
}
|
12
|
+
|
13
|
+
.large {
|
14
|
+
font-size: 44px;
|
15
|
+
line-height: 48px;
|
16
|
+
}
|
17
|
+
|
18
|
+
.bigger {
|
19
|
+
font-size: 28px;
|
20
|
+
line-height: 36px;
|
21
|
+
}
|
22
|
+
|
23
|
+
.big {
|
24
|
+
font-size: 24px;
|
25
|
+
line-height: 30px;
|
26
|
+
}
|
27
|
+
|
28
|
+
body {
|
29
|
+
font: 17px/24px Palatino, Constantia, "Palatino Linotype", serif;
|
30
|
+
}
|
31
|
+
|
32
|
+
.small {
|
33
|
+
font-size: 13px;
|
34
|
+
line-height: 18px;
|
35
|
+
}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
$less-font-family: "Times New Roman", Times, serif;
|
2
|
+
|
3
|
+
.gigantic {
|
4
|
+
font-size: 123px;
|
5
|
+
line-height: 132px;
|
6
|
+
letter-spacing: -2px;
|
7
|
+
}
|
8
|
+
|
9
|
+
.huge {
|
10
|
+
font-size: 76px;
|
11
|
+
line-height: 84px;
|
12
|
+
letter-spacing: -1px;
|
13
|
+
}
|
14
|
+
|
15
|
+
.large {
|
16
|
+
font-size: 47px;
|
17
|
+
line-height: 48px;
|
18
|
+
}
|
19
|
+
|
20
|
+
.bigger {
|
21
|
+
font-size: 29px;
|
22
|
+
line-height: 36px;
|
23
|
+
}
|
24
|
+
|
25
|
+
.big {
|
26
|
+
font-size: 25px;
|
27
|
+
line-height: 30px;
|
28
|
+
}
|
29
|
+
|
30
|
+
body {
|
31
|
+
font: 18px/24px "Times New Roman", Times, serif;
|
32
|
+
}
|
33
|
+
|
34
|
+
.small {
|
35
|
+
font-size: 13px;
|
36
|
+
line-height: 18px;
|
37
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8"/>
|
5
|
+
<title></title>
|
6
|
+
<!--[if lt IE 9]>
|
7
|
+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
8
|
+
<![endif]-->
|
9
|
+
<link rel="stylesheet" media="all" href="stylesheets/less.css"/>
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
11
|
+
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
|
12
|
+
</head>
|
13
|
+
<body lang="en">
|
14
|
+
<div style="height: 600px; background: rgb(60,97,158)"></div>
|
15
|
+
</body>
|
16
|
+
</html>
|
@@ -0,0 +1,19 @@
|
|
1
|
+
/* Less Framework 4
|
2
|
+
http://lessframework.com
|
3
|
+
by Joni Korpi
|
4
|
+
License: http://creativecommons.org/licenses/MIT/ */
|
5
|
+
|
6
|
+
// Less Framework Compass Plugin
|
7
|
+
// by William Wells <less@hapa.me>
|
8
|
+
// https://github.com/willhw/compass-less-plugin
|
9
|
+
|
10
|
+
@import less/reset
|
11
|
+
@import less/framework
|
12
|
+
@import less/typography/16px
|
13
|
+
|
14
|
+
@import partials/global
|
15
|
+
@import partials/default
|
16
|
+
@import partials/tablet
|
17
|
+
@import partials/mobile
|
18
|
+
@import partials/wide-mobile
|
19
|
+
@import partials/high-px-ratio
|
@@ -1,11 +1,6 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
stylesheet "partials/_5.sass"
|
5
|
-
stylesheet "partials/_8.sass"
|
6
|
-
stylesheet "partials/_11.sass"
|
7
|
-
stylesheet "partials/_13.sass"
|
8
|
-
stylesheet "partials/_iphone4.scss"
|
1
|
+
discover :stylesheet
|
2
|
+
|
3
|
+
html "example.html"
|
9
4
|
|
10
5
|
description "Less Framework"
|
11
6
|
|
@@ -0,0 +1,28 @@
|
|
1
|
+
// Global style definitions
|
2
|
+
|
3
|
+
h1
|
4
|
+
@extend .huge
|
5
|
+
|
6
|
+
h2
|
7
|
+
@extend .large
|
8
|
+
|
9
|
+
h3
|
10
|
+
@extend .bigger
|
11
|
+
|
12
|
+
h4
|
13
|
+
@extend .big
|
14
|
+
|
15
|
+
small
|
16
|
+
@extend .small
|
17
|
+
|
18
|
+
|
19
|
+
body
|
20
|
+
background: rgb(232,232,232)
|
21
|
+
color: rgb(60,60,60)
|
22
|
+
|
23
|
+
// Stops Mobile Safari from auto-adjusting font-sizes
|
24
|
+
-webkit-text-size-adjust: 100%
|
25
|
+
|
26
|
+
|
27
|
+
// Selection colors (easy to forget)
|
28
|
+
+selection-color(unquote("rgb(255,255,158)"))
|
metadata
CHANGED
@@ -1,12 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass-less-plugin
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
5
|
-
prerelease:
|
4
|
+
hash: 62196291
|
5
|
+
prerelease: 4
|
6
6
|
segments:
|
7
|
+
- 1
|
8
|
+
- 0
|
9
|
+
- beta
|
7
10
|
- 0
|
8
|
-
|
9
|
-
version: "0.8"
|
11
|
+
version: 1.0.beta.0
|
10
12
|
platform: ruby
|
11
13
|
authors:
|
12
14
|
- William Wells
|
@@ -14,7 +16,7 @@ autorequire:
|
|
14
16
|
bindir: bin
|
15
17
|
cert_chain: []
|
16
18
|
|
17
|
-
date: 2011-
|
19
|
+
date: 2011-02-19 00:00:00 -06:00
|
18
20
|
default_executable:
|
19
21
|
dependencies:
|
20
22
|
- !ruby/object:Gem::Dependency
|
@@ -34,7 +36,7 @@ dependencies:
|
|
34
36
|
version_requirements: *id001
|
35
37
|
description: Less Framework is a cross-device CSS grid system based on using inline media queries.
|
36
38
|
email:
|
37
|
-
-
|
39
|
+
- less@hapa.me
|
38
40
|
executables: []
|
39
41
|
|
40
42
|
extensions: []
|
@@ -47,21 +49,21 @@ files:
|
|
47
49
|
- README.mkdn
|
48
50
|
- Rakefile
|
49
51
|
- compass-less-plugin.gemspec
|
50
|
-
- lib/
|
51
|
-
- stylesheets/
|
52
|
-
- stylesheets/
|
53
|
-
- stylesheets/
|
54
|
-
- stylesheets/
|
55
|
-
- stylesheets/
|
52
|
+
- lib/less.rb
|
53
|
+
- stylesheets/less/_framework.scss
|
54
|
+
- stylesheets/less/_reset.scss
|
55
|
+
- stylesheets/less/typography/_16px.scss
|
56
|
+
- stylesheets/less/typography/_17px.scss
|
57
|
+
- stylesheets/less/typography/_18px.scss
|
58
|
+
- templates/project/example.html
|
59
|
+
- templates/project/less.sass
|
56
60
|
- templates/project/manifest.rb
|
57
|
-
- templates/project/partials/
|
58
|
-
- templates/project/partials/
|
59
|
-
- templates/project/partials/
|
60
|
-
- templates/project/partials/
|
61
|
-
- templates/project/partials/
|
62
|
-
- templates/project/partials/
|
63
|
-
- templates/project/partials/_iphone4.scss
|
64
|
-
- templates/project/styles.sass
|
61
|
+
- templates/project/partials/_default.sass
|
62
|
+
- templates/project/partials/_global.sass
|
63
|
+
- templates/project/partials/_high-px-ratio.scss
|
64
|
+
- templates/project/partials/_mobile.sass
|
65
|
+
- templates/project/partials/_tablet.sass
|
66
|
+
- templates/project/partials/_wide-mobile.sass
|
65
67
|
has_rdoc: true
|
66
68
|
homepage: http://github.com/willhw/compass-less-plugin
|
67
69
|
licenses: []
|
@@ -83,18 +85,20 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
83
85
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
84
86
|
none: false
|
85
87
|
requirements:
|
86
|
-
- - "
|
88
|
+
- - ">"
|
87
89
|
- !ruby/object:Gem::Version
|
88
|
-
hash:
|
90
|
+
hash: 25
|
89
91
|
segments:
|
90
|
-
-
|
91
|
-
|
92
|
+
- 1
|
93
|
+
- 3
|
94
|
+
- 1
|
95
|
+
version: 1.3.1
|
92
96
|
requirements: []
|
93
97
|
|
94
98
|
rubyforge_project: compass-less-plugin
|
95
|
-
rubygems_version: 1.
|
99
|
+
rubygems_version: 1.5.2
|
96
100
|
signing_key:
|
97
101
|
specification_version: 3
|
98
|
-
summary: Compass compatible port of Less Framework
|
102
|
+
summary: Compass compatible port of Less Framework
|
99
103
|
test_files: []
|
100
104
|
|
@@ -1,30 +0,0 @@
|
|
1
|
-
$less-column-width: 60px !default;
|
2
|
-
$less-gutter-width: 24px !default;
|
3
|
-
|
4
|
-
@mixin grid($columns) {
|
5
|
-
@include column($columns, true);
|
6
|
-
|
7
|
-
@if $columns == 13 {
|
8
|
-
padding: 96px 72px 0;
|
9
|
-
} @else if $columns == 11 {
|
10
|
-
padding: 66px 42px 0;
|
11
|
-
} @else if $columns == 8 {
|
12
|
-
padding: 84px 60px 0;
|
13
|
-
} @else if $columns == 5 {
|
14
|
-
padding: 60px 42px 0;
|
15
|
-
} @else if $columns == 3 {
|
16
|
-
padding: 48px 46px 0;
|
17
|
-
}
|
18
|
-
}
|
19
|
-
|
20
|
-
@mixin column($columns, $last: false) {
|
21
|
-
width: ($less-column-width * $columns) + ($less-gutter-width * ($columns - 1));
|
22
|
-
|
23
|
-
@if $last != true {
|
24
|
-
margin-right: $less-gutter-width;
|
25
|
-
}
|
26
|
-
}
|
27
|
-
|
28
|
-
@mixin mobile-safari {
|
29
|
-
-webkit-text-size-adjust: 100%;
|
30
|
-
}
|
@@ -1,30 +0,0 @@
|
|
1
|
-
@mixin less-reset {
|
2
|
-
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
|
3
|
-
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
|
4
|
-
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i,
|
5
|
-
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
|
6
|
-
table, caption, tbody, tfoot, thead, tr, th, td,
|
7
|
-
article, aside, canvas, details, figure, figcaption, hgroup,
|
8
|
-
menu, footer, header, nav, section, summary, time, mark, audio, video {
|
9
|
-
margin: 0;
|
10
|
-
padding: 0;
|
11
|
-
border: 0;
|
12
|
-
}
|
13
|
-
|
14
|
-
article, aside, canvas, figure, figure img, figcaption, hgroup,
|
15
|
-
footer, header, nav, section, audio, video {
|
16
|
-
display: block;
|
17
|
-
}
|
18
|
-
|
19
|
-
a img { border: 0; }
|
20
|
-
|
21
|
-
figure { position: relative; }
|
22
|
-
figure img { width: 100%; }
|
23
|
-
}
|
24
|
-
|
25
|
-
@mixin less-reset-selection {
|
26
|
-
::selection { background: rgb(255,255,0); }
|
27
|
-
::-moz-selection { background: rgb(255,255,0); }
|
28
|
-
img::selection { background: transparent; }
|
29
|
-
img::-moz-selection { background: transparent; }
|
30
|
-
}
|
@@ -1,38 +0,0 @@
|
|
1
|
-
$less-font-family: Palatino, Constantia, "Palatino Linotype", serif;
|
2
|
-
|
3
|
-
@mixin gigantic {
|
4
|
-
font-size: 123px;
|
5
|
-
line-height: 132px;
|
6
|
-
letter-spacing: -2px;
|
7
|
-
}
|
8
|
-
|
9
|
-
@mixin huge {
|
10
|
-
font-size: 76px;
|
11
|
-
line-height: 84px;
|
12
|
-
letter-spacing: -2px;
|
13
|
-
}
|
14
|
-
|
15
|
-
@mixin large {
|
16
|
-
font-size: 46px;
|
17
|
-
line-height: 48px;
|
18
|
-
letter-spacing: -1px;
|
19
|
-
}
|
20
|
-
|
21
|
-
@mixin big {
|
22
|
-
font-size: 29px;
|
23
|
-
line-height: 36px;
|
24
|
-
}
|
25
|
-
|
26
|
-
@mixin normal {
|
27
|
-
font-size: 18px;
|
28
|
-
line-height: 24px;
|
29
|
-
}
|
30
|
-
|
31
|
-
@mixin small {
|
32
|
-
font-size: 13px;
|
33
|
-
line-height: 18px;
|
34
|
-
}
|
35
|
-
|
36
|
-
body {
|
37
|
-
font: 18px/24px $less-font-family;
|
38
|
-
}
|
@@ -1,37 +0,0 @@
|
|
1
|
-
$less-font-family: Helvetica, Arial, sans-serif;
|
2
|
-
|
3
|
-
@mixin gigantic {
|
4
|
-
font-size: 110px;
|
5
|
-
line-height: 120px;
|
6
|
-
letter-spacing: -2px;
|
7
|
-
}
|
8
|
-
|
9
|
-
@mixin huge {
|
10
|
-
font-size: 68px;
|
11
|
-
line-height: 72px;
|
12
|
-
letter-spacing: -1px;
|
13
|
-
}
|
14
|
-
|
15
|
-
@mixin large {
|
16
|
-
font-size: 42px;
|
17
|
-
line-height: 48px;
|
18
|
-
}
|
19
|
-
|
20
|
-
@mixin big {
|
21
|
-
font-size: 26px;
|
22
|
-
line-height: 36px;
|
23
|
-
}
|
24
|
-
|
25
|
-
@mixin normal {
|
26
|
-
font-size: 16px;
|
27
|
-
line-height: 24px;
|
28
|
-
}
|
29
|
-
|
30
|
-
@mixin small {
|
31
|
-
font-size: 13px;
|
32
|
-
line-height: 18px;
|
33
|
-
}
|
34
|
-
|
35
|
-
body {
|
36
|
-
font: 16px/24px $less-font-family;
|
37
|
-
}
|
@@ -1,28 +0,0 @@
|
|
1
|
-
/* Less Framework 3
|
2
|
-
* by Joni Korpi
|
3
|
-
* http://lessframework.com */
|
4
|
-
|
5
|
-
@import partials/base
|
6
|
-
@import lessframework/reset
|
7
|
-
@import lessframework/text/15
|
8
|
-
|
9
|
-
h1
|
10
|
-
@include huge
|
11
|
-
|
12
|
-
h2
|
13
|
-
@include large
|
14
|
-
|
15
|
-
h3
|
16
|
-
@include big
|
17
|
-
|
18
|
-
|
19
|
-
body
|
20
|
-
background: rgb(232,232,232)
|
21
|
-
-webkit-tap-highlight-color: rgb(255,255,0)
|
22
|
-
|
23
|
-
|
24
|
-
@import partials/8
|
25
|
-
@import partials/13
|
26
|
-
@import partials/5
|
27
|
-
@import partials/3
|
28
|
-
@import partials/iphone4
|