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.
Files changed (38) hide show
  1. data/lib/aurora.rb +2 -2
  2. data/templates/parmesan/README_PARTIALS.md +82 -0
  3. data/templates/parmesan/README_SASS.md +55 -0
  4. data/templates/parmesan/_base.scss +28 -0
  5. data/templates/parmesan/_basic_page.scss +10 -0
  6. data/templates/parmesan/_comment.scss +6 -0
  7. data/templates/parmesan/_content.scss +9 -0
  8. data/templates/parmesan/_defaults.scss +8 -0
  9. data/templates/parmesan/_footer.scss +7 -0
  10. data/templates/parmesan/_forms.scss +62 -0
  11. data/templates/parmesan/_global.scss +7 -0
  12. data/templates/parmesan/_header.scss +7 -0
  13. data/templates/parmesan/_node.scss +6 -0
  14. data/templates/parmesan/_page.scss +11 -0
  15. data/templates/parmesan/_sidebar_first.scss +7 -0
  16. data/templates/parmesan/_sidebar_second.scss +7 -0
  17. data/templates/parmesan/_type.scss +125 -0
  18. data/templates/parmesan/_variables.scss +153 -0
  19. data/templates/parmesan/_view.scss +6 -0
  20. data/templates/parmesan/maintenance.scss +31 -0
  21. data/templates/parmesan/manifest.rb +66 -0
  22. data/templates/parmesan/print.scss +16 -0
  23. data/templates/{shared/ie.scss → parmesan/style.scss} +15 -10
  24. data/templates/project/manifest.rb +10 -7
  25. data/templates/shared/README-Sass.md +54 -0
  26. data/templates/shared/{print.scss → _print.scss} +0 -0
  27. data/templates/shared/aurora.info.erb +13 -9
  28. data/templates/shared/config.rb.erb +17 -18
  29. data/templates/shared/modernizr.js +1118 -0
  30. data/templates/shared/style.scss +5 -1
  31. data/templates/shared/template.php.erb +169 -7
  32. data/templates/singularity/manifest.rb +10 -7
  33. data/templates/susy/manifest.rb +10 -7
  34. metadata +28 -9
  35. data/templates/shared/_ie-design.scss +0 -9
  36. data/templates/shared/_ie-layout.scss +0 -9
  37. data/templates/shared/_ie-style-guide.scss +0 -10
  38. data/templates/shared/modernizr-2.5.3.js +0 -726
@@ -6,6 +6,6 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
6
6
  Compass::Frameworks.register('aurora', :path => extension_path)
7
7
 
8
8
  module Aurora
9
- VERSION = "0.9.3"
10
- DATE = "2012-10-10"
9
+ VERSION = "0.9.5"
10
+ DATE = "2012-11-03"
11
11
  end
@@ -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,10 @@
1
+ /**
2
+ * Basic Page node type partial.
3
+ */
4
+
5
+ .node-basic-page {
6
+
7
+ &.node-teaser {
8
+
9
+ }
10
+ }
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Comment area SASS partial.
3
+ */
4
+
5
+
6
+
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Content area SASS partial.
3
+ */
4
+
5
+ #main {
6
+ #content {
7
+
8
+ }
9
+ }
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Defaults: For any general elements to apply to the whole page.
3
+ */
4
+
5
+ .clearfix {
6
+ @include clearfix();
7
+ }
8
+
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Footer area SASS partial.
3
+ */
4
+
5
+ footer {
6
+
7
+ }
@@ -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,7 @@
1
+ /**
2
+ * Global partials: Typography, forms, site-wide changes.
3
+ */
4
+
5
+ @import 'defaults';
6
+ @import 'type';
7
+ @import 'forms';
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Header area SASS partial.
3
+ */
4
+
5
+ header {
6
+
7
+ }
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Node partials: Partials for each node type within Drupal.
3
+ */
4
+
5
+
6
+ @import 'basic_page';
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Page partials: Parts of site found in page.tpl.php.
3
+ */
4
+
5
+
6
+ @import 'header';
7
+ @import 'content';
8
+ @import 'sidebar_first';
9
+ @import 'sidebar_second';
10
+ @import 'comment';
11
+ @import 'footer';
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Sidebar first SASS partial.
3
+ */
4
+
5
+ #sidebar-first {
6
+
7
+ }
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Sidebar second SASS partial.
3
+ */
4
+
5
+ #sidebar-second {
6
+
7
+ }
@@ -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 {}