stylewithclass 1.0.2 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +30 -9
- data/stylesheets/stylewithclass/_misc.scss +15 -0
- data/stylesheets/stylewithclass/_settings.scss +1 -1
- metadata +2 -2
data/README.md
CHANGED
|
@@ -3,6 +3,7 @@ Stylewithclass
|
|
|
3
3
|
|
|
4
4
|
Style your web pages using pre-defined classes with 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
7
|
|
|
7
8
|
Installation
|
|
8
9
|
============
|
|
@@ -19,6 +20,20 @@ Installing Stylewithclass:
|
|
|
19
20
|
#import Stylewithclass partial into your sass/scss file
|
|
20
21
|
@import "stylewithclass"
|
|
21
22
|
|
|
23
|
+
Settings
|
|
24
|
+
=========================
|
|
25
|
+
|
|
26
|
+
Set min, max & step for margin and padding values.
|
|
27
|
+
|
|
28
|
+
$min-pm: 1; // default
|
|
29
|
+
$max-pm: 50; // default
|
|
30
|
+
$step-pm: 1; // default
|
|
31
|
+
|
|
32
|
+
Set min & max for font sizes.
|
|
33
|
+
|
|
34
|
+
$min-fs: 8; // default
|
|
35
|
+
$max:fs: 32; // default
|
|
36
|
+
|
|
22
37
|
Using Stylewithclass
|
|
23
38
|
=========================
|
|
24
39
|
|
|
@@ -27,21 +42,21 @@ Padding & Margins
|
|
|
27
42
|
|
|
28
43
|
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
44
|
|
|
30
|
-
Style your html tags with
|
|
45
|
+
Style your html tags with padding: 20.
|
|
31
46
|
|
|
32
47
|
<div class="p-20"></div>
|
|
33
48
|
|
|
34
|
-
Style your html tags with padding-left: 5 & margin-right: 3
|
|
49
|
+
Style your html tags with padding-left: 5 & margin-right: 3.
|
|
35
50
|
|
|
36
51
|
<div class="p-lt-5"> // padding-left: 5
|
|
37
|
-
<div class="m-rt-3"> // margin-right: 3
|
|
52
|
+
<div class="m-rt-3"></div> // margin-right: 3
|
|
38
53
|
</div>
|
|
39
54
|
|
|
40
|
-
Style your html tags with padding-top: 20 & padding-bottom: 20
|
|
55
|
+
Style your html tags with padding-top: 20 & padding-bottom: 20.
|
|
41
56
|
|
|
42
57
|
<div class="p-ver-20"></div>
|
|
43
58
|
|
|
44
|
-
Style your html tags with margin-left: 10 & margin-right: 10
|
|
59
|
+
Style your html tags with margin-left: 10 & margin-right: 10.
|
|
45
60
|
|
|
46
61
|
<div class="m-hor-10"></div>
|
|
47
62
|
|
|
@@ -50,15 +65,15 @@ Fonts
|
|
|
50
65
|
|
|
51
66
|
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
67
|
|
|
53
|
-
Style your fonts with 12px with ems. It assumes that
|
|
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.
|
|
54
69
|
|
|
55
70
|
<div class="fs-r-12"></div>
|
|
56
71
|
|
|
57
|
-
Style your fonts with 12px with px
|
|
72
|
+
Style your fonts with 12px with px.
|
|
58
73
|
|
|
59
74
|
<div class="fs-a-12"></div>
|
|
60
75
|
|
|
61
|
-
You can also text align your html tags. The available classes are
|
|
76
|
+
You can also text align your html tags. The available classes are:
|
|
62
77
|
|
|
63
78
|
.txt-al-lt // for "text-align: left;"
|
|
64
79
|
.txt-al-c // for "text-align: center;"
|
|
@@ -67,7 +82,7 @@ You can also text align your html tags. The available classes are
|
|
|
67
82
|
Miscellaneous
|
|
68
83
|
=========================
|
|
69
84
|
|
|
70
|
-
In addition, you can style your html tags with positions, float, clears & overflow-hidden
|
|
85
|
+
In addition, you can style your html tags with positions, float, clears & overflow-hidden.
|
|
71
86
|
|
|
72
87
|
|
|
73
88
|
/* Positions */
|
|
@@ -76,6 +91,12 @@ In addition, you can style your html tags with positions, float, clears & overfl
|
|
|
76
91
|
.p-f // for "position: fixed;"
|
|
77
92
|
.p-s // for "position: sticky;"
|
|
78
93
|
|
|
94
|
+
/* Displays */
|
|
95
|
+
.d-n // for "display: none;"
|
|
96
|
+
.d-bl // for "display: block;"
|
|
97
|
+
.d-in // for "display: inline;"
|
|
98
|
+
.d-in-bl // for "display: inline-block;"
|
|
99
|
+
|
|
79
100
|
/* Floats */
|
|
80
101
|
.fl-lt // for "float: left;"
|
|
81
102
|
.fl-rt // for "float: right;"
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
// Miscellaneous
|
|
3
3
|
//
|
|
4
4
|
// * Positions
|
|
5
|
+
// * Displays
|
|
5
6
|
// * Floats
|
|
6
7
|
// * Clears
|
|
7
8
|
// * Overflow hidden
|
|
@@ -21,6 +22,20 @@
|
|
|
21
22
|
position: sticky; // New HTML-5 feature
|
|
22
23
|
}
|
|
23
24
|
|
|
25
|
+
// Displays
|
|
26
|
+
.d-n {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
29
|
+
.d-bl {
|
|
30
|
+
display: block;
|
|
31
|
+
}
|
|
32
|
+
.d-in {
|
|
33
|
+
display: inline;
|
|
34
|
+
}
|
|
35
|
+
.d-in-bl {
|
|
36
|
+
display: inline-block;
|
|
37
|
+
}
|
|
38
|
+
|
|
24
39
|
// Floats
|
|
25
40
|
.fl-lt {
|
|
26
41
|
float: left;
|