compass-placeholder 0.0.0 → 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +20 -110
- metadata +2 -2
data/README.md
CHANGED
|
@@ -1,127 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
Compass-placeholder
|
|
2
|
+
==================
|
|
3
3
|
|
|
4
|
-
|
|
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 very commonly used CSS properties.
|
|
4
|
+
SASS mixin for styling placeholders
|
|
7
5
|
|
|
8
6
|
Installation
|
|
9
7
|
============
|
|
10
8
|
|
|
11
9
|
Install gem from the command line:
|
|
12
10
|
|
|
13
|
-
(sudo) gem install
|
|
11
|
+
(sudo) gem install compass-placeholder
|
|
14
12
|
|
|
15
13
|
Require it using Compass in config.rb:
|
|
16
14
|
|
|
17
15
|
# Edit the project configuration file and add:
|
|
18
|
-
require '
|
|
19
|
-
|
|
20
|
-
Import it in your sass/scss file.
|
|
21
|
-
|
|
22
|
-
# import Stylewithclass partial into your sass/scss file
|
|
23
|
-
@import "stylewithclass"
|
|
24
|
-
|
|
25
|
-
Settings
|
|
26
|
-
=========================
|
|
27
|
-
|
|
28
|
-
Set min, max & step for padding and margin values.
|
|
29
|
-
|
|
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
|
|
33
|
-
|
|
34
|
-
Using Stylewithclass
|
|
35
|
-
=========================
|
|
36
|
-
|
|
37
|
-
Padding & Margins
|
|
38
|
-
=========================
|
|
39
|
-
|
|
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.
|
|
41
|
-
|
|
42
|
-
Style your html tags with padding: 20.
|
|
43
|
-
|
|
44
|
-
<div class="p-20"></div>
|
|
45
|
-
|
|
46
|
-
Style your html tags with padding-left: 5 & margin-right: 3.
|
|
47
|
-
|
|
48
|
-
<div class="p-lt-5"> // padding-left: 5
|
|
49
|
-
<div class="m-rt-3"></div> // margin-right: 3
|
|
50
|
-
</div>
|
|
51
|
-
|
|
52
|
-
Style your html tags with padding-top: 20 & padding-bottom: 20.
|
|
53
|
-
|
|
54
|
-
<div class="p-ver-20"></div>
|
|
55
|
-
|
|
56
|
-
Style your html tags with margin-left: 10 & margin-right: 10.
|
|
57
|
-
|
|
58
|
-
<div class="m-hor-10"></div>
|
|
16
|
+
require 'compass-placeholder'
|
|
59
17
|
|
|
60
|
-
|
|
61
|
-
|
|
18
|
+
Usage
|
|
19
|
+
=====
|
|
62
20
|
|
|
63
|
-
|
|
64
|
-
|
|
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
|
-
|
|
67
|
-
<div class="fs-r-12"></div>
|
|
68
|
-
|
|
69
|
-
Style your fonts with 12px with px.
|
|
70
|
-
|
|
71
|
-
<div class="fs-a-12"></div>
|
|
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
|
-
|
|
77
|
-
.txt-al-lt // for "text-align: left;"
|
|
78
|
-
.txt-al-c // for "text-align: center;"
|
|
79
|
-
.txt-al-rt // for "text-align: right;"
|
|
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
|
-
|
|
90
|
-
Miscellaneous
|
|
91
|
-
=========================
|
|
92
|
-
|
|
93
|
-
In addition, you can style your html tags with positions, displays, floats, clears & overflow-hidden.
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
/* Positions */
|
|
97
|
-
.p-a // for "position: absolute;"
|
|
98
|
-
.p-r // for "position: relative;"
|
|
99
|
-
.p-f // for "position: fixed;"
|
|
100
|
-
.p-s // for "position: sticky;"
|
|
101
|
-
|
|
102
|
-
/* Displays */
|
|
103
|
-
.d-n // for "display: none;"
|
|
104
|
-
.d-bl // for "display: block;"
|
|
105
|
-
.d-in // for "display: inline;"
|
|
106
|
-
.d-in-bl // for "display: inline-block;"
|
|
107
|
-
|
|
108
|
-
/* Floats */
|
|
109
|
-
.fl-lt // for "float: left;"
|
|
110
|
-
.fl-rt // for "float: right;"
|
|
111
|
-
|
|
112
|
-
/* Clears */
|
|
113
|
-
.cl-b // for "clear: both;"
|
|
114
|
-
.cl-lt // for "clear: left;"
|
|
115
|
-
.cl-rt // for "clear: right;"
|
|
116
|
-
|
|
117
|
-
/* Overflow hidden */
|
|
118
|
-
.ov-hid // for "overflow: hidden;"
|
|
21
|
+
Import it in your sass/scss file.
|
|
119
22
|
|
|
120
|
-
|
|
121
|
-
|
|
23
|
+
```ruby
|
|
24
|
+
@import "compass-placeholder";
|
|
25
|
+
```
|
|
122
26
|
|
|
123
|
-
|
|
124
|
-
.w-100 // for "width: 100%;"
|
|
125
|
-
.h-100 // for "height: 100%;"
|
|
27
|
+
then use `@include placeholder`:
|
|
126
28
|
|
|
29
|
+
```ruby
|
|
30
|
+
input {
|
|
31
|
+
@include placeholder {
|
|
32
|
+
color: #999;
|
|
33
|
+
font-size: 13px;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
127
36
|
|
|
37
|
+
```
|