stylewithclass 1.0.3 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
data/README.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
Stylewithclass
|
|
2
2
|
=========================
|
|
3
3
|
|
|
4
|
-
Style your web pages using pre-defined classes with commonly used CSS properties.
|
|
4
|
+
Style your web pages using pre-defined classes with very commonly used CSS properties.
|
|
5
5
|
|
|
6
|
-
Use Stylewithclass if you want to achieve DRY(Don't-repeat-yourself) CSS code. If you use Stylewithclass, you will end up re-using a lot of CSS code, because it uses pre-defined classes with commonly used CSS properties.
|
|
6
|
+
Use Stylewithclass if you want to achieve DRY(Don't-repeat-yourself) CSS code. If you use Stylewithclass, you will end up re-using a lot of CSS code, because it uses pre-defined classes with very commonly used CSS properties.
|
|
7
7
|
|
|
8
8
|
Installation
|
|
9
9
|
============
|
|
@@ -12,27 +12,24 @@ Install gem from the command line:
|
|
|
12
12
|
|
|
13
13
|
(sudo) gem install stylewithclass
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
Require it using Compass in config.rb:
|
|
16
16
|
|
|
17
17
|
# Edit the project configuration file and add:
|
|
18
18
|
require 'stylewithclass'
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
Import it in your sass/scss file.
|
|
21
|
+
|
|
22
|
+
# import Stylewithclass partial into your sass/scss file
|
|
21
23
|
@import "stylewithclass"
|
|
22
24
|
|
|
23
25
|
Settings
|
|
24
26
|
=========================
|
|
25
27
|
|
|
26
|
-
Set min, max & step for
|
|
27
|
-
|
|
28
|
-
$min-pm: 1; // default
|
|
29
|
-
$max-pm: 50; // default
|
|
30
|
-
$step-pm: 1; // default
|
|
28
|
+
Set min, max & step for padding and margin values.
|
|
31
29
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
$
|
|
35
|
-
$max:fs: 32; // default
|
|
30
|
+
$min-pm: 0; // default (We set zero beacuse margin and paddings are not compiled by default)
|
|
31
|
+
$max-pm: 0; // default (We set zero beacuse margin and paddings are not compiled by default)
|
|
32
|
+
$step-pm: 5; // default
|
|
36
33
|
|
|
37
34
|
Using Stylewithclass
|
|
38
35
|
=========================
|
|
@@ -43,54 +40,65 @@ Padding & Margins
|
|
|
43
40
|
Using Stylewithclass is easy when styling elements using margins & paddings. just begin with a "m-" or a "p-" for margin or padding. Then, specify the "direction". The available "directions" are: "lt-" for left, "rt-" for right, "tp-" for top, "bm-" for bottom, "hor-" for horizontal and "ver-" for vertical. If you don't type any directions it assumes you are using all directions. After specifying directions you specify the amount.
|
|
44
41
|
|
|
45
42
|
Style your html tags with padding: 20.
|
|
46
|
-
|
|
43
|
+
|
|
47
44
|
<div class="p-20"></div>
|
|
48
45
|
|
|
49
46
|
Style your html tags with padding-left: 5 & margin-right: 3.
|
|
50
|
-
|
|
47
|
+
|
|
51
48
|
<div class="p-lt-5"> // padding-left: 5
|
|
52
49
|
<div class="m-rt-3"></div> // margin-right: 3
|
|
53
|
-
</div>
|
|
50
|
+
</div>
|
|
54
51
|
|
|
55
52
|
Style your html tags with padding-top: 20 & padding-bottom: 20.
|
|
56
|
-
|
|
53
|
+
|
|
57
54
|
<div class="p-ver-20"></div>
|
|
58
55
|
|
|
59
56
|
Style your html tags with margin-left: 10 & margin-right: 10.
|
|
60
|
-
|
|
57
|
+
|
|
61
58
|
<div class="m-hor-10"></div>
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
|
|
60
|
+
Text
|
|
64
61
|
=========================
|
|
65
62
|
|
|
66
63
|
Using Stylewithclass to style fonts are easy. You begin with "fs-" for font-size. After that you specify whether you want it to be relative(with ems) or absolute(with px). "r-" is for relative and "a-" is for absolute. After specifying the font size type you specify the amount.
|
|
67
64
|
|
|
68
|
-
Style your fonts with 12px with ems. It assumes that the browser default size is 16px and calculates the right number of ems for you.
|
|
69
|
-
|
|
65
|
+
Style your fonts with 12px with ems. It assumes that the browser default size is 16px and calculates the right number of ems for you.
|
|
66
|
+
|
|
70
67
|
<div class="fs-r-12"></div>
|
|
71
68
|
|
|
72
69
|
Style your fonts with 12px with px.
|
|
73
|
-
|
|
70
|
+
|
|
74
71
|
<div class="fs-a-12"></div>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
72
|
+
|
|
73
|
+
The available font-sizes are `8px 9px 10px 11px 12px 14px 18px 20px 22px 24px 28px 30px 36px 48px`
|
|
74
|
+
|
|
75
|
+
## Text aligns
|
|
76
|
+
|
|
78
77
|
.txt-al-lt // for "text-align: left;"
|
|
79
78
|
.txt-al-c // for "text-align: center;"
|
|
80
79
|
.txt-al-rt // for "text-align: right;"
|
|
81
80
|
|
|
81
|
+
## Font weights
|
|
82
|
+
|
|
83
|
+
.f-w-normal // for "font-weight: normal;"
|
|
84
|
+
.f-w-bold // for "font-weight: bold;"
|
|
85
|
+
.f-w-bolder // for "font-weight: bolder;"
|
|
86
|
+
.f-w-lighter // for "font-weight: lighter;"
|
|
87
|
+
.f-w-inherit // for "font-weight: inherit;"
|
|
88
|
+
.f-w-[100-700] // for "font-weight: [100-700];"
|
|
89
|
+
|
|
82
90
|
Miscellaneous
|
|
83
91
|
=========================
|
|
84
92
|
|
|
85
|
-
In addition, you can style your html tags with positions,
|
|
86
|
-
|
|
87
|
-
|
|
93
|
+
In addition, you can style your html tags with positions, displays, floats, clears & overflow-hidden.
|
|
94
|
+
|
|
95
|
+
|
|
88
96
|
/* Positions */
|
|
89
97
|
.p-a // for "position: absolute;"
|
|
90
98
|
.p-r // for "position: relative;"
|
|
91
99
|
.p-f // for "position: fixed;"
|
|
92
100
|
.p-s // for "position: sticky;"
|
|
93
|
-
|
|
101
|
+
|
|
94
102
|
/* Displays */
|
|
95
103
|
.d-n // for "display: none;"
|
|
96
104
|
.d-bl // for "display: block;"
|
|
@@ -100,12 +108,20 @@ In addition, you can style your html tags with positions, float, clears & overfl
|
|
|
100
108
|
/* Floats */
|
|
101
109
|
.fl-lt // for "float: left;"
|
|
102
110
|
.fl-rt // for "float: right;"
|
|
103
|
-
|
|
111
|
+
|
|
104
112
|
/* Clears */
|
|
105
113
|
.cl-b // for "clear: both;"
|
|
106
114
|
.cl-lt // for "clear: left;"
|
|
107
115
|
.cl-rt // for "clear: right;"
|
|
108
|
-
|
|
116
|
+
|
|
109
117
|
/* Overflow hidden */
|
|
110
118
|
.ov-hid // for "overflow: hidden;"
|
|
111
|
-
|
|
119
|
+
|
|
120
|
+
// Cursor
|
|
121
|
+
.cs-pointer // for "cursor: pointer;"
|
|
122
|
+
|
|
123
|
+
// Additional dimensions
|
|
124
|
+
.w-100 // for "width: 100%;"
|
|
125
|
+
.h-100 // for "height: 100%;"
|
|
126
|
+
|
|
127
|
+
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
//
|
|
1
|
+
//
|
|
2
2
|
// Bootstrap
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
$min-pm: 0 !default;
|
|
6
|
+
$max-pm: 0 !default;
|
|
7
|
+
$step-pm: 5 !default;
|
|
8
|
+
|
|
5
9
|
// Imports
|
|
6
|
-
@import "stylewithclass/settings";
|
|
7
10
|
@import "stylewithclass/margins";
|
|
8
11
|
@import "stylewithclass/paddings";
|
|
9
|
-
@import "stylewithclass/
|
|
12
|
+
@import "stylewithclass/text";
|
|
10
13
|
@import "stylewithclass/misc";
|
|
11
14
|
|
|
12
15
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
//
|
|
1
|
+
//
|
|
2
2
|
// Miscellaneous
|
|
3
3
|
//
|
|
4
|
-
// * Positions
|
|
4
|
+
// * Positions
|
|
5
5
|
// * Displays
|
|
6
6
|
// * Floats
|
|
7
7
|
// * Clears
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
display: inline-block;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
// Floats
|
|
39
|
+
// Floats
|
|
40
40
|
.fl-lt {
|
|
41
41
|
float: left;
|
|
42
42
|
}
|
|
@@ -59,3 +59,16 @@
|
|
|
59
59
|
.ov-hid {
|
|
60
60
|
overflow: hidden;
|
|
61
61
|
}
|
|
62
|
+
|
|
63
|
+
// Cursor
|
|
64
|
+
.cs-pointer {
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Width and height
|
|
69
|
+
.w-100 {
|
|
70
|
+
width: 100%;
|
|
71
|
+
}
|
|
72
|
+
.h-100 {
|
|
73
|
+
height: 100%;
|
|
74
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Fonts
|
|
3
|
+
//
|
|
4
|
+
// * Relative font sizes
|
|
5
|
+
// * Absolute font sizes
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
// Font settings
|
|
9
|
+
$font-sizes: 8 9 10 11 12 14 18 20 22 24 28 30 36 48;
|
|
10
|
+
|
|
11
|
+
// Relative font sizes
|
|
12
|
+
@each $font-size in $font-sizes {
|
|
13
|
+
.fs-r-#{$font-size} {
|
|
14
|
+
font-size: ($font-size / 16)em;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Absolut font sizes
|
|
19
|
+
@each $font-size in $font-sizes {
|
|
20
|
+
.fs-a-#{$font-size} {
|
|
21
|
+
font-size: $font-size * 1px;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Font-weights
|
|
26
|
+
.f-w-normal {
|
|
27
|
+
font-weight: normal;
|
|
28
|
+
}
|
|
29
|
+
.f-w-bold {
|
|
30
|
+
font-weight: bold;
|
|
31
|
+
}
|
|
32
|
+
.f-w-bolder {
|
|
33
|
+
font-weight: bolder;
|
|
34
|
+
}
|
|
35
|
+
.f-w-lighter {
|
|
36
|
+
font-weight: lighter;
|
|
37
|
+
}
|
|
38
|
+
.f-w-inherit {
|
|
39
|
+
font-weight: inherit;
|
|
40
|
+
}
|
|
41
|
+
@for $i from 1 through 7 {
|
|
42
|
+
$font-weight: $i * 100;
|
|
43
|
+
.f-w-#{$font-weight} {
|
|
44
|
+
font-weight: $font-weight;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Text aligns
|
|
49
|
+
.txt-al-lt {
|
|
50
|
+
text-align: left;
|
|
51
|
+
}
|
|
52
|
+
.txt-al-c {
|
|
53
|
+
text-align: center;
|
|
54
|
+
}
|
|
55
|
+
.txt-al-rt {
|
|
56
|
+
text-align: right;
|
|
57
|
+
}
|
metadata
CHANGED
|
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
|
5
5
|
segments:
|
|
6
6
|
- 1
|
|
7
7
|
- 0
|
|
8
|
-
-
|
|
9
|
-
version: 1.0.
|
|
8
|
+
- 4
|
|
9
|
+
version: 1.0.4
|
|
10
10
|
platform: ruby
|
|
11
11
|
authors:
|
|
12
12
|
- Tingan Ho
|
|
@@ -14,7 +14,7 @@ autorequire:
|
|
|
14
14
|
bindir: bin
|
|
15
15
|
cert_chain: []
|
|
16
16
|
|
|
17
|
-
date: 2012-09-15 00:00:00 +
|
|
17
|
+
date: 2012-09-15 00:00:00 +08:00
|
|
18
18
|
default_executable:
|
|
19
19
|
dependencies:
|
|
20
20
|
- !ruby/object:Gem::Dependency
|
|
@@ -30,7 +30,7 @@ dependencies:
|
|
|
30
30
|
version: "0.11"
|
|
31
31
|
type: :runtime
|
|
32
32
|
version_requirements: *id001
|
|
33
|
-
description:
|
|
33
|
+
description: Stylewithclass lets you style your web pages using predefined CSS classes that are commonly used. Such as paddings, margins, position, clear, floats etc.
|
|
34
34
|
email: tingan@clockies.com
|
|
35
35
|
executables: []
|
|
36
36
|
|
|
@@ -42,11 +42,10 @@ files:
|
|
|
42
42
|
- README.md
|
|
43
43
|
- lib/stylewithclass.rb
|
|
44
44
|
- stylesheets/_stylewithclass.scss
|
|
45
|
-
- stylesheets/stylewithclass/_fonts.scss
|
|
46
45
|
- stylesheets/stylewithclass/_margins.scss
|
|
47
46
|
- stylesheets/stylewithclass/_misc.scss
|
|
48
47
|
- stylesheets/stylewithclass/_paddings.scss
|
|
49
|
-
- stylesheets/stylewithclass/
|
|
48
|
+
- stylesheets/stylewithclass/_text.scss
|
|
50
49
|
has_rdoc: true
|
|
51
50
|
homepage: http://github.com/tinganho/stylewithclass
|
|
52
51
|
licenses: []
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Fonts
|
|
3
|
-
//
|
|
4
|
-
// * Relative font sizes
|
|
5
|
-
// * Absolute font sizes
|
|
6
|
-
//
|
|
7
|
-
|
|
8
|
-
// Font settings
|
|
9
|
-
$min-fs: 8 !default;
|
|
10
|
-
$max-fs: 32 !default;
|
|
11
|
-
|
|
12
|
-
// Relative font sizes
|
|
13
|
-
@for $i from $min-fs through $max-fs {
|
|
14
|
-
.fs-r-#{$i} {
|
|
15
|
-
font-size: ($i / 16)em;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
// Absolut font sizes
|
|
20
|
-
@for $i from $min-fs through $max-fs {
|
|
21
|
-
.fs-a-#{$i} {
|
|
22
|
-
font-size: $i * 1px;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
// Text aligns
|
|
27
|
-
.txt-al-lt {
|
|
28
|
-
text-align: left;
|
|
29
|
-
}
|
|
30
|
-
.txt-al-c {
|
|
31
|
-
text-align: center;
|
|
32
|
-
}
|
|
33
|
-
.txt-al-rt {
|
|
34
|
-
text-align: right;
|
|
35
|
-
}
|