salsa 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG.md +3 -0
- data/LICENSE.txt +274 -0
- data/README.md +61 -0
- data/lib/salsa.rb +7 -0
- data/sass/_salsa.scss +12 -0
- data/sass/salsa/_background.scss +30 -0
- data/sass/salsa/_functions.scss +13 -0
- data/sass/salsa/_settings.scss +32 -0
- data/sass/salsa/_system.scss +197 -0
- data/templates/project/manifest.rb +23 -0
- data/templates/project/style.scss +39 -0
- metadata +109 -0
data/CHANGELOG.md
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,274 @@
|
|
1
|
+
GNU GENERAL PUBLIC LICENSE
|
2
|
+
|
3
|
+
Version 2, June 1991
|
4
|
+
|
5
|
+
Copyright (C) 1989, 1991 Free Software Foundation, Inc. 675 Mass Ave,
|
6
|
+
Cambridge, MA 02139, USA. Everyone is permitted to copy and distribute
|
7
|
+
verbatim copies of this license document, but changing it is not allowed.
|
8
|
+
|
9
|
+
Preamble
|
10
|
+
|
11
|
+
The licenses for most software are designed to take away your freedom to
|
12
|
+
share and change it. By contrast, the GNU General Public License is
|
13
|
+
intended to guarantee your freedom to share and change free software--to
|
14
|
+
make sure the software is free for all its users. This General Public License
|
15
|
+
applies to most of the Free Software Foundation's software and to any other
|
16
|
+
program whose authors commit to using it. (Some other Free Software
|
17
|
+
Foundation software is covered by the GNU Library General Public License
|
18
|
+
instead.) You can apply it to your programs, too.
|
19
|
+
|
20
|
+
When we speak of free software, we are referring to freedom, not price. Our
|
21
|
+
General Public Licenses are designed to make sure that you have the
|
22
|
+
freedom to distribute copies of free software (and charge for this service if
|
23
|
+
you wish), that you receive source code or can get it if you want it, that you
|
24
|
+
can change the software or use pieces of it in new free programs; and that
|
25
|
+
you know you can do these things.
|
26
|
+
|
27
|
+
To protect your rights, we need to make restrictions that forbid anyone to
|
28
|
+
deny you these rights or to ask you to surrender the rights. These restrictions
|
29
|
+
translate to certain responsibilities for you if you distribute copies of the
|
30
|
+
software, or if you modify it.
|
31
|
+
|
32
|
+
For example, if you distribute copies of such a program, whether gratis or for
|
33
|
+
a fee, you must give the recipients all the rights that you have. You must make
|
34
|
+
sure that they, too, receive or can get the source code. And you must show
|
35
|
+
them these terms so they know their rights.
|
36
|
+
|
37
|
+
We protect your rights with two steps: (1) copyright the software, and (2)
|
38
|
+
offer you this license which gives you legal permission to copy, distribute
|
39
|
+
and/or modify the software.
|
40
|
+
|
41
|
+
Also, for each author's protection and ours, we want to make certain that
|
42
|
+
everyone understands that there is no warranty for this free software. If the
|
43
|
+
software is modified by someone else and passed on, we want its recipients
|
44
|
+
to know that what they have is not the original, so that any problems
|
45
|
+
introduced by others will not reflect on the original authors' reputations.
|
46
|
+
|
47
|
+
Finally, any free program is threatened constantly by software patents. We
|
48
|
+
wish to avoid the danger that redistributors of a free program will individually
|
49
|
+
obtain patent licenses, in effect making the program proprietary. To prevent
|
50
|
+
this, we have made it clear that any patent must be licensed for everyone's
|
51
|
+
free use or not licensed at all.
|
52
|
+
|
53
|
+
The precise terms and conditions for copying, distribution and modification
|
54
|
+
follow.
|
55
|
+
|
56
|
+
GNU GENERAL PUBLIC LICENSE
|
57
|
+
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND
|
58
|
+
MODIFICATION
|
59
|
+
|
60
|
+
0. This License applies to any program or other work which contains a notice
|
61
|
+
placed by the copyright holder saying it may be distributed under the terms
|
62
|
+
of this General Public License. The "Program", below, refers to any such
|
63
|
+
program or work, and a "work based on the Program" means either the
|
64
|
+
Program or any derivative work under copyright law: that is to say, a work
|
65
|
+
containing the Program or a portion of it, either verbatim or with
|
66
|
+
modifications and/or translated into another language. (Hereinafter, translation
|
67
|
+
is included without limitation in the term "modification".) Each licensee is
|
68
|
+
addressed as "you".
|
69
|
+
|
70
|
+
Activities other than copying, distribution and modification are not covered
|
71
|
+
by this License; they are outside its scope. The act of running the Program is
|
72
|
+
not restricted, and the output from the Program is covered only if its contents
|
73
|
+
constitute a work based on the Program (independent of having been made
|
74
|
+
by running the Program). Whether that is true depends on what the Program
|
75
|
+
does.
|
76
|
+
|
77
|
+
1. You may copy and distribute verbatim copies of the Program's source
|
78
|
+
code as you receive it, in any medium, provided that you conspicuously and
|
79
|
+
appropriately publish on each copy an appropriate copyright notice and
|
80
|
+
disclaimer of warranty; keep intact all the notices that refer to this License
|
81
|
+
and to the absence of any warranty; and give any other recipients of the
|
82
|
+
Program a copy of this License along with the Program.
|
83
|
+
|
84
|
+
You may charge a fee for the physical act of transferring a copy, and you
|
85
|
+
may at your option offer warranty protection in exchange for a fee.
|
86
|
+
|
87
|
+
2. You may modify your copy or copies of the Program or any portion of it,
|
88
|
+
thus forming a work based on the Program, and copy and distribute such
|
89
|
+
modifications or work under the terms of Section 1 above, provided that you
|
90
|
+
also meet all of these conditions:
|
91
|
+
|
92
|
+
a) You must cause the modified files to carry prominent notices stating that
|
93
|
+
you changed the files and the date of any change.
|
94
|
+
|
95
|
+
b) You must cause any work that you distribute or publish, that in whole or in
|
96
|
+
part contains or is derived from the Program or any part thereof, to be
|
97
|
+
licensed as a whole at no charge to all third parties under the terms of this
|
98
|
+
License.
|
99
|
+
|
100
|
+
c) If the modified program normally reads commands interactively when run,
|
101
|
+
you must cause it, when started running for such interactive use in the most
|
102
|
+
ordinary way, to print or display an announcement including an appropriate
|
103
|
+
copyright notice and a notice that there is no warranty (or else, saying that
|
104
|
+
you provide a warranty) and that users may redistribute the program under
|
105
|
+
these conditions, and telling the user how to view a copy of this License.
|
106
|
+
(Exception: if the Program itself is interactive but does not normally print such
|
107
|
+
an announcement, your work based on the Program is not required to print
|
108
|
+
an announcement.)
|
109
|
+
|
110
|
+
These requirements apply to the modified work as a whole. If identifiable
|
111
|
+
sections of that work are not derived from the Program, and can be
|
112
|
+
reasonably considered independent and separate works in themselves, then
|
113
|
+
this License, and its terms, do not apply to those sections when you distribute
|
114
|
+
them as separate works. But when you distribute the same sections as part
|
115
|
+
of a whole which is a work based on the Program, the distribution of the
|
116
|
+
whole must be on the terms of this License, whose permissions for other
|
117
|
+
licensees extend to the entire whole, and thus to each and every part
|
118
|
+
regardless of who wrote it.
|
119
|
+
|
120
|
+
Thus, it is not the intent of this section to claim rights or contest your rights to
|
121
|
+
work written entirely by you; rather, the intent is to exercise the right to
|
122
|
+
control the distribution of derivative or collective works based on the
|
123
|
+
Program.
|
124
|
+
|
125
|
+
In addition, mere aggregation of another work not based on the Program
|
126
|
+
with the Program (or with a work based on the Program) on a volume of a
|
127
|
+
storage or distribution medium does not bring the other work under the scope
|
128
|
+
of this License.
|
129
|
+
|
130
|
+
3. You may copy and distribute the Program (or a work based on it, under
|
131
|
+
Section 2) in object code or executable form under the terms of Sections 1
|
132
|
+
and 2 above provided that you also do one of the following:
|
133
|
+
|
134
|
+
a) Accompany it with the complete corresponding machine-readable source
|
135
|
+
code, which must be distributed under the terms of Sections 1 and 2 above
|
136
|
+
on a medium customarily used for software interchange; or,
|
137
|
+
|
138
|
+
b) Accompany it with a written offer, valid for at least three years, to give
|
139
|
+
any third party, for a charge no more than your cost of physically performing
|
140
|
+
source distribution, a complete machine-readable copy of the corresponding
|
141
|
+
source code, to be distributed under the terms of Sections 1 and 2 above on
|
142
|
+
a medium customarily used for software interchange; or,
|
143
|
+
|
144
|
+
c) Accompany it with the information you received as to the offer to distribute
|
145
|
+
corresponding source code. (This alternative is allowed only for
|
146
|
+
noncommercial distribution and only if you received the program in object
|
147
|
+
code or executable form with such an offer, in accord with Subsection b
|
148
|
+
above.)
|
149
|
+
|
150
|
+
The source code for a work means the preferred form of the work for
|
151
|
+
making modifications to it. For an executable work, complete source code
|
152
|
+
means all the source code for all modules it contains, plus any associated
|
153
|
+
interface definition files, plus the scripts used to control compilation and
|
154
|
+
installation of the executable. However, as a special exception, the source
|
155
|
+
code distributed need not include anything that is normally distributed (in
|
156
|
+
either source or binary form) with the major components (compiler, kernel,
|
157
|
+
and so on) of the operating system on which the executable runs, unless that
|
158
|
+
component itself accompanies the executable.
|
159
|
+
|
160
|
+
If distribution of executable or object code is made by offering access to
|
161
|
+
copy from a designated place, then offering equivalent access to copy the
|
162
|
+
source code from the same place counts as distribution of the source code,
|
163
|
+
even though third parties are not compelled to copy the source along with the
|
164
|
+
object code.
|
165
|
+
|
166
|
+
4. You may not copy, modify, sublicense, or distribute the Program except as
|
167
|
+
expressly provided under this License. Any attempt otherwise to copy,
|
168
|
+
modify, sublicense or distribute the Program is void, and will automatically
|
169
|
+
terminate your rights under this License. However, parties who have received
|
170
|
+
copies, or rights, from you under this License will not have their licenses
|
171
|
+
terminated so long as such parties remain in full compliance.
|
172
|
+
|
173
|
+
5. You are not required to accept this License, since you have not signed it.
|
174
|
+
However, nothing else grants you permission to modify or distribute the
|
175
|
+
Program or its derivative works. These actions are prohibited by law if you
|
176
|
+
do not accept this License. Therefore, by modifying or distributing the
|
177
|
+
Program (or any work based on the Program), you indicate your acceptance
|
178
|
+
of this License to do so, and all its terms and conditions for copying,
|
179
|
+
distributing or modifying the Program or works based on it.
|
180
|
+
|
181
|
+
6. Each time you redistribute the Program (or any work based on the
|
182
|
+
Program), the recipient automatically receives a license from the original
|
183
|
+
licensor to copy, distribute or modify the Program subject to these terms and
|
184
|
+
conditions. You may not impose any further restrictions on the recipients'
|
185
|
+
exercise of the rights granted herein. You are not responsible for enforcing
|
186
|
+
compliance by third parties to this License.
|
187
|
+
|
188
|
+
7. If, as a consequence of a court judgment or allegation of patent
|
189
|
+
infringement or for any other reason (not limited to patent issues), conditions
|
190
|
+
are imposed on you (whether by court order, agreement or otherwise) that
|
191
|
+
contradict the conditions of this License, they do not excuse you from the
|
192
|
+
conditions of this License. If you cannot distribute so as to satisfy
|
193
|
+
simultaneously your obligations under this License and any other pertinent
|
194
|
+
obligations, then as a consequence you may not distribute the Program at all.
|
195
|
+
For example, if a patent license would not permit royalty-free redistribution
|
196
|
+
of the Program by all those who receive copies directly or indirectly through
|
197
|
+
you, then the only way you could satisfy both it and this License would be to
|
198
|
+
refrain entirely from distribution of the Program.
|
199
|
+
|
200
|
+
If any portion of this section is held invalid or unenforceable under any
|
201
|
+
particular circumstance, the balance of the section is intended to apply and
|
202
|
+
the section as a whole is intended to apply in other circumstances.
|
203
|
+
|
204
|
+
It is not the purpose of this section to induce you to infringe any patents or
|
205
|
+
other property right claims or to contest validity of any such claims; this
|
206
|
+
section has the sole purpose of protecting the integrity of the free software
|
207
|
+
distribution system, which is implemented by public license practices. Many
|
208
|
+
people have made generous contributions to the wide range of software
|
209
|
+
distributed through that system in reliance on consistent application of that
|
210
|
+
system; it is up to the author/donor to decide if he or she is willing to
|
211
|
+
distribute software through any other system and a licensee cannot impose
|
212
|
+
that choice.
|
213
|
+
|
214
|
+
This section is intended to make thoroughly clear what is believed to be a
|
215
|
+
consequence of the rest of this License.
|
216
|
+
|
217
|
+
8. If the distribution and/or use of the Program is restricted in certain
|
218
|
+
countries either by patents or by copyrighted interfaces, the original copyright
|
219
|
+
holder who places the Program under this License may add an explicit
|
220
|
+
geographical distribution limitation excluding those countries, so that
|
221
|
+
distribution is permitted only in or among countries not thus excluded. In such
|
222
|
+
case, this License incorporates the limitation as if written in the body of this
|
223
|
+
License.
|
224
|
+
|
225
|
+
9. The Free Software Foundation may publish revised and/or new versions
|
226
|
+
of the General Public License from time to time. Such new versions will be
|
227
|
+
similar in spirit to the present version, but may differ in detail to address new
|
228
|
+
problems or concerns.
|
229
|
+
|
230
|
+
Each version is given a distinguishing version number. If the Program specifies
|
231
|
+
a version number of this License which applies to it and "any later version",
|
232
|
+
you have the option of following the terms and conditions either of that
|
233
|
+
version or of any later version published by the Free Software Foundation. If
|
234
|
+
the Program does not specify a version number of this License, you may
|
235
|
+
choose any version ever published by the Free Software Foundation.
|
236
|
+
|
237
|
+
10. If you wish to incorporate parts of the Program into other free programs
|
238
|
+
whose distribution conditions are different, write to the author to ask for
|
239
|
+
permission. For software which is copyrighted by the Free Software
|
240
|
+
Foundation, write to the Free Software Foundation; we sometimes make
|
241
|
+
exceptions for this. Our decision will be guided by the two goals of
|
242
|
+
preserving the free status of all derivatives of our free software and of
|
243
|
+
promoting the sharing and reuse of software generally.
|
244
|
+
|
245
|
+
NO WARRANTY
|
246
|
+
|
247
|
+
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE,
|
248
|
+
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT
|
249
|
+
PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE
|
250
|
+
STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR
|
251
|
+
OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
|
252
|
+
WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED,
|
253
|
+
INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
|
254
|
+
OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
|
255
|
+
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
|
256
|
+
PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
|
257
|
+
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL
|
258
|
+
NECESSARY SERVICING, REPAIR OR CORRECTION.
|
259
|
+
|
260
|
+
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR
|
261
|
+
AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR
|
262
|
+
ANY OTHER PARTY WHO MAY MODIFY AND/OR
|
263
|
+
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE
|
264
|
+
LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL,
|
265
|
+
SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
|
266
|
+
ARISING OUT OF THE USE OR INABILITY TO USE THE
|
267
|
+
PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA
|
268
|
+
OR DATA BEING RENDERED INACCURATE OR LOSSES
|
269
|
+
SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE
|
270
|
+
PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN
|
271
|
+
IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF
|
272
|
+
THE POSSIBILITY OF SUCH DAMAGES.
|
273
|
+
|
274
|
+
END OF TERMS AND CONDITIONS
|
data/README.md
ADDED
@@ -0,0 +1,61 @@
|
|
1
|
+
Salsa
|
2
|
+
===
|
3
|
+
|
4
|
+
**Salsa** is a simple yet very smart and flexible fluid layout system.
|
5
|
+
It uses the power of Sass to provide a lightweight and semantic output.
|
6
|
+
Salsa is perfect for both simple and complex layouts.
|
7
|
+
if you want just a simple grid, if you have a grid with an off-grid element, or
|
8
|
+
if you just hate grids - **Salsa is just what you need**.
|
9
|
+
|
10
|
+
Salsa was originaly created as the layout system that powers [Sasson](http://drupal.org/project/sasson) v3.x
|
11
|
+
so you could also call it _Sasson's Awesome Layout System... Awesome!_
|
12
|
+
|
13
|
+
|
14
|
+
Why?
|
15
|
+
===
|
16
|
+
Because it sounds better then Sals.
|
17
|
+
|
18
|
+
|
19
|
+
Getting started
|
20
|
+
===
|
21
|
+
|
22
|
+
Requirements:
|
23
|
+
|
24
|
+
- Sass - http://sass-lang.com/
|
25
|
+
- Compass (optional, required only for the grid background) - http://compass-style.org/
|
26
|
+
|
27
|
+
Put the ```/salsa``` folder in your stylesheets directory and import it:
|
28
|
+
|
29
|
+
@import "salsa/salsa";
|
30
|
+
|
31
|
+
|
32
|
+
Documentation
|
33
|
+
===
|
34
|
+
Not much yet, but the code is very well commented, quickly going through the comments
|
35
|
+
will get you started in no-time.
|
36
|
+
Knowing the [settings](https://github.com/tsi/Salsa/blob/master/sass/_settings.scss)
|
37
|
+
and how to use the [grid()](https://github.com/tsi/Salsa/blob/master/sass/_layout.scss#L87-124)
|
38
|
+
and the [container](https://github.com/tsi/Salsa/blob/master/sass/_layout.scss#L31-34) mixins
|
39
|
+
will be enough for most cases, read about those first.
|
40
|
+
|
41
|
+
Documentation and more examples are coming, stay tuned.
|
42
|
+
|
43
|
+
|
44
|
+
Browser support
|
45
|
+
===
|
46
|
+
Salsa will work fine on IE8 and better.
|
47
|
+
If you want to support IE7 (you don't) you'll have to add a [box-sizing polyfill](https://github.com/Schepp/box-sizing-polyfill),
|
48
|
+
and [tell Salsa where it is](https://github.com/tsi/Salsa/blob/master/sass/_settings.scss#L22-28).
|
49
|
+
|
50
|
+
|
51
|
+
Credits
|
52
|
+
===
|
53
|
+
|
54
|
+
Credit for the inspiration goes mostly to [Susy](http://susy.oddbird.net/) and [Zen grids](http://zengrids.com/).
|
55
|
+
I believe Salsa manage to combine the best of both in a much simpler system.
|
56
|
+
Salsa was created to power [Sasson's](http://drupal.org/project/sasson) layout system by Tsachi Shlidor (@shlidor).
|
57
|
+
|
58
|
+
|
59
|
+
License
|
60
|
+
===
|
61
|
+
Salsa is open-source, licensed under the GNU General Public License.
|
data/lib/salsa.rb
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
require 'compass'
|
2
|
+
|
3
|
+
stylesheets_dir = File.join(File.dirname(__FILE__), '..', 'sass')
|
4
|
+
templates_dir = File.join(File.dirname(__FILE__), '..', 'templates')
|
5
|
+
Compass::Frameworks.register('salsa',
|
6
|
+
:stylesheets_directory => stylesheets_dir,
|
7
|
+
:templates_directory => templates_dir)
|
data/sass/_salsa.scss
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
///////////////////////////////////////////////////////////////////////////////
|
2
|
+
///////// Salsa - Syntactically Awesome Layout System. Awesome! //////////
|
3
|
+
///////////////////////////////////////////////////////////////////////////////
|
4
|
+
|
5
|
+
// ---------------------------------------------------------------------------
|
6
|
+
// Partials
|
7
|
+
@import "salsa/functions";
|
8
|
+
@import "salsa/settings";
|
9
|
+
@import "salsa/system";
|
10
|
+
@import "salsa/background";
|
11
|
+
|
12
|
+
|
@@ -0,0 +1,30 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Grid Background
|
3
|
+
//
|
4
|
+
// A wrapper for the compass "column-grid-background" mixin
|
5
|
+
// This is the only place where Salsa depends on compass
|
6
|
+
|
7
|
+
@import "compass/layout/grid-background";
|
8
|
+
@import "compass/css3/transition";
|
9
|
+
|
10
|
+
// Apply this to your container to get a visible grid background generated
|
11
|
+
// on-the-fly using css3 gradients. These can be used for testing your elements
|
12
|
+
// positioning on the grid.
|
13
|
+
@mixin salsa-background {
|
14
|
+
|
15
|
+
$space : $gutter-width / 2;
|
16
|
+
$column: $container-width / $columns - $gutter-width;
|
17
|
+
|
18
|
+
@include column-grid-background($columns, $column, $gutter-width, $space, #ccea7e, #e6ffa8, true);
|
19
|
+
|
20
|
+
// Grid toggler (as in Sasson)
|
21
|
+
background-repeat: repeat-x;
|
22
|
+
@include transition(background-size 0.5s);
|
23
|
+
|
24
|
+
.grid-hidden & {
|
25
|
+
background-size: 100% 0;
|
26
|
+
}
|
27
|
+
.grid-visible & {
|
28
|
+
background-size: 100% 100%;
|
29
|
+
}
|
30
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Functions
|
3
|
+
|
4
|
+
// Returns the oposite direction of $flow
|
5
|
+
// $flow: may be 'left' or 'right'.
|
6
|
+
@function salsa-opos($flow: left) {
|
7
|
+
@if $flow == right {
|
8
|
+
@return left;
|
9
|
+
}
|
10
|
+
@else {
|
11
|
+
@return right;
|
12
|
+
}
|
13
|
+
}
|
@@ -0,0 +1,32 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Salsa Settings
|
3
|
+
|
4
|
+
// Set a width for the container element.
|
5
|
+
// Defaults to fixed 'px' but you may use whatever unit fits your needs e.g. %.
|
6
|
+
$container-width: 960px !default;
|
7
|
+
|
8
|
+
// Set the number of columns in the grid.
|
9
|
+
// Tip - To minimize browser rounding issues, try to use a number which 100 (%)
|
10
|
+
// is easily divisible by, e.g. use 24 instead of 12.
|
11
|
+
$columns: 16 !default;
|
12
|
+
|
13
|
+
// Set gutters width, gutters will be contained inside grid elements as padding.
|
14
|
+
// Defaults to 'px' but you may use whatever unit fits your needs e.g. %.
|
15
|
+
$gutter-width: 20px !default;
|
16
|
+
|
17
|
+
// Flow directionality, set $flow to 'right' for an RTL grid.
|
18
|
+
// $opos is automatically set to the opposite of $flow.
|
19
|
+
$flow: left !default;
|
20
|
+
$opos: salsa-opos($flow);
|
21
|
+
|
22
|
+
// Box sizing model - we use border-box to minimize browser rounding errors by
|
23
|
+
// containing gutters inside grid elements as padding.
|
24
|
+
// This also allows us to use pixels, em or every other unit as gutters width
|
25
|
+
// and not be bound to %
|
26
|
+
// border-box is supported on IE8+, to support IE7 and below you'll have to
|
27
|
+
// include a polyfill ( https://github.com/Schepp/box-sizing-polyfill ) and set
|
28
|
+
// the path to it.
|
29
|
+
$box-sizing-polyfill-path: "" !default;
|
30
|
+
|
31
|
+
// You don't want to support IE7, do you?
|
32
|
+
$ie7-support: false !default;
|
@@ -0,0 +1,197 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Salsa Layout - This is where the real magic happens
|
3
|
+
|
4
|
+
// ---------------------------------------------------------------------------
|
5
|
+
// Micro clearfix hack
|
6
|
+
// http://nicolasgallagher.com/micro-clearfix-hack/
|
7
|
+
@mixin clear {
|
8
|
+
&:before, &:after {
|
9
|
+
content: "\0020";
|
10
|
+
display: table;
|
11
|
+
}
|
12
|
+
&:after { clear: both; }
|
13
|
+
@if $ie7-support {
|
14
|
+
& { zoom: 1; }
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
// ---------------------------------------------------------------------------
|
19
|
+
// Box sizing
|
20
|
+
|
21
|
+
// Apply this where you want your elements to contain their padding and borders,
|
22
|
+
// this allows salsa to minimize browsers rounding errors and to use pixels or
|
23
|
+
// even em gutters and not be bound to %.
|
24
|
+
// Paul Irish wrote about it here - http://paulirish.com/2012/box-sizing-border-box-ftw/
|
25
|
+
@mixin box-sizing($model: border-box) {
|
26
|
+
-moz-box-sizing: $model;
|
27
|
+
-webkit-box-sizing: $model;
|
28
|
+
box-sizing: $model;
|
29
|
+
}
|
30
|
+
|
31
|
+
// ---------------------------------------------------------------------------
|
32
|
+
// Containers
|
33
|
+
|
34
|
+
// Apply container to your outer-most container element.
|
35
|
+
@mixin container {
|
36
|
+
width: $container-width;
|
37
|
+
margin: {
|
38
|
+
left: auto;
|
39
|
+
right: auto;
|
40
|
+
}
|
41
|
+
@include clear;
|
42
|
+
}
|
43
|
+
|
44
|
+
// Nested Container
|
45
|
+
// Apply nested-container to any layout element that contains other layout
|
46
|
+
// elements as a nested layout container.
|
47
|
+
@mixin nested-container {
|
48
|
+
padding: {
|
49
|
+
left: 0;
|
50
|
+
right: 0;
|
51
|
+
}
|
52
|
+
@include clear;
|
53
|
+
}
|
54
|
+
|
55
|
+
// ---------------------------------------------------------------------------
|
56
|
+
// Layout Rows
|
57
|
+
// Apply row to any layout element that should force a new layout row.
|
58
|
+
@mixin row {
|
59
|
+
clear: $flow;
|
60
|
+
}
|
61
|
+
|
62
|
+
// Apply unrow to cancel the previous mixin's effect, e.g. when changing layouts
|
63
|
+
// using media queries.
|
64
|
+
@mixin unrow {
|
65
|
+
clear: none;
|
66
|
+
}
|
67
|
+
|
68
|
+
// ---------------------------------------------------------------------------
|
69
|
+
// Layout Elements
|
70
|
+
|
71
|
+
// Apply this mixin to only set the layout element box-model (padding) but not
|
72
|
+
// positioning it, the element will simply flow in its natural position in the
|
73
|
+
// document. see the next mixin for positioned layout-elements.
|
74
|
+
@mixin cell($container: false) {
|
75
|
+
@include box-sizing;
|
76
|
+
@if $container == false {
|
77
|
+
padding: {
|
78
|
+
left: $gutter-width / 2;
|
79
|
+
right: $gutter-width / 2;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
@else if $container == left {
|
83
|
+
padding-left: $gutter-width / 2;
|
84
|
+
}
|
85
|
+
@else if $container == right {
|
86
|
+
padding-right: $gutter-width / 2;
|
87
|
+
}
|
88
|
+
@if $box-sizing-polyfill-path != "" and $ie7-support {
|
89
|
+
behavior: url($box-sizing-polyfill-path);
|
90
|
+
}
|
91
|
+
}
|
92
|
+
|
93
|
+
// Backwards compatibility grid-cell() => cell()
|
94
|
+
@mixin grid-cell($container: false) {
|
95
|
+
@include cell($container);
|
96
|
+
}
|
97
|
+
|
98
|
+
// span(<$width> [<$gutters>], [<$position>])
|
99
|
+
//
|
100
|
+
// span() is the heart of the layout system, it allows you to define the
|
101
|
+
// layout-element's width and position.
|
102
|
+
//
|
103
|
+
// $width:
|
104
|
+
// - Can be unitless and represent the number of columns to span.
|
105
|
+
// - May have any kind of width unit (e.g. px, em, % etc.) and provide
|
106
|
+
// complete control over the element's with, even if not complying with
|
107
|
+
// the grid layout or if using a grid is not your cup of tea.
|
108
|
+
// - May be followed by a space and none/left/right to remove gutters, 'none'
|
109
|
+
// for no gutters (e.g. for nested containers), 'left/right' to leave a
|
110
|
+
// gutter on one side only.
|
111
|
+
// $position:
|
112
|
+
// - Can be unitless and represent the column number the element starts on.
|
113
|
+
// - May have any kind of width unit (e.g. px, em, % etc.) and provide
|
114
|
+
// complete control over the element's position, similar to absolute
|
115
|
+
// positioning only that elements are NOT removed from the normal flow.
|
116
|
+
// - May be 'omega' for the last item in a row, will float the other way.
|
117
|
+
// - May be 'row' to force a new layout row.
|
118
|
+
//
|
119
|
+
// Examples:
|
120
|
+
// - Simple layout element spanning 4 columns starting from the 12th column
|
121
|
+
//
|
122
|
+
// @include span(4, 12);
|
123
|
+
//
|
124
|
+
// - a 40% wide element pushed 60% off the layout's first column
|
125
|
+
//
|
126
|
+
// @include span(40%, 60%);
|
127
|
+
//
|
128
|
+
// Nested grids -
|
129
|
+
// - You may provide $width as a simple fraction, so if you want an element
|
130
|
+
// to span 3 columns inside a 6 columns (nested) grid container, you'll
|
131
|
+
// probably use 3/6 as $width.
|
132
|
+
// - $position too.
|
133
|
+
// - note: 6/6 = 1 column, not 6 columns out of 6, use 100% instead.
|
134
|
+
//
|
135
|
+
// Example: 2 column element nested inside a 6 columns nested-container,
|
136
|
+
// starting from the 4th column.
|
137
|
+
//
|
138
|
+
// @include span(2/6, 4/6);
|
139
|
+
//
|
140
|
+
@mixin span($width, $position: false) {
|
141
|
+
|
142
|
+
@if length($width) > 1 {
|
143
|
+
@include cell(nth($width, 2));
|
144
|
+
$width: nth($width, 1);
|
145
|
+
}
|
146
|
+
@else {
|
147
|
+
@include cell;
|
148
|
+
}
|
149
|
+
|
150
|
+
// Width (fraction/columns/units)
|
151
|
+
@if unitless($width) == false { // has unit, arbitrary width
|
152
|
+
width: $width;
|
153
|
+
}
|
154
|
+
@else if round($width) != $width { // fraction
|
155
|
+
width: 100% * $width;
|
156
|
+
}
|
157
|
+
@else if unitless($width) { // columns
|
158
|
+
width: 100% / $columns * $width;
|
159
|
+
}
|
160
|
+
@else { // fallback
|
161
|
+
width: $width;
|
162
|
+
}
|
163
|
+
|
164
|
+
// Position (omega/row/fraction/columns/units)
|
165
|
+
@if $position != omega {
|
166
|
+
float: $flow; // normal float
|
167
|
+
}
|
168
|
+
|
169
|
+
@if $position == omega { // omega
|
170
|
+
float: $opos;
|
171
|
+
}
|
172
|
+
@else if $position == row { // row
|
173
|
+
@include row;
|
174
|
+
}
|
175
|
+
@else if $position {
|
176
|
+
margin: {
|
177
|
+
#{$opos}: -100%;
|
178
|
+
@if unitless($width) == false { // has unit, arbitrary width
|
179
|
+
#{$flow}: $position;
|
180
|
+
}
|
181
|
+
@else if round($position) != $position { // fraction
|
182
|
+
#{$flow}: $position * 100%;
|
183
|
+
}
|
184
|
+
@else if unitless($position) { // columns
|
185
|
+
#{$flow}: $position * 100% / $columns;
|
186
|
+
}
|
187
|
+
@else { // fallback
|
188
|
+
#{$flow}: $position;
|
189
|
+
}
|
190
|
+
}
|
191
|
+
}
|
192
|
+
}
|
193
|
+
|
194
|
+
// Backwards compatibility grid() => span()
|
195
|
+
@mixin grid($width, $position: false) {
|
196
|
+
@include span($width, $position);
|
197
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
description "Salsa is a simple yet very smart and flexible fluid layout system."
|
2
|
+
|
3
|
+
file 'style.scss', :media => 'all'
|
4
|
+
|
5
|
+
help %Q{
|
6
|
+
Salsa website:
|
7
|
+
|
8
|
+
http://tsi.github.com/Salsa/
|
9
|
+
|
10
|
+
Salsa on github:
|
11
|
+
|
12
|
+
https://github.com/tsi/Salsa
|
13
|
+
}
|
14
|
+
|
15
|
+
# Compass Extension Welcome Message
|
16
|
+
# Users will see this when they create a new project using this template.
|
17
|
+
welcome_message %Q{
|
18
|
+
Please see the Salsa website for all documentation and tutorials:
|
19
|
+
|
20
|
+
http://tsi.github.com/Salsa/
|
21
|
+
|
22
|
+
Let's Salsa...
|
23
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
|
2
|
+
// ---------------------------------------------------------------------------
|
3
|
+
// Salsa Settings.
|
4
|
+
// @see sass/salsa/_settings.scss
|
5
|
+
|
6
|
+
$container-width: 960px;
|
7
|
+
$columns: 16;
|
8
|
+
$gutter-width: 20px;
|
9
|
+
$flow: left;
|
10
|
+
|
11
|
+
|
12
|
+
// ---------------------------------------------------------------------------
|
13
|
+
// OldIEs support
|
14
|
+
|
15
|
+
// $box-sizing-polyfill-path: "";
|
16
|
+
// $ie7-support: true;
|
17
|
+
|
18
|
+
|
19
|
+
// ---------------------------------------------------------------------------
|
20
|
+
// Imports
|
21
|
+
|
22
|
+
@import "salsa";
|
23
|
+
|
24
|
+
|
25
|
+
// ---------------------------------------------------------------------------
|
26
|
+
// Layout
|
27
|
+
|
28
|
+
.container {
|
29
|
+
@include container;
|
30
|
+
@include salsa-background;
|
31
|
+
}
|
32
|
+
|
33
|
+
.sidebar {
|
34
|
+
@include grid(4);
|
35
|
+
}
|
36
|
+
|
37
|
+
.content {
|
38
|
+
@include grid(12);
|
39
|
+
}
|
metadata
ADDED
@@ -0,0 +1,109 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: salsa
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
hash: 29
|
5
|
+
prerelease:
|
6
|
+
segments:
|
7
|
+
- 0
|
8
|
+
- 0
|
9
|
+
- 1
|
10
|
+
version: 0.0.1
|
11
|
+
platform: ruby
|
12
|
+
authors:
|
13
|
+
- Tsachi Shlidor
|
14
|
+
autorequire:
|
15
|
+
bindir: bin
|
16
|
+
cert_chain: []
|
17
|
+
|
18
|
+
date: 2013-01-11 00:00:00 Z
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
name: sass
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
none: false
|
25
|
+
requirements:
|
26
|
+
- - ">="
|
27
|
+
- !ruby/object:Gem::Version
|
28
|
+
hash: 15
|
29
|
+
segments:
|
30
|
+
- 3
|
31
|
+
- 2
|
32
|
+
- 0
|
33
|
+
version: 3.2.0
|
34
|
+
type: :runtime
|
35
|
+
version_requirements: *id001
|
36
|
+
- !ruby/object:Gem::Dependency
|
37
|
+
name: compass
|
38
|
+
prerelease: false
|
39
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
40
|
+
none: false
|
41
|
+
requirements:
|
42
|
+
- - ">="
|
43
|
+
- !ruby/object:Gem::Version
|
44
|
+
hash: 45
|
45
|
+
segments:
|
46
|
+
- 0
|
47
|
+
- 12
|
48
|
+
- 1
|
49
|
+
version: 0.12.1
|
50
|
+
type: :runtime
|
51
|
+
version_requirements: *id002
|
52
|
+
description: Salsa is a simple yet very smart and flexible fluid layout system.
|
53
|
+
email:
|
54
|
+
- "\"tsi@rtl-themes.co.il\""
|
55
|
+
executables: []
|
56
|
+
|
57
|
+
extensions: []
|
58
|
+
|
59
|
+
extra_rdoc_files: []
|
60
|
+
|
61
|
+
files:
|
62
|
+
- README.md
|
63
|
+
- CHANGELOG.md
|
64
|
+
- LICENSE.txt
|
65
|
+
- lib/salsa.rb
|
66
|
+
- sass/salsa/_background.scss
|
67
|
+
- sass/salsa/_settings.scss
|
68
|
+
- sass/salsa/_system.scss
|
69
|
+
- sass/salsa/_functions.scss
|
70
|
+
- sass/_salsa.scss
|
71
|
+
- templates/project/manifest.rb
|
72
|
+
- templates/project/style.scss
|
73
|
+
homepage: http://tsi.github.com/Salsa/
|
74
|
+
licenses: []
|
75
|
+
|
76
|
+
post_install_message:
|
77
|
+
rdoc_options: []
|
78
|
+
|
79
|
+
require_paths:
|
80
|
+
- lib
|
81
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
82
|
+
none: false
|
83
|
+
requirements:
|
84
|
+
- - ">="
|
85
|
+
- !ruby/object:Gem::Version
|
86
|
+
hash: 3
|
87
|
+
segments:
|
88
|
+
- 0
|
89
|
+
version: "0"
|
90
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
91
|
+
none: false
|
92
|
+
requirements:
|
93
|
+
- - ">="
|
94
|
+
- !ruby/object:Gem::Version
|
95
|
+
hash: 23
|
96
|
+
segments:
|
97
|
+
- 1
|
98
|
+
- 3
|
99
|
+
- 6
|
100
|
+
version: 1.3.6
|
101
|
+
requirements: []
|
102
|
+
|
103
|
+
rubyforge_project:
|
104
|
+
rubygems_version: 1.8.15
|
105
|
+
signing_key:
|
106
|
+
specification_version: 3
|
107
|
+
summary: Layout system for Compass.
|
108
|
+
test_files: []
|
109
|
+
|