stylewithclass 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
|
-
}
|