stylewithclass 1.0.1 → 1.0.2
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 +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
|
}
|