compass-placeholder 0.0.0 → 0.0.1
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 +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
|
+
```
|