compass-blueprint 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.
Files changed (63) hide show
  1. data/.gitignore +17 -0
  2. data/Gemfile +4 -0
  3. data/LICENSE +22 -0
  4. data/README.md +29 -0
  5. data/Rakefile +2 -0
  6. data/compass-blueprint.gemspec +18 -0
  7. data/framework/blueprint/stylesheets/_blueprint.scss +37 -0
  8. data/framework/blueprint/stylesheets/blueprint/_buttons.scss +101 -0
  9. data/framework/blueprint/stylesheets/blueprint/_colors.scss +36 -0
  10. data/framework/blueprint/stylesheets/blueprint/_debug.scss +28 -0
  11. data/framework/blueprint/stylesheets/blueprint/_fancy-type.scss +88 -0
  12. data/framework/blueprint/stylesheets/blueprint/_form.scss +66 -0
  13. data/framework/blueprint/stylesheets/blueprint/_grid.scss +258 -0
  14. data/framework/blueprint/stylesheets/blueprint/_ie.scss +111 -0
  15. data/framework/blueprint/stylesheets/blueprint/_interaction.scss +66 -0
  16. data/framework/blueprint/stylesheets/blueprint/_link-icons.scss +37 -0
  17. data/framework/blueprint/stylesheets/blueprint/_liquid.scss +152 -0
  18. data/framework/blueprint/stylesheets/blueprint/_print.scss +86 -0
  19. data/framework/blueprint/stylesheets/blueprint/_reset.scss +3 -0
  20. data/framework/blueprint/stylesheets/blueprint/_rtl.scss +121 -0
  21. data/framework/blueprint/stylesheets/blueprint/_scaffolding.scss +52 -0
  22. data/framework/blueprint/stylesheets/blueprint/_typography.scss +90 -0
  23. data/framework/blueprint/stylesheets/blueprint/_utilities.scss +37 -0
  24. data/framework/blueprint/stylesheets/blueprint/reset/_utilities.scss +80 -0
  25. data/framework/blueprint/templates/basic/grid.png +0 -0
  26. data/framework/blueprint/templates/basic/ie.sass +4 -0
  27. data/framework/blueprint/templates/basic/manifest.rb +30 -0
  28. data/framework/blueprint/templates/basic/partials/_base.sass +10 -0
  29. data/framework/blueprint/templates/basic/print.sass +4 -0
  30. data/framework/blueprint/templates/basic/screen.sass +12 -0
  31. data/framework/blueprint/templates/buttons/buttons.sass +49 -0
  32. data/framework/blueprint/templates/buttons/buttons/cross.png +0 -0
  33. data/framework/blueprint/templates/buttons/buttons/key.png +0 -0
  34. data/framework/blueprint/templates/buttons/buttons/tick.png +0 -0
  35. data/framework/blueprint/templates/buttons/manifest.rb +17 -0
  36. data/framework/blueprint/templates/link_icons/link_icons.sass +13 -0
  37. data/framework/blueprint/templates/link_icons/link_icons/doc.png +0 -0
  38. data/framework/blueprint/templates/link_icons/link_icons/email.png +0 -0
  39. data/framework/blueprint/templates/link_icons/link_icons/external.png +0 -0
  40. data/framework/blueprint/templates/link_icons/link_icons/feed.png +0 -0
  41. data/framework/blueprint/templates/link_icons/link_icons/im.png +0 -0
  42. data/framework/blueprint/templates/link_icons/link_icons/pdf.png +0 -0
  43. data/framework/blueprint/templates/link_icons/link_icons/visited.png +0 -0
  44. data/framework/blueprint/templates/link_icons/link_icons/xls.png +0 -0
  45. data/framework/blueprint/templates/link_icons/manifest.rb +23 -0
  46. data/framework/blueprint/templates/project/grid.png +0 -0
  47. data/framework/blueprint/templates/project/ie.sass +16 -0
  48. data/framework/blueprint/templates/project/manifest.rb +30 -0
  49. data/framework/blueprint/templates/project/partials/_base.sass +11 -0
  50. data/framework/blueprint/templates/project/print.sass +8 -0
  51. data/framework/blueprint/templates/project/screen.sass +46 -0
  52. data/framework/blueprint/templates/semantic/grid.png +0 -0
  53. data/framework/blueprint/templates/semantic/ie.sass +16 -0
  54. data/framework/blueprint/templates/semantic/manifest.rb +33 -0
  55. data/framework/blueprint/templates/semantic/partials/_base.sass +10 -0
  56. data/framework/blueprint/templates/semantic/partials/_form.sass +6 -0
  57. data/framework/blueprint/templates/semantic/partials/_page.sass +17 -0
  58. data/framework/blueprint/templates/semantic/partials/_two_col.sass +38 -0
  59. data/framework/blueprint/templates/semantic/print.sass +5 -0
  60. data/framework/blueprint/templates/semantic/screen.sass +14 -0
  61. data/lib/compass-blueprint.rb +4 -0
  62. data/lib/compass-blueprint/version.rb +5 -0
  63. metadata +119 -0
@@ -0,0 +1,37 @@
1
+ @import "compass/typography/text/nowrap";
2
+ @import "compass/utilities/general/clearfix";
3
+
4
+ // Most of these utility classes are not "semantic". If you use them,
5
+ // you are mixing your content and presentation. For shame!
6
+
7
+ @mixin blueprint-utilities {
8
+ // Regular clearing apply to column that should drop below previous ones.
9
+ .clear {
10
+ clear: both; }
11
+ // turn off text wrapping for the element.
12
+ .nowrap {
13
+ @include nowrap; }
14
+ // Apply to an element that has floated children to make the bottom
15
+ // of the element fall _below_ the floated children.
16
+ .clearfix {
17
+ @include clearfix; }
18
+ .small {
19
+ font-size: 0.8em;
20
+ margin-bottom: 1.875em;
21
+ line-height: 1.875em; }
22
+ .large {
23
+ font-size: 1.2em;
24
+ line-height: 2.5em;
25
+ margin-bottom: 1.25em; }
26
+ .first {
27
+ margin-left: 0;
28
+ padding-left: 0; }
29
+ .last {
30
+ margin-right: 0;
31
+ padding-right: 0; }
32
+ .top {
33
+ margin-top: 0;
34
+ padding-top: 0; }
35
+ .bottom {
36
+ margin-bottom: 0;
37
+ padding-bottom: 0; } }
@@ -0,0 +1,80 @@
1
+ // Global reset rules.
2
+ // For more specific resets, use the reset mixins provided below
3
+ @mixin blueprint-global-reset {
4
+ html { @extend %bp-reset-box-model; }
5
+ body { @extend %bp-reset-element; }
6
+ @include blueprint-nested-reset;
7
+ }
8
+
9
+ // Reset all elements within some selector scope.To reset the selector itself,
10
+ // mixin the appropriate reset mixin for that element type as well. This could be
11
+ // useful if you want to style a part of your page in a dramatically different way.
12
+ @mixin blueprint-nested-reset {
13
+ div, span, object, iframe, p,
14
+ pre, a, abbr, acronym, address,
15
+ code, del, dfn, em, img,
16
+ dl, dt, dd, ol, ul, li, fieldset,
17
+ form, label, legend,
18
+ caption, tbody, tfoot, thead, tr { @extend %bp-reset-element; }
19
+ #{headers(all)} { @extend %bp-reset-element; }
20
+ #{elements-of-type(html5-block)} { @extend %bp-reset-html5-element; }
21
+ blockquote, q { @extend %bp-reset-quotation; }
22
+ th, td, caption { @extend %bp-reset-table-cell; }
23
+ table { @extend %bp-reset-table; }
24
+ a img { @extend %bp-reset-linked-image; }
25
+ }
26
+
27
+ @mixin blueprint-reset-html5-element {
28
+ @extend %bp-reset-element;
29
+ display: block;
30
+ }
31
+
32
+ @mixin blueprint-reset-box-model {
33
+ margin: 0;
34
+ padding: 0;
35
+ border: 0;
36
+ }
37
+
38
+ @mixin blueprint-basic-reset {
39
+ @include blueprint-reset-box-model;
40
+ @include blueprint-reset-typography;
41
+ }
42
+
43
+ @mixin blueprint-reset-typography {
44
+ font: {
45
+ weight: inherit;
46
+ style: inherit;
47
+ size: 100%;
48
+ family: inherit;
49
+ }
50
+ vertical-align: baseline;
51
+ }
52
+
53
+ @mixin blueprint-reset-quotation {
54
+ @extend %bp-reset-element;
55
+ quotes: "" "";
56
+ &:before, &:after { content: ""; }
57
+ }
58
+
59
+ @mixin blueprint-reset-table-cell {
60
+ @extend %bp-reset-element;
61
+ float: none !important;
62
+ text-align: left;
63
+ font-weight: normal;
64
+ vertical-align: middle;
65
+ }
66
+
67
+ @mixin blueprint-reset-table {
68
+ @extend %bp-reset-element;
69
+ border-collapse: separate;
70
+ border-spacing: 0;
71
+ vertical-align: middle;
72
+ }
73
+
74
+ %bp-reset-box-model { @include blueprint-reset-box-model; }
75
+ %bp-reset-element { @include blueprint-basic-reset; }
76
+ %bp-reset-html5-element { @include blueprint-reset-html5-element; }
77
+ %bp-reset-quotation { @include blueprint-reset-quotation; }
78
+ %bp-reset-table-cell { @include blueprint-reset-table-cell; }
79
+ %bp-reset-table { @include blueprint-reset-table; }
80
+ %bp-reset-linked-image { border: none; }
@@ -0,0 +1,4 @@
1
+ @import blueprint
2
+
3
+ // Generate the blueprint IE-specific customizations:
4
+ +blueprint-ie
@@ -0,0 +1,30 @@
1
+ description "A basic blueprint install that mimics the actual blueprint css."
2
+
3
+ stylesheet 'screen.sass', :media => 'screen, projection'
4
+ stylesheet 'partials/_base.sass'
5
+ stylesheet 'print.sass', :media => 'print'
6
+ stylesheet 'ie.sass', :media => 'screen, projection', :condition => "lt IE 8"
7
+
8
+ image 'grid.png'
9
+
10
+ help %Q{
11
+ Please see the blueprint website for documentation on how blueprint works:
12
+
13
+ http://blueprintcss.org/
14
+
15
+ Docs on the compass port of blueprint can be found on the wiki:
16
+
17
+ http://wiki.github.com/chriseppstein/compass/blueprint-documentation
18
+ }
19
+
20
+ welcome_message %Q{
21
+ Please see the blueprint website for documentation on how blueprint works:
22
+
23
+ http://blueprintcss.org/
24
+
25
+ Docs on the compass port of blueprint can be found on the wiki:
26
+
27
+ http://wiki.github.com/chriseppstein/compass/blueprint-documentation
28
+
29
+ To get started, edit the screen.sass file and read the comments and code there.
30
+ }
@@ -0,0 +1,10 @@
1
+ // Here is where you can define your constants for your application and to configure the blueprint framework.
2
+ // Feel free to delete these if you want keep the defaults:
3
+
4
+ $blueprint-grid-columns : 24
5
+ $blueprint-grid-width : 30px
6
+ $blueprint-grid-margin : 10px
7
+
8
+ // If you change your grid column dimensions
9
+ // you can make a new grid background image from the command line like this:
10
+ // compass grid-img 30+10x16
@@ -0,0 +1,4 @@
1
+ @import blueprint
2
+
3
+ // Generate the blueprint print styles:
4
+ +blueprint-print
@@ -0,0 +1,12 @@
1
+ // This import applies a global reset to any page that imports this stylesheet.
2
+ @import blueprint/reset
3
+ // To configure blueprint, edit the partials/_base.sass file.
4
+ @import partials/base
5
+ // Import all the default blueprint modules so that we can access their mixins.
6
+ @import blueprint
7
+ // Import the non-default scaffolding module.
8
+ @import blueprint/scaffolding
9
+
10
+ // Generate the blueprint framework according to your configuration:
11
+ +blueprint
12
+ +blueprint-scaffolding
@@ -0,0 +1,49 @@
1
+ @import compass/utilities/general/float
2
+ @import blueprint/buttons
3
+
4
+ //
5
+ Use the following HTML code to place the buttons on your site:
6
+
7
+ <button type="submit" class="button positive">
8
+ <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
9
+ </button>
10
+
11
+ <a class="button" href="/password/reset/">
12
+ <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
13
+ </a>
14
+
15
+ <a href="#" class="button negative">
16
+ <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
17
+ </a>
18
+
19
+ a.button
20
+ // you can pass "left" or "right" to +anchor-button to float it in that direction
21
+ // or you can pass no argument to leave it inline-block (cross browser safe!) within
22
+ // the flow of your page.
23
+ +anchor-button(left)
24
+ // All the button color mixins take 4 optional arguments:
25
+ // font color, background color, border color, border highlight color
26
+ // the first three default to constants set in blueprint/buttons.sass
27
+ // the last one defaults to a shade lighter than the border color.
28
+ +button-colors
29
+ +button-hover-colors
30
+ +button-active-colors
31
+
32
+ button
33
+ // The +button-button mixin is just like the +anchor-button mixin, but for <button> elements.
34
+ +button-button(left)
35
+ +button-colors
36
+ +button-hover-colors
37
+ +button-active-colors
38
+
39
+ // We can change the colors for buttons of certain classes, etc.
40
+ a.positive, button.positive
41
+ color: #529214
42
+ +button-hover-colors(#529214, #E6EFC2, #C6D880)
43
+ +button-active-colors(#FFF, #529214, #529214)
44
+
45
+ a.negative, button.negative
46
+ color: #D12F19
47
+ +button-hover-colors(#D12F19, #FBE3E4, #FBC2C4)
48
+ +button-active-colors(#FFF, #D12F19, #D12F19)
49
+
@@ -0,0 +1,17 @@
1
+ description "Button Plugin"
2
+ stylesheet 'buttons.sass', :media => 'screen, projection'
3
+
4
+ image 'buttons/cross.png'
5
+ image 'buttons/key.png'
6
+ image 'buttons/tick.png'
7
+
8
+ help %Q{
9
+ To install the button plugin:
10
+ compass init --using blueprint/buttons
11
+
12
+ The buttons.sass file is just a recommendation to show you how to use the button mixins.
13
+ }
14
+
15
+ welcome_message %Q{
16
+ The buttons.sass file is just a recommendation to show you how to use the button mixins.
17
+ }
@@ -0,0 +1,13 @@
1
+ @import blueprint/link-icons
2
+
3
+ // This turns link icons on for all links. You can change the scoping selector from
4
+ // body to something more specific if you prefer.
5
+ body
6
+ +link-icons
7
+ // Use this class if a link gets an icon when it shouldn't.
8
+ a.noicon
9
+ +no-link-icon
10
+ // Not all links have a url structure that can be detected,
11
+ // So you can set them explicitly yourself like so:
12
+ a#this-is-a-pdf-link
13
+ +link-icon("pdf.png")
@@ -0,0 +1,23 @@
1
+ description "Icons for common types of links"
2
+
3
+ stylesheet "link_icons.sass", :media => 'screen, projection'
4
+
5
+ image 'link_icons/doc.png'
6
+ image 'link_icons/email.png'
7
+ image 'link_icons/external.png'
8
+ image 'link_icons/feed.png'
9
+ image 'link_icons/im.png'
10
+ image 'link_icons/pdf.png'
11
+ image 'link_icons/visited.png'
12
+ image 'link_icons/xls.png'
13
+
14
+ help %Q{
15
+ To install the link_icons plugin:
16
+ compass init --using blueprint/link_icons
17
+
18
+ The link_icons.sass file is just a recommendation to show you how to use the link mixins.
19
+ }
20
+
21
+ welcome_message %Q{
22
+ The link_icons.sass file is just a recommendation to show you how to use the link mixins.
23
+ }
@@ -0,0 +1,16 @@
1
+ @import blueprint
2
+
3
+ // To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
4
+ // @include blueprint-ie
5
+
6
+ //Recommended Blueprint configuration with scoping and semantic layout:
7
+ body.bp
8
+ +blueprint-ie(true)
9
+ // Note: Blueprint centers text to fix IE6 container centering.
10
+ // This means all your texts will be centered under all version of IE by default.
11
+ // If your container does not have the .container class, don't forget to restore
12
+ // the correct behavior to your main container (but not the body tag!)
13
+ // Example:
14
+ // .my-container
15
+ // text-align: left
16
+
@@ -0,0 +1,30 @@
1
+ description "The blueprint framework."
2
+
3
+ stylesheet 'screen.sass', :media => 'screen, projection'
4
+ stylesheet 'partials/_base.sass'
5
+ stylesheet 'print.sass', :media => 'print'
6
+ stylesheet 'ie.sass', :media => 'screen, projection', :condition => "lt IE 8"
7
+
8
+ image 'grid.png'
9
+
10
+ help %Q{
11
+ Please see the blueprint website for documentation on how blueprint works:
12
+
13
+ http://blueprintcss.org/
14
+
15
+ Docs on the compass port of blueprint can be found on the wiki:
16
+
17
+ http://wiki.github.com/chriseppstein/compass/blueprint-documentation
18
+ }
19
+
20
+ welcome_message %Q{
21
+ Please see the blueprint website for documentation on how blueprint works:
22
+
23
+ http://blueprintcss.org/
24
+
25
+ Docs on the compass port of blueprint can be found on the wiki:
26
+
27
+ http://wiki.github.com/chriseppstein/compass/blueprint-documentation
28
+
29
+ To get started, edit the screen.sass file and read the comments and code there.
30
+ }
@@ -0,0 +1,11 @@
1
+ // Here is where you can define your constants for your application and to configure the blueprint framework.
2
+ // Feel free to delete these if you want keep the defaults:
3
+
4
+ $blueprint-grid-columns : 24
5
+ $blueprint-container-size : 950px
6
+ $blueprint-grid-margin : 10px
7
+
8
+ // Use this to calculate the width based on the total width.
9
+ // Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
10
+ $blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin
11
+
@@ -0,0 +1,8 @@
1
+ @import blueprint
2
+
3
+ // To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
4
+ // @include blueprint-print
5
+
6
+ //Recommended Blueprint configuration with scoping and semantic layout:
7
+ body.bp
8
+ +blueprint-print(true)
@@ -0,0 +1,46 @@
1
+ // This import applies a global reset to any page that imports this stylesheet.
2
+ @import blueprint/reset
3
+ // To configure blueprint, edit the partials/base.sass file.
4
+ @import partials/base
5
+ // Import all the default blueprint modules so that we can access their mixins.
6
+ @import blueprint
7
+ // Import the non-default scaffolding module.
8
+ @import blueprint/scaffolding
9
+
10
+ // To generate css equivalent to the blueprint css but with your
11
+ // configuration applied, uncomment:
12
+ // @include blueprint
13
+
14
+ // If you are doing a lot of stylesheet concatenation, it is suggested
15
+ // that you scope your blueprint styles, so that you can better control
16
+ // what pages use blueprint when stylesheets are concatenated together.
17
+ body.bp
18
+ +blueprint-typography(true)
19
+ +blueprint-utilities
20
+ +blueprint-debug
21
+ +blueprint-interaction
22
+ // Remove the scaffolding when you're ready to start doing visual design.
23
+ // Or leave it in if you're happy with how blueprint looks out-of-the-box
24
+ form.bp
25
+ +blueprint-form
26
+ // You'll probably want to remove the scaffolding once you start styling your site.
27
+ +blueprint-scaffolding
28
+
29
+ // Page layout can be done using mixins applied to your semantic classes and IDs:
30
+ body.two-col
31
+ #container
32
+ +container
33
+ #header, #footer
34
+ +column($blueprint-grid-columns)
35
+ #sidebar
36
+ // One third of the grid columns, rounding down. With 24 cols, this is 8.
37
+ $sidebar-columns: floor($blueprint-grid-columns / 3)
38
+ +column($sidebar-columns)
39
+ #content
40
+ // Two thirds of the grid columns, rounding up.
41
+ // With 24 cols, this is 16.
42
+ $content-columns: ceil(2 * $blueprint-grid-columns / 3)
43
+ // true means it's the last column in the row
44
+ +column($content-columns, true)
45
+
46
+
@@ -0,0 +1,16 @@
1
+ @import blueprint
2
+
3
+ // To generate css equivalent to the blueprint css but with your configuration applied, uncomment:
4
+ // +blueprint-ie
5
+
6
+ //Recommended Blueprint configuration with scoping and semantic layout:
7
+ body.bp
8
+ +blueprint-ie(true)
9
+ // Note: Blueprint centers text to fix IE6 container centering.
10
+ // This means all your texts will be centered under all version of IE by default.
11
+ // If your container does not have the .container class, don't forget to restore
12
+ // the correct behavior to your main container (but not the body tag!)
13
+ // Example:
14
+ // .my-container
15
+ // text-align: left
16
+