stylewithclass 1.0.2 → 1.0.3
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 +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;
|