compass-aurora 0.9.3 → 0.9.5
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/lib/aurora.rb +2 -2
- data/templates/parmesan/README_PARTIALS.md +82 -0
- data/templates/parmesan/README_SASS.md +55 -0
- data/templates/parmesan/_base.scss +28 -0
- data/templates/parmesan/_basic_page.scss +10 -0
- data/templates/parmesan/_comment.scss +6 -0
- data/templates/parmesan/_content.scss +9 -0
- data/templates/parmesan/_defaults.scss +8 -0
- data/templates/parmesan/_footer.scss +7 -0
- data/templates/parmesan/_forms.scss +62 -0
- data/templates/parmesan/_global.scss +7 -0
- data/templates/parmesan/_header.scss +7 -0
- data/templates/parmesan/_node.scss +6 -0
- data/templates/parmesan/_page.scss +11 -0
- data/templates/parmesan/_sidebar_first.scss +7 -0
- data/templates/parmesan/_sidebar_second.scss +7 -0
- data/templates/parmesan/_type.scss +125 -0
- data/templates/parmesan/_variables.scss +153 -0
- data/templates/parmesan/_view.scss +6 -0
- data/templates/parmesan/maintenance.scss +31 -0
- data/templates/parmesan/manifest.rb +66 -0
- data/templates/parmesan/print.scss +16 -0
- data/templates/{shared/ie.scss → parmesan/style.scss} +15 -10
- data/templates/project/manifest.rb +10 -7
- data/templates/shared/README-Sass.md +54 -0
- data/templates/shared/{print.scss → _print.scss} +0 -0
- data/templates/shared/aurora.info.erb +13 -9
- data/templates/shared/config.rb.erb +17 -18
- data/templates/shared/modernizr.js +1118 -0
- data/templates/shared/style.scss +5 -1
- data/templates/shared/template.php.erb +169 -7
- data/templates/singularity/manifest.rb +10 -7
- data/templates/susy/manifest.rb +10 -7
- metadata +28 -9
- data/templates/shared/_ie-design.scss +0 -9
- data/templates/shared/_ie-layout.scss +0 -9
- data/templates/shared/_ie-style-guide.scss +0 -10
- data/templates/shared/modernizr-2.5.3.js +0 -726
data/lib/aurora.rb
CHANGED
@@ -0,0 +1,82 @@
|
|
1
|
+
# Theme partials
|
2
|
+
|
3
|
+
|
4
|
+
## Intro to Sass partials
|
5
|
+
|
6
|
+
This directory contains includes known as [Sass partials](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials). Like PHP, Sass can
|
7
|
+
"include" files and incorporate them into a larger master file. You can easily
|
8
|
+
identify a Sass partial because it begins with an underscore, indicating to Sass
|
9
|
+
that it should not generate a standalone .css file from the original .scss
|
10
|
+
|
11
|
+
Beyond that there are no enforced rules. It's up to each team to decide how
|
12
|
+
they're used.
|
13
|
+
|
14
|
+
|
15
|
+
## How does this theme use partials?
|
16
|
+
|
17
|
+
We incorporated the use of Sass partials and the [nesting](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules) architecture that Sass
|
18
|
+
provides to provide a more human-understandable organization to the CSS files.
|
19
|
+
|
20
|
+
We've also leveraged the respond-to Sass extension, which allows us to embed
|
21
|
+
rules involving media queries directly into each component rather than relying
|
22
|
+
on the extremely encumbering method of grouping styles per media query.
|
23
|
+
|
24
|
+
We have set up the CSS so that each file represents a component of the website.
|
25
|
+
If you are making changes to the Funding section, the styles belong in the
|
26
|
+
funding partial. If a style should be applied sitewide then place it in one of
|
27
|
+
the global partials.
|
28
|
+
|
29
|
+
**Example**
|
30
|
+
|
31
|
+
*Writing this Sass...*
|
32
|
+
|
33
|
+
#block-views-myview {
|
34
|
+
padding: 1em;
|
35
|
+
|
36
|
+
h2 {
|
37
|
+
font-size: 2em;
|
38
|
+
color: #fff;
|
39
|
+
}
|
40
|
+
|
41
|
+
p {
|
42
|
+
line-height: 2em;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
*Produces this CSS...*
|
47
|
+
|
48
|
+
#block-views-myview {
|
49
|
+
padding: 1em;
|
50
|
+
}
|
51
|
+
|
52
|
+
#block-views-myview h2 {
|
53
|
+
font-size: 2em;
|
54
|
+
color: #ffffff;
|
55
|
+
}
|
56
|
+
|
57
|
+
#block-views-myview p {
|
58
|
+
line-height: 2em;
|
59
|
+
}
|
60
|
+
|
61
|
+
|
62
|
+
## Benefits
|
63
|
+
|
64
|
+
The files are organized into a pattern that humans understand, rather than having
|
65
|
+
to be trained to separate styles into layout/typography/brand, or having to jump
|
66
|
+
between three media queries in order to consistently apply a change to an element
|
67
|
+
that changes appearance between mobile/tablet/desktop.
|
68
|
+
|
69
|
+
You can choose to stop using Sass at any time since it generates pure CSS files
|
70
|
+
each time you save a .scss file. See drawbacks before proceeding.
|
71
|
+
|
72
|
+
Finally, a nice side effect is that code split amongst many files makes merging,
|
73
|
+
collaborating and dealing with version control less painful.
|
74
|
+
|
75
|
+
|
76
|
+
## Drawbacks
|
77
|
+
|
78
|
+
If a team is unable or unwilling to use Sass and Compass, the .css files are
|
79
|
+
editable, but you cannot switch back to Sass once you switch to CSS. Technically
|
80
|
+
it is possible, but it will be a *HUGE* pain to get SCSS back in sync with CSS.
|
81
|
+
|
82
|
+
Besides, once you try Sass you will not want to go back :)
|
@@ -0,0 +1,55 @@
|
|
1
|
+
ABOUT SASS AND COMPASS
|
2
|
+
----------------------
|
3
|
+
|
4
|
+
Sass is a language that is just normal CSS plus some extra features, like
|
5
|
+
variables, nested rules, math, mixins, etc. If your stylesheets are written in
|
6
|
+
Sass, helper applications can convert them to standard CSS so that you can
|
7
|
+
include the CSS in the normal ways with your theme.
|
8
|
+
|
9
|
+
To learn more about Sass, visit: http://sass-lang.com
|
10
|
+
|
11
|
+
Compass is a helper library for Sass. It includes libraries of shared mixins, a
|
12
|
+
package manager to add additional extension libraries, and an executable that
|
13
|
+
can easily convert Sass files into CSS.
|
14
|
+
|
15
|
+
To learn more about Compass, visit: http://compass-style.org
|
16
|
+
|
17
|
+
|
18
|
+
DEVELOPING WITH SASS AND COMPASS
|
19
|
+
--------------------------------
|
20
|
+
|
21
|
+
To automatically generate the CSS versions of the scss while you are doing theme
|
22
|
+
development, you'll need to tell Compass to "watch" the sass directory so that
|
23
|
+
any time a .scss file is changed it will automatically place a generated CSS
|
24
|
+
file into your sub-theme's css directory:
|
25
|
+
|
26
|
+
compass watch <path to your sub-theme's directory>
|
27
|
+
|
28
|
+
If you are already in the root of your sub-theme's directory, you can simply
|
29
|
+
type: compass watch
|
30
|
+
|
31
|
+
While using generated CSS with Firebug, the line numbers it reports will be
|
32
|
+
wrong since it will be showing the generated CSS file's line numbers and not the
|
33
|
+
line numbers of the source Sass files. To correct this problem, you can install
|
34
|
+
the FireSass plug-in into Firefox and then edit your sub-theme's config.rb file
|
35
|
+
to set: firesass = true
|
36
|
+
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
|
37
|
+
|
38
|
+
|
39
|
+
MOVING YOUR CSS TO PRODUCTION
|
40
|
+
-----------------------------
|
41
|
+
|
42
|
+
Once you have finished your sub-theme development and are ready to move your CSS
|
43
|
+
files to your production server, you'll need to tell sass to update all your CSS
|
44
|
+
files and to compress them (to improve performance). Note: the Compass command
|
45
|
+
will only generate CSS for .scss files that have recently changed; in order to
|
46
|
+
force it to regenerate all the CSS files, you can use the Compass' clean command
|
47
|
+
to delete all the generated CSS files.
|
48
|
+
|
49
|
+
- Delete all CSS files by running: compass clean
|
50
|
+
- Edit the config.rb file in your theme's directory and uncomment this line by
|
51
|
+
deleting the "#" from the beginnning:
|
52
|
+
#environment = :production
|
53
|
+
- Regenerate all the CSS files by running: compass compile
|
54
|
+
|
55
|
+
And don't forget to turn on Drupal's CSS aggregation. :-)
|
@@ -0,0 +1,28 @@
|
|
1
|
+
////////////////////////
|
2
|
+
// Base Partials
|
3
|
+
//
|
4
|
+
// These files will be shared across all three of your output
|
5
|
+
// CSS files. Generally included here are only Compass Extension
|
6
|
+
// imports and imports for variables, functions, mixins, and extendables.
|
7
|
+
////////////////////////
|
8
|
+
|
9
|
+
////////////////////////
|
10
|
+
// Compass Imports
|
11
|
+
//
|
12
|
+
// Aurora includes @import 'compass' so you don't need to.
|
13
|
+
////////////////////////
|
14
|
+
|
15
|
+
////////////////////////
|
16
|
+
// Compass Extensions
|
17
|
+
//
|
18
|
+
// Aurora includes Toolkit, Breakpoint, Respond-to, Sassy Buttons, and Susy
|
19
|
+
////////////////////////
|
20
|
+
@import 'aurora/susy-grid';
|
21
|
+
|
22
|
+
////////////////////////
|
23
|
+
// Private Imports
|
24
|
+
////////////////////////
|
25
|
+
@import 'variables';
|
26
|
+
@import 'functions';
|
27
|
+
@import 'mixins';
|
28
|
+
@import 'extendables';
|
@@ -0,0 +1,62 @@
|
|
1
|
+
/**
|
2
|
+
* Form elements: Inputs, buttons, etc.
|
3
|
+
*/
|
4
|
+
|
5
|
+
form {
|
6
|
+
}
|
7
|
+
|
8
|
+
fieldset {
|
9
|
+
}
|
10
|
+
|
11
|
+
legend {
|
12
|
+
}
|
13
|
+
|
14
|
+
|
15
|
+
label,
|
16
|
+
input,
|
17
|
+
button,
|
18
|
+
select,
|
19
|
+
textarea {
|
20
|
+
|
21
|
+
}
|
22
|
+
|
23
|
+
input,
|
24
|
+
button,
|
25
|
+
select,
|
26
|
+
textarea {
|
27
|
+
font-family: $form-font-family; // And only set font-family here for those that need it (note the missing label element)
|
28
|
+
}
|
29
|
+
|
30
|
+
label {
|
31
|
+
}
|
32
|
+
|
33
|
+
.button,
|
34
|
+
button,
|
35
|
+
input[type="submit"],
|
36
|
+
input[type="reset"],
|
37
|
+
input[type="button"] {
|
38
|
+
|
39
|
+
|
40
|
+
&:hover {
|
41
|
+
|
42
|
+
}
|
43
|
+
|
44
|
+
&:active {
|
45
|
+
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
input[type="text"],
|
50
|
+
input[type="password"],
|
51
|
+
input[type="email"],
|
52
|
+
textarea,
|
53
|
+
select {
|
54
|
+
|
55
|
+
&:focus {
|
56
|
+
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
input[type="checkbox"] {
|
61
|
+
|
62
|
+
}
|
@@ -0,0 +1,125 @@
|
|
1
|
+
/**
|
2
|
+
* Typography: Headings, body text, lists, code, and more for a versatile and durable typography system.
|
3
|
+
*/
|
4
|
+
|
5
|
+
body {
|
6
|
+
font-family: $font-body;
|
7
|
+
font-size: $base-font-size;
|
8
|
+
line-height: $base-line-height;
|
9
|
+
}
|
10
|
+
|
11
|
+
/* =============================================================================
|
12
|
+
Typography
|
13
|
+
|
14
|
+
Note: Normalize already sets the font sizes, use this to override
|
15
|
+
========================================================================== */
|
16
|
+
|
17
|
+
// Helper for all headings.
|
18
|
+
#{headings()} {
|
19
|
+
|
20
|
+
}
|
21
|
+
|
22
|
+
h1 {
|
23
|
+
}
|
24
|
+
|
25
|
+
h2 {
|
26
|
+
}
|
27
|
+
|
28
|
+
h3 {
|
29
|
+
}
|
30
|
+
|
31
|
+
h4 {
|
32
|
+
}
|
33
|
+
|
34
|
+
h5 {
|
35
|
+
}
|
36
|
+
|
37
|
+
h6 {
|
38
|
+
}
|
39
|
+
|
40
|
+
/* =============================================================================
|
41
|
+
Links
|
42
|
+
|
43
|
+
The order of link states are based on Eric Meyer's article:
|
44
|
+
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
|
45
|
+
========================================================================== */
|
46
|
+
a {
|
47
|
+
|
48
|
+
&:link {
|
49
|
+
color: $link;
|
50
|
+
}
|
51
|
+
|
52
|
+
&:visited {
|
53
|
+
color: $visited;
|
54
|
+
}
|
55
|
+
|
56
|
+
&:hover, &:focus {
|
57
|
+
|
58
|
+
}
|
59
|
+
|
60
|
+
&:active, &.active {
|
61
|
+
|
62
|
+
}
|
63
|
+
}
|
64
|
+
|
65
|
+
|
66
|
+
/* =============================================================================
|
67
|
+
Lists
|
68
|
+
========================================================================== */
|
69
|
+
|
70
|
+
ul, ol {
|
71
|
+
|
72
|
+
}
|
73
|
+
|
74
|
+
ul ul,
|
75
|
+
ul ol,
|
76
|
+
ol ol,
|
77
|
+
ol ul {
|
78
|
+
margin-bottom: 0;
|
79
|
+
}
|
80
|
+
|
81
|
+
ul {
|
82
|
+
|
83
|
+
}
|
84
|
+
|
85
|
+
ol {
|
86
|
+
|
87
|
+
}
|
88
|
+
|
89
|
+
li {
|
90
|
+
|
91
|
+
}
|
92
|
+
|
93
|
+
ul.unstyled,
|
94
|
+
ol.unstyled {
|
95
|
+
|
96
|
+
}
|
97
|
+
|
98
|
+
/* =============================================================================
|
99
|
+
Misc.
|
100
|
+
========================================================================== */
|
101
|
+
|
102
|
+
// Horizontal rules
|
103
|
+
|
104
|
+
hr {
|
105
|
+
height: 1px;
|
106
|
+
border: 1px solid #666;
|
107
|
+
padding-bottom: -1px;
|
108
|
+
margin: rhythm(1) 0;
|
109
|
+
}
|
110
|
+
|
111
|
+
// Emphasis
|
112
|
+
|
113
|
+
strong {
|
114
|
+
font-weight: bold;
|
115
|
+
}
|
116
|
+
|
117
|
+
em {
|
118
|
+
font-style: italic;
|
119
|
+
}
|
120
|
+
|
121
|
+
// Selection text
|
122
|
+
// Note: Text shadow, background and color have all been set within normalize.
|
123
|
+
|
124
|
+
::selection {}
|
125
|
+
::-moz-selection {}
|