handysass 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +41 -0
- data/lib/handysass.rb +9 -0
- data/stylesheets/_handysass.scss +6 -0
- data/stylesheets/handysass/_classes.scss +4 -0
- data/stylesheets/handysass/_mixins.scss +3 -0
- data/stylesheets/handysass/classes/_align.scss +38 -0
- data/stylesheets/handysass/classes/_float.scss +30 -0
- data/stylesheets/handysass/classes/_layout.scss +11 -0
- data/stylesheets/handysass/classes/_text.scss +11 -0
- data/stylesheets/handysass/mixins/_responsive.scss +85 -0
- data/stylesheets/handysass/mixins/_sizing.scss +19 -0
- data/stylesheets/handysass/mixins/_sprite.scss +39 -0
- metadata +72 -0
data/README.md
ADDED
@@ -0,0 +1,41 @@
|
|
1
|
+
Compass HandySass
|
2
|
+
=================
|
3
|
+
|
4
|
+
HandySass is a little utility kit with some extra mixins (as well as classes)
|
5
|
+
for use with Compass.
|
6
|
+
|
7
|
+
|
8
|
+
Installation
|
9
|
+
============
|
10
|
+
|
11
|
+
From the command line:
|
12
|
+
|
13
|
+
(sudo) gem install handysass
|
14
|
+
|
15
|
+
Add to a project:
|
16
|
+
|
17
|
+
// rails: compass.config, other: config.rb
|
18
|
+
require "handysass"
|
19
|
+
|
20
|
+
// command line
|
21
|
+
compass install handysass
|
22
|
+
|
23
|
+
Or create a new project:
|
24
|
+
|
25
|
+
compass -r handysass -f handysass project_directory
|
26
|
+
|
27
|
+
|
28
|
+
Usage
|
29
|
+
=====
|
30
|
+
|
31
|
+
You can include as much or as little of HandySASS' features as you want:
|
32
|
+
|
33
|
+
* `/mixins`
|
34
|
+
* `/responsive`: Breakpoint mixins (e.g. `xs-screen`, `sm-screen-min`, `md-screen-max`)
|
35
|
+
* `/sizing`: Quick little utilites for specifying width/height
|
36
|
+
* `/sprite`: A sprite positioning mixin for consistent-width srites
|
37
|
+
* `/classes`
|
38
|
+
* `/align`: Text alignment classes, including RTL alternatives
|
39
|
+
* `/float`: Float classes, including RTL alternatives
|
40
|
+
* `/layout`: Alias classes for `clearfix` and `inline-block`
|
41
|
+
* `/text`: Alias classes for `ellipsis` and `hide-text`
|
data/lib/handysass.rb
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
.text-left {
|
2
|
+
text-align: left;
|
3
|
+
}
|
4
|
+
|
5
|
+
.text-right {
|
6
|
+
text-align: right;
|
7
|
+
}
|
8
|
+
|
9
|
+
.text-center {
|
10
|
+
text-align: center;
|
11
|
+
}
|
12
|
+
|
13
|
+
.text-justify {
|
14
|
+
text-align: justify;
|
15
|
+
}
|
16
|
+
|
17
|
+
// For mutli-directional stylesheets
|
18
|
+
@if ($handysass-enable-rtl) {
|
19
|
+
.text-norm {
|
20
|
+
.ltr & {
|
21
|
+
@extend .text-left;
|
22
|
+
}
|
23
|
+
|
24
|
+
.rtl & {
|
25
|
+
@extend .text-right;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
.text-alt {
|
30
|
+
.ltr & {
|
31
|
+
@extend .text-right;
|
32
|
+
}
|
33
|
+
|
34
|
+
.rtl & {
|
35
|
+
@extend .text-left;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
.pull-left {
|
2
|
+
float: left;
|
3
|
+
}
|
4
|
+
|
5
|
+
.pull-right {
|
6
|
+
float: right;
|
7
|
+
}
|
8
|
+
|
9
|
+
// For mutli-directional stylesheets
|
10
|
+
@if ($handysass-enable-rtl) {
|
11
|
+
.pull {
|
12
|
+
.ltr & {
|
13
|
+
@extend .pull-left;
|
14
|
+
}
|
15
|
+
|
16
|
+
.rtl & {
|
17
|
+
@extend .pull-right;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
.pull-alt {
|
22
|
+
.ltr & {
|
23
|
+
@extend .pull-right;
|
24
|
+
}
|
25
|
+
|
26
|
+
.rtl & {
|
27
|
+
@extend .pull-left;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}
|
@@ -0,0 +1,85 @@
|
|
1
|
+
$sm-screen: 768px !default;
|
2
|
+
$md-screen: 990px !default;
|
3
|
+
$lg-screen: 1200px !default;
|
4
|
+
|
5
|
+
// Add a screen @media rule for the specified min/max widths.
|
6
|
+
//
|
7
|
+
// Recommended use: keywork argument syntax, for consistency
|
8
|
+
// and for when specifying just the $max argument.
|
9
|
+
//
|
10
|
+
// @param mixed $min The min width of the screen (false to ignore).
|
11
|
+
// @param mixed $max The max width of the screen (false to ignore).
|
12
|
+
|
13
|
+
@mixin screen-size($min:false, $max:false){
|
14
|
+
$rule: "screen";
|
15
|
+
|
16
|
+
@if $min and $max {
|
17
|
+
$rule: "screen and (min-width: " + $min + ") and (max-width: " + $max + ")";
|
18
|
+
}
|
19
|
+
@else if $min {
|
20
|
+
$rule: "screen and (min-width: " + $min + ")";
|
21
|
+
}
|
22
|
+
@else if $max {
|
23
|
+
$rule: "screen and (max-width: " + $max + ")";
|
24
|
+
}
|
25
|
+
|
26
|
+
@media #{$rule} {
|
27
|
+
@content;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
// Extra-Small (Mobile) only
|
32
|
+
@mixin xs-screen{
|
33
|
+
@include screen-size($max: $sm-screen - 1){
|
34
|
+
@content;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Small (Tablet) and up
|
39
|
+
@mixin sm-screen-min{
|
40
|
+
@include screen-size($min: $sm-screen){
|
41
|
+
@content;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
// Small (Tablet) and down
|
46
|
+
@mixin sm-screen-max{
|
47
|
+
@include screen-size($max: $md-screen - 1){
|
48
|
+
@content;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
// Small (Tablet) only
|
53
|
+
@mixin sm-screen{
|
54
|
+
@include screen-size($min: $sm-screen, $max: $md-screen - 1){
|
55
|
+
@content;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
// Medium (Desktop) and up
|
60
|
+
@mixin md-screen-min{
|
61
|
+
@include screen-size($min: $md-screen){
|
62
|
+
@content;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
// Medium (Desktop) and down
|
67
|
+
@mixin md-screen-max{
|
68
|
+
@include screen-size($max: $lg-screen - 1){
|
69
|
+
@content;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
// Medium (Desktop) only
|
74
|
+
@mixin md-screen{
|
75
|
+
@include screen-size($min: $md-screen, $max: $lg-screen - 1){
|
76
|
+
@content;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
// Large (Widescreen) and up
|
81
|
+
@mixin lg-screen{
|
82
|
+
@include screen-size($min: $lg-screen){
|
83
|
+
@content;
|
84
|
+
}
|
85
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
// Set the width and height.
|
2
|
+
//
|
3
|
+
// @param mixed $width The desired width.
|
4
|
+
// @param mixed $height The desired height.
|
5
|
+
|
6
|
+
@mixin size($width, $height) {
|
7
|
+
width: $width;
|
8
|
+
height: $height;
|
9
|
+
}
|
10
|
+
|
11
|
+
// Set the width/height to the same value.
|
12
|
+
//
|
13
|
+
// @uses size()
|
14
|
+
//
|
15
|
+
// @param mixed $size The desired width/height.
|
16
|
+
|
17
|
+
@mixin square($size) {
|
18
|
+
@include size($size, $size);
|
19
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
// Internal helper function
|
2
|
+
@mixin -handy-sprite($left, $top, $width, $height){
|
3
|
+
background-position: (-1 * ($left - 1) * $width) (-1 * ($top - 1) * $height);
|
4
|
+
}
|
5
|
+
|
6
|
+
// Sprite position builder.
|
7
|
+
//
|
8
|
+
// Sets the background position of your sprite,
|
9
|
+
// based on the offset and size you provide. Also
|
10
|
+
// handles hover position if desired.
|
11
|
+
//
|
12
|
+
// $left/$top are 1-indexed, meant to represent col/row coords.
|
13
|
+
//
|
14
|
+
// Meant for sprites where each image is the same width/height.
|
15
|
+
//
|
16
|
+
// @uses -handy-sprite()
|
17
|
+
//
|
18
|
+
// @param pixels $left The left offset
|
19
|
+
// @param pixels $top The top offset
|
20
|
+
// @param pixels $width The width of the image
|
21
|
+
// @param pixels $height The height of the image
|
22
|
+
// @param pixels $hover_left The left offset on hover
|
23
|
+
// @param pixels $hover_top The top offset on hover
|
24
|
+
|
25
|
+
@mixin handy-sprite($left, $top, $width, $height, $hover_left:0, $hover_top:0){
|
26
|
+
@include -handy-sprite($left, $top, $width, $height);
|
27
|
+
|
28
|
+
@if $hover_left != 0 or $hover_top != 0 {
|
29
|
+
@if $hover_left == 0 {
|
30
|
+
$hover_left: $left;
|
31
|
+
}
|
32
|
+
@if $hover_top == 0 {
|
33
|
+
$hover_top: $top;
|
34
|
+
}
|
35
|
+
&:hover{
|
36
|
+
@include -handy-sprite($hover_left, $hover_top, $width, $height);
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
metadata
ADDED
@@ -0,0 +1,72 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: handysass
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Doug Wollison
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-01-27 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: compass
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '0.11'
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '0.11'
|
30
|
+
description: A basic utility kit with handy mixins and classes for Compass.
|
31
|
+
email: doug@wollison.net
|
32
|
+
executables: []
|
33
|
+
extensions: []
|
34
|
+
extra_rdoc_files: []
|
35
|
+
files:
|
36
|
+
- README.md
|
37
|
+
- lib/handysass.rb
|
38
|
+
- stylesheets/_handysass.scss
|
39
|
+
- stylesheets/handysass/classes/_layout.scss
|
40
|
+
- stylesheets/handysass/classes/_text.scss
|
41
|
+
- stylesheets/handysass/classes/_align.scss
|
42
|
+
- stylesheets/handysass/classes/_float.scss
|
43
|
+
- stylesheets/handysass/mixins/_responsive.scss
|
44
|
+
- stylesheets/handysass/mixins/_sizing.scss
|
45
|
+
- stylesheets/handysass/mixins/_sprite.scss
|
46
|
+
- stylesheets/handysass/_classes.scss
|
47
|
+
- stylesheets/handysass/_mixins.scss
|
48
|
+
homepage: http://github.com/dougwollison/handysass
|
49
|
+
licenses: []
|
50
|
+
post_install_message:
|
51
|
+
rdoc_options: []
|
52
|
+
require_paths:
|
53
|
+
- lib
|
54
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
55
|
+
none: false
|
56
|
+
requirements:
|
57
|
+
- - ! '>='
|
58
|
+
- !ruby/object:Gem::Version
|
59
|
+
version: '0'
|
60
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
61
|
+
none: false
|
62
|
+
requirements:
|
63
|
+
- - ! '>='
|
64
|
+
- !ruby/object:Gem::Version
|
65
|
+
version: '0'
|
66
|
+
requirements: []
|
67
|
+
rubyforge_project:
|
68
|
+
rubygems_version: 1.8.23
|
69
|
+
signing_key:
|
70
|
+
specification_version: 3
|
71
|
+
summary: A basic utility kit with handy mixins and classes for Compass.
|
72
|
+
test_files: []
|