stylewithclass 1.0.1 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +90 -0
- data/stylesheets/_stylewithclass.scss +5 -5
- data/stylesheets/stylewithclass/_misc.scss +3 -3
- metadata +2 -2
data/README.md
CHANGED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
Stylewithclass
|
|
2
|
+
=========================
|
|
3
|
+
|
|
4
|
+
Style your web pages using pre-defined classes with commonly used CSS properties.
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
Installation
|
|
8
|
+
============
|
|
9
|
+
|
|
10
|
+
Install gem from the command line:
|
|
11
|
+
|
|
12
|
+
(sudo) gem install stylewithclass
|
|
13
|
+
|
|
14
|
+
Installing Stylewithclass:
|
|
15
|
+
|
|
16
|
+
# Edit the project configuration file and add:
|
|
17
|
+
require 'stylewithclass'
|
|
18
|
+
|
|
19
|
+
#import Stylewithclass partial into your sass/scss file
|
|
20
|
+
@import "stylewithclass"
|
|
21
|
+
|
|
22
|
+
Using Stylewithclass
|
|
23
|
+
=========================
|
|
24
|
+
|
|
25
|
+
Padding & Margins
|
|
26
|
+
=========================
|
|
27
|
+
|
|
28
|
+
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.
|
|
29
|
+
|
|
30
|
+
Style your html tags with paddings: 20
|
|
31
|
+
|
|
32
|
+
<div class="p-20"></div>
|
|
33
|
+
|
|
34
|
+
Style your html tags with padding-left: 5 & margin-right: 3
|
|
35
|
+
|
|
36
|
+
<div class="p-lt-5"> // padding-left: 5
|
|
37
|
+
<div class="m-rt-3"> // margin-right: 3
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
Style your html tags with padding-top: 20 & padding-bottom: 20
|
|
41
|
+
|
|
42
|
+
<div class="p-ver-20"></div>
|
|
43
|
+
|
|
44
|
+
Style your html tags with margin-left: 10 & margin-right: 10
|
|
45
|
+
|
|
46
|
+
<div class="m-hor-10"></div>
|
|
47
|
+
|
|
48
|
+
Fonts
|
|
49
|
+
=========================
|
|
50
|
+
|
|
51
|
+
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.
|
|
52
|
+
|
|
53
|
+
Style your fonts with 12px with ems. It assumes that defualt is 16px and calculates the right number for you.
|
|
54
|
+
|
|
55
|
+
<div class="fs-r-12"></div>
|
|
56
|
+
|
|
57
|
+
Style your fonts with 12px with px
|
|
58
|
+
|
|
59
|
+
<div class="fs-a-12"></div>
|
|
60
|
+
|
|
61
|
+
You can also text align your html tags. The available classes are
|
|
62
|
+
|
|
63
|
+
.txt-al-lt // for "text-align: left;"
|
|
64
|
+
.txt-al-c // for "text-align: center;"
|
|
65
|
+
.txt-al-rt // for "text-align: right;"
|
|
66
|
+
|
|
67
|
+
Miscellaneous
|
|
68
|
+
=========================
|
|
69
|
+
|
|
70
|
+
In addition, you can style your html tags with positions, float, clears & overflow-hidden
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
/* Positions */
|
|
74
|
+
.p-a // for "position: absolute;"
|
|
75
|
+
.p-r // for "position: relative;"
|
|
76
|
+
.p-f // for "position: fixed;"
|
|
77
|
+
.p-s // for "position: sticky;"
|
|
78
|
+
|
|
79
|
+
/* Floats */
|
|
80
|
+
.fl-lt // for "float: left;"
|
|
81
|
+
.fl-rt // for "float: right;"
|
|
82
|
+
|
|
83
|
+
/* Clears */
|
|
84
|
+
.cl-b // for "clear: both;"
|
|
85
|
+
.cl-lt // for "clear: left;"
|
|
86
|
+
.cl-rt // for "clear: right;"
|
|
87
|
+
|
|
88
|
+
/* Overflow hidden */
|
|
89
|
+
.ov-hid // for "overflow: hidden;"
|
|
90
|
+
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
// Imports
|
|
6
|
-
@import "
|
|
7
|
-
@import "
|
|
8
|
-
@import "
|
|
9
|
-
@import "
|
|
10
|
-
@import "
|
|
6
|
+
@import "stylewithclass/settings";
|
|
7
|
+
@import "stylewithclass/margins";
|
|
8
|
+
@import "stylewithclass/paddings";
|
|
9
|
+
@import "stylewithclass/fonts";
|
|
10
|
+
@import "stylewithclass/misc";
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
@@ -22,10 +22,10 @@
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
// Floats
|
|
25
|
-
.
|
|
25
|
+
.fl-lt {
|
|
26
26
|
float: left;
|
|
27
27
|
}
|
|
28
|
-
.
|
|
28
|
+
.fl-rt {
|
|
29
29
|
float: right;
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -41,6 +41,6 @@
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
// Overflow hidden for wrapping elements in a wrapper
|
|
44
|
-
.
|
|
44
|
+
.ov-hid {
|
|
45
45
|
overflow: hidden;
|
|
46
46
|
}
|