compass-placeholder 0.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +127 -0
- data/lib/compass-placeholder.rb +3 -0
- data/stylesheets/_compass-placeholder.scss +22 -0
- metadata +76 -0
data/README.md
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
Stylewithclass
|
|
2
|
+
=========================
|
|
3
|
+
|
|
4
|
+
Style your web pages using pre-defined classes with very commonly used CSS properties.
|
|
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.
|
|
7
|
+
|
|
8
|
+
Installation
|
|
9
|
+
============
|
|
10
|
+
|
|
11
|
+
Install gem from the command line:
|
|
12
|
+
|
|
13
|
+
(sudo) gem install stylewithclass
|
|
14
|
+
|
|
15
|
+
Require it using Compass in config.rb:
|
|
16
|
+
|
|
17
|
+
# Edit the project configuration file and add:
|
|
18
|
+
require 'stylewithclass'
|
|
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>
|
|
59
|
+
|
|
60
|
+
Text
|
|
61
|
+
=========================
|
|
62
|
+
|
|
63
|
+
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.
|
|
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;"
|
|
119
|
+
|
|
120
|
+
// Cursor
|
|
121
|
+
.cs-pointer // for "cursor: pointer;"
|
|
122
|
+
|
|
123
|
+
// Additional dimensions
|
|
124
|
+
.w-100 // for "width: 100%;"
|
|
125
|
+
.h-100 // for "height: 100%;"
|
|
126
|
+
|
|
127
|
+
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@mixin placeholder {
|
|
2
|
+
&::-webkit-input-placeholder {
|
|
3
|
+
@content;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
&:-moz-placeholder { /* Firefox 18- */
|
|
7
|
+
@content;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&::-moz-placeholder { /* Firefox 19+ */
|
|
11
|
+
@content;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&:-ms-input-placeholder {
|
|
15
|
+
@content;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
metadata
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: compass-placeholder
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
prerelease: false
|
|
5
|
+
segments:
|
|
6
|
+
- 0
|
|
7
|
+
- 0
|
|
8
|
+
- 0
|
|
9
|
+
version: 0.0.0
|
|
10
|
+
platform: ruby
|
|
11
|
+
authors:
|
|
12
|
+
- Tingan Ho
|
|
13
|
+
autorequire:
|
|
14
|
+
bindir: bin
|
|
15
|
+
cert_chain: []
|
|
16
|
+
|
|
17
|
+
date: 2013-05-31 00:00:00 +08:00
|
|
18
|
+
default_executable:
|
|
19
|
+
dependencies:
|
|
20
|
+
- !ruby/object:Gem::Dependency
|
|
21
|
+
name: compass
|
|
22
|
+
prerelease: false
|
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
|
24
|
+
requirements:
|
|
25
|
+
- - ">="
|
|
26
|
+
- !ruby/object:Gem::Version
|
|
27
|
+
segments:
|
|
28
|
+
- 0
|
|
29
|
+
- 11
|
|
30
|
+
version: "0.11"
|
|
31
|
+
type: :runtime
|
|
32
|
+
version_requirements: *id001
|
|
33
|
+
description: Style placeholder text
|
|
34
|
+
email: tingan@clockies.com
|
|
35
|
+
executables: []
|
|
36
|
+
|
|
37
|
+
extensions: []
|
|
38
|
+
|
|
39
|
+
extra_rdoc_files: []
|
|
40
|
+
|
|
41
|
+
files:
|
|
42
|
+
- README.md
|
|
43
|
+
- lib/compass-placeholder.rb
|
|
44
|
+
- stylesheets/_compass-placeholder.scss
|
|
45
|
+
has_rdoc: true
|
|
46
|
+
homepage: http://github.com/tinganho/compass-placeholder
|
|
47
|
+
licenses: []
|
|
48
|
+
|
|
49
|
+
post_install_message:
|
|
50
|
+
rdoc_options: []
|
|
51
|
+
|
|
52
|
+
require_paths:
|
|
53
|
+
- lib
|
|
54
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
55
|
+
requirements:
|
|
56
|
+
- - ">="
|
|
57
|
+
- !ruby/object:Gem::Version
|
|
58
|
+
segments:
|
|
59
|
+
- 0
|
|
60
|
+
version: "0"
|
|
61
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
62
|
+
requirements:
|
|
63
|
+
- - ">="
|
|
64
|
+
- !ruby/object:Gem::Version
|
|
65
|
+
segments:
|
|
66
|
+
- 0
|
|
67
|
+
version: "0"
|
|
68
|
+
requirements: []
|
|
69
|
+
|
|
70
|
+
rubyforge_project: compass-placeholder
|
|
71
|
+
rubygems_version: 1.3.6
|
|
72
|
+
signing_key:
|
|
73
|
+
specification_version: 3
|
|
74
|
+
summary: Style placeholder text
|
|
75
|
+
test_files: []
|
|
76
|
+
|