prelude-framework 0.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. data/.gitignore +20 -0
  2. data/Gemfile +4 -0
  3. data/LICENCE +19 -0
  4. data/README.md +5 -0
  5. data/Rakefile +1 -0
  6. data/lib/prelude/version.rb +3 -0
  7. data/lib/prelude-framework.rb +8 -0
  8. data/prelude.gemspec +23 -0
  9. data/scss/prelude/_abstractions.scss +21 -0
  10. data/scss/prelude/_all.scss +6 -0
  11. data/scss/prelude/_base.scss +6 -0
  12. data/scss/prelude/_core.scss +13 -0
  13. data/scss/prelude/_debug-mode.scss +125 -0
  14. data/scss/prelude/_defaults.scss +159 -0
  15. data/scss/prelude/_functions.scss +8 -0
  16. data/scss/prelude/_images.scss +9 -0
  17. data/scss/prelude/_mixins.scss +9 -0
  18. data/scss/prelude/_modules.scss +7 -0
  19. data/scss/prelude/_typography.scss +15 -0
  20. data/scss/prelude/abstractions/_flag.scss +67 -0
  21. data/scss/prelude/abstractions/_flexbox.scss +29 -0
  22. data/scss/prelude/abstractions/_island.scss +53 -0
  23. data/scss/prelude/abstractions/_media.scss +61 -0
  24. data/scss/prelude/abstractions/_nav.scss +110 -0
  25. data/scss/prelude/abstractions/_split.scss +26 -0
  26. data/scss/prelude/base/_border-box.scss +7 -0
  27. data/scss/prelude/base/_helpers.scss +167 -0
  28. data/scss/prelude/functions/_contrasty.scss +24 -0
  29. data/scss/prelude/functions/_is-saturated.scss +14 -0
  30. data/scss/prelude/functions/_pixels-to-ems.scss +7 -0
  31. data/scss/prelude/images/_base.scss +36 -0
  32. data/scss/prelude/images/_cover-image.scss +16 -0
  33. data/scss/prelude/images/_thumbnails.scss +47 -0
  34. data/scss/prelude/mixins/_button-style.scss +40 -0
  35. data/scss/prelude/mixins/_each-grid-breakpoint.scss +21 -0
  36. data/scss/prelude/mixins/_gradients.scss +12 -0
  37. data/scss/prelude/mixins/_rem.scss +31 -0
  38. data/scss/prelude/mixins/_set-font-size.scss +26 -0
  39. data/scss/prelude/modules/_buttons.scss +126 -0
  40. data/scss/prelude/modules/_forms.scss +634 -0
  41. data/scss/prelude/modules/_tables.scss +160 -0
  42. data/scss/prelude/typography/_base.scss +16 -0
  43. data/scss/prelude/typography/_brand.scss +19 -0
  44. data/scss/prelude/typography/_links.scss +14 -0
  45. data/scss/prelude/typography/_paragraphs.scss +9 -0
  46. data/scss/prelude/typography/_quotes.scss +31 -0
  47. data/scss/prelude/typography/_sizes.scss +63 -0
  48. data/scss/prelude.scss +53 -0
  49. data/test/config.rb +9 -0
  50. data/test/index.html +381 -0
  51. data/test/scss/_prelude-settings.scss +159 -0
  52. data/test/scss/style.scss +55 -0
  53. metadata +164 -0
data/.gitignore ADDED
@@ -0,0 +1,20 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
18
+ .sass-cache/*
19
+ test/.sass-cache/*
20
+ test/css/*
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in prelude.gemspec
4
+ gemspec
data/LICENCE ADDED
@@ -0,0 +1,19 @@
1
+ Copyright (c) 2012 Daniel Guillan
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy
4
+ of this software and associated documentation files (the "Software"), to deal
5
+ in the Software without restriction, including without limitation the rights
6
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7
+ copies of the Software, and to permit persons to whom the Software is furnished
8
+ to do so, subject to the following conditions:
9
+
10
+ The above copyright notice and this permission notice shall be included in all
11
+ copies or substantial portions of the Software.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19
+ THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,5 @@
1
+ # Prelude
2
+
3
+ An Object-oriented Sass + Compass framework for fast, robust and extensible front-end development.
4
+
5
+ Prelude includes: abstracted objects and components, powerful and salt-grained typesetting, mixins, utilities and class helpers.
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,3 @@
1
+ module Prelude
2
+ VERSION = "0.7"
3
+ end
@@ -0,0 +1,8 @@
1
+ root = File.join(File.dirname(__FILE__), "..")
2
+
3
+ require "prelude/version"
4
+ require "compass"
5
+
6
+ Compass::Frameworks.register("prelude",
7
+ :stylesheets_directory => File.join(root,"scss")
8
+ )
data/prelude.gemspec ADDED
@@ -0,0 +1,23 @@
1
+ # -*- encoding: utf-8 -*-
2
+ lib = File.expand_path('../lib', __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require 'prelude/version'
5
+
6
+ Gem::Specification.new do |gem|
7
+ gem.name = "prelude-framework"
8
+ gem.version = Prelude::VERSION
9
+ gem.authors = ["Daniel Guillan"]
10
+ gem.email = ["hello@danielguillan.com"]
11
+ gem.description = %q{A robust, extensible and opinionated OOCSS front-end framework built with SASS and Compass framework}
12
+ gem.summary = %q{A robust, extensible and opinionated OOCSS front-end framework built with SASS and Compass framework}
13
+ gem.homepage = "https://github.com/danielguillan/prelude"
14
+
15
+ gem.files = `git ls-files`.split($\)
16
+ gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f)}
17
+ gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
18
+ gem.require_paths = ["lib"]
19
+
20
+ gem.add_dependency "sass", [">= 3.2.3"]
21
+ gem.add_dependency "compass", [">= 0.12.2"]
22
+ gem.add_dependency "rake"
23
+ end
@@ -0,0 +1,21 @@
1
+ // =============================================================================
2
+ // Abstractions
3
+ // This is a set of very basic/generic structures that can be extended and
4
+ // styled using aditional classes. These abstracted classes save lots of lines
5
+ // of code by providing common structure patterns with DRY code.
6
+ //
7
+ // Learn more about abstraction:
8
+ // http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
9
+ // http://csswizardry.com/2011/09/the-nav-abstraction/
10
+ //
11
+ // Learn more about class extensions:
12
+ // http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
13
+ //
14
+ // =============================================================================
15
+
16
+ @import "abstractions/media",
17
+ "abstractions/flag",
18
+ "abstractions/nav",
19
+ "abstractions/island",
20
+ "abstractions/split",
21
+ "abstractions/flexbox";
@@ -0,0 +1,6 @@
1
+ @import "prelude/base",
2
+ "prelude/mixins",
3
+ "prelude/abstractions",
4
+ "prelude/typography",
5
+ "prelude/images",
6
+ "prelude/modules";
@@ -0,0 +1,6 @@
1
+ // =============================================================================
2
+ // Base
3
+ // =============================================================================
4
+
5
+
6
+ @import "base/helpers";
@@ -0,0 +1,13 @@
1
+ // =============================================================================
2
+ // Prelude core
3
+ //
4
+ // =============================================================================
5
+
6
+ // Border box FTW!
7
+ // =============================================================================
8
+ * { @include box-sizing(border-box) }
9
+
10
+
11
+ // Clearfix placeholder
12
+ // =============================================================================
13
+ %prelude-clearfix { @include pie-clearfix; }
@@ -0,0 +1,125 @@
1
+ // =============================================================================
2
+ // Debug mode
3
+ //
4
+ // Borrowed, adapted and extended from inuit.css
5
+ // (https://github.com/csswizardry/inuit.css)
6
+ //
7
+ // Enable $debug-mode to visually detect any improperly nested or
8
+ // potentially invalid markup, or any potentially inaccessible code.
9
+ //
10
+ // Red == definite error
11
+ // Yellow == double-check
12
+ // None == should be fine
13
+ //
14
+ // Please note that this method of checking markup quality should not be relied
15
+ // upon entirely. Validate your markup!
16
+ //
17
+ // =============================================================================
18
+
19
+ @if $debug-mode == true {
20
+
21
+ %debug-error { outline: 5px solid red; }
22
+ %debug-info { outline: 5px solid yellow; }
23
+ %debug-ok { outline: none; }
24
+
25
+ // Are there any empty elements in your page?
26
+ // =============================================================================
27
+
28
+ :empty { @extend %debug-info; }
29
+
30
+ // Images require `alt` attributes, empty `alt`s are fine but should be
31
+ // double-checked, no `alt` is bad and is flagged red.
32
+ // =============================================================================
33
+
34
+ img { @extend %debug-error; }
35
+
36
+ img[alt=""] { @extend %debug-info; }
37
+
38
+ img[alt] { @extend %debug-ok; }
39
+
40
+ // Links sometimes, though not always, benefit from `title` attributes. Links
41
+ // without are never invalid but it’s a good idea to check.
42
+ // =============================================================================
43
+
44
+ a { @extend %debug-info; }
45
+
46
+ a[title] { @extend %debug-ok; }
47
+
48
+ // Double-check any links whose `href` is something questionable.
49
+ // =============================================================================
50
+
51
+ a[href="#"],
52
+ a[href*="javascript"] { @extend %debug-info; }
53
+
54
+ // The `target` attribute ain’t too nice...
55
+ // =============================================================================
56
+
57
+ a[target] { @extend %debug-info; }
58
+
59
+ // Ensure any lists only contain `li`s as children.
60
+ // =============================================================================
61
+
62
+ ul,
63
+ ol {
64
+ > *:not(li) { @extend %debug-error; }
65
+ }
66
+
67
+ // It’s always nice to give `th`s `scope` attributes.
68
+ // =============================================================================
69
+
70
+ th { @extend %debug-info; }
71
+
72
+ th[scope] { @extend %debug-ok; }
73
+
74
+ // `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
75
+ // =============================================================================
76
+
77
+ table > tr { @extend %debug-info; }
78
+
79
+ // `tfoot` needs to come *before* `tbody`.
80
+ // =============================================================================
81
+
82
+ tbody + tfoot { @extend %debug-info; }
83
+
84
+ // Forms require `action` attributes
85
+ // =============================================================================
86
+
87
+ form { @extend %debug-error; }
88
+
89
+ form[action] { @extend %debug-ok; }
90
+
91
+ // Various form-field types have required attributes. `input`s need `type`
92
+ // attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
93
+ // need a `value` attribute.
94
+ // =============================================================================
95
+
96
+ textarea,
97
+ input { @extend %debug-error; }
98
+
99
+ input[type] { @extend %debug-ok; }
100
+
101
+ textarea[rows][cols] { @extend %debug-ok; }
102
+
103
+ input[type=submit] { @extend %debug-error; }
104
+
105
+ input[type=submit][value] { @extend %debug-ok; }
106
+
107
+ // Avoid inline styles where possible.
108
+ // =============================================================================
109
+
110
+ [style] { @extend %debug-info; }
111
+
112
+ // You should avoid using IDs for CSS, is this doing any styling?
113
+ // =============================================================================
114
+
115
+ [id] { @extend %debug-info; }
116
+
117
+ // Are you using the grid system correctly?
118
+ // =============================================================================
119
+
120
+ .gw > :not(.g),
121
+ .grid-wrapper > :not(.grid),
122
+ .gw--rev > :not(.g),
123
+ .grid-wrapper--rev > :not(.grid) { @extend %debug-error; }
124
+
125
+ }
@@ -0,0 +1,159 @@
1
+ // =============================================================================
2
+ // Prelude settings
3
+ //
4
+ // Table of contents:
5
+ // 1. Base
6
+ // 2. Colors
7
+ // 3. Typography
8
+ // 4. Forms
9
+ // 5. Tables
10
+ // 6. Buttons
11
+ // 7. Debug mode
12
+ //
13
+ // =============================================================================
14
+
15
+ // =============================================================================
16
+ // 1. Base
17
+ // =============================================================================
18
+
19
+ //Border radius
20
+ $default-border-radius: 4px !default; // default: 4px
21
+
22
+ // =============================================================================
23
+ // 2. Colors
24
+ // =============================================================================
25
+
26
+ // Grays
27
+ $white: #fff !default; // default: #fff
28
+ $gray-lighter: #ccc !default; // default: #ccc
29
+ $gray-light: #999 !default; // default: #999
30
+ $gray: #777 !default; // default: #777
31
+ $gray-dark: #555 !default; // default: #555
32
+ $gray-darker: #333 !default; // default: #333
33
+ $black: #000 !default; // default: #000
34
+
35
+ // Accent Colors
36
+ $red: #9d261d !default; // default: #9d261d
37
+ $green: #349D76 !default; // default: #349D76
38
+ $blue: #36C !default; // default: #36C
39
+ $yellow: #fffbe4 !default; // default: #fffbe4
40
+ $orange: #f89406 !default; // default: #f89406
41
+ $pink: #fa5b7d !default; // default: #fa5b7d
42
+ $purple: #7a43b6 !default; // default: #7a43b6
43
+
44
+ // Link Colors
45
+ $link-color: $blue !default; // default: $blue
46
+ $link-hover-color: $pink !default; // default: $pink
47
+
48
+ // Text Colors
49
+ $base-text-color: $gray-darker !default; // default: $gray-darker
50
+ $strong-text-color: $black !default; // default: $black
51
+ $weak-text-color: $gray !default; // default: $gray
52
+ $header-color: $gray-lighter !default; // default: $gray-lighter
53
+ $blockquote-color: $gray-lighter !default; // default: $gray-lighter
54
+
55
+ // Line & Border colors
56
+ $line-color: #e6e6e6 !default; // default: #e6e6e6
57
+
58
+ // =============================================================================
59
+ // 3. Typography
60
+ // =============================================================================
61
+
62
+ // Vertical Rythm
63
+ $base-font-size: $base-font-size !default; // default: $base-font-size (from Compass)
64
+ $base-line-height: $base-line-height !default; // default: $base-line-height (From Compass)
65
+
66
+ $base-spacing-unit: $base-line-height !default; // default: $base-line-height
67
+ $half-spacing-unit: $base-spacing-unit / 2 !default; // default: $base-spacing-unit / 2
68
+ $quarter-spacing-unit: $half-spacing-unit / 2 !default; // default: $half-spacing-unit / 2
69
+
70
+ // Typographic scale
71
+ $giga: 117px !default; // default 117px
72
+ $mega: 90px !default; // default 90px
73
+ $kilo: 72px !default; // default 72px
74
+ $alpha: 60px !default; // default 60px
75
+ $beta: 48px !default; // default 48px
76
+ $gamma: 36px !default; // default 36px
77
+ $delta: 24px !default; // default 24px
78
+ $epsilon: 21px !default; // default 21px
79
+ $zeta: 18px !default; // default 18px
80
+ $milli: 16px !default; // default 16px
81
+ $micro: 14px !default; // default 14px
82
+ $nano: 11px !default; // default 11px
83
+
84
+ // Fonts
85
+ $base-font-family: "Helvetica Neue", Arial, sans-serif !default; // default: "Helvetica Neue", Arial, sans-serif
86
+ $alternate-font-family: Georgia, "Times New Roman", serif !default; // default: Georgia, "Times New Roman", serif
87
+ $headings-font-family: $base-font-family !default; // default: $base-font-family
88
+
89
+ // Brand
90
+ $brand-face: $base-font-family !default; // default: $base-font-family
91
+ $brand-color: $black !default; // default: $black
92
+
93
+ // Colors
94
+ $subheader-color: $gray-light !default; // default: $gray-light
95
+
96
+ // =============================================================================
97
+ // 4. Forms
98
+ // =============================================================================
99
+
100
+ $input-background: $white !default; // default: $white
101
+ $input-border: #ccc !default; // default: #ccc
102
+ $input-border-radius: 3px !default; // default: 3px
103
+ $input-disabled-background: $gray-lighter !default; // default: $gray-lighter
104
+ $form-actions-background: #f5f5f5 !default; // default: #f5f5f5
105
+
106
+ // Form states and alerts
107
+ // =============================================================================
108
+
109
+ $warning-text: #c09853 !default; // default: #c09853
110
+ $warning-background: #fcf8e3 !default; // default: #fcf8e3
111
+ $warning-border: darken(adjust-hue($warning-background, -10), 3%) !default; // default: darken(adjust-hue($warning-background, -10), 3%)
112
+
113
+ $error-text: #b94a48 !default; // default: #b94a48
114
+ $error-background: #f2dede !default; // default: #f2dede
115
+ $error-border: darken(adjust-hue($error-background, -10), 3%) !default; // default: darken(adjust-hue($error-background, -10), 3%)
116
+
117
+ $success-text: #468847 !default; // default: #468847
118
+ $success-background: #dff0d8 !default; // default: #dff0d8
119
+ $success-border: darken(adjust-hue($success-background, -10), 5%) !default; // default: darken(adjust-hue($success-background, -10), 5%)
120
+
121
+ $info-text: #3a87ad !default; // default: #3a87ad
122
+ $info-background: #d9edf7 !default; // default: #d9edf7
123
+ $info-border: darken(adjust-hue($info-background, -10), 7%) !default; // default: darken(adjust-hue($info-background, -10), 7%)
124
+
125
+ // =============================================================================
126
+ // 5. Tables
127
+ // =============================================================================
128
+
129
+ $table-background: transparent !default; // default: transparent
130
+ $table-background-stripe: #f1f1f1 !default; // default: #f1f1f1
131
+ $table-background-hover: #f1f1f1 !default; // default: #f1f1f1
132
+ $table-border: $line-color !default; // default: $line-color
133
+
134
+ // =============================================================================
135
+ // 6. Buttons
136
+ // =============================================================================
137
+
138
+ $btn-font-weight: normal !default; // default: normal
139
+ $btn-border-radius: none !default; // default: none
140
+ $btn-padding: .35em 1.5em !default; // default: .35em 1.5em
141
+
142
+ $btn-use-gradient: false !default; // default: false
143
+ $btn-use-shadow: false !default; // default: false
144
+
145
+ $create-btn-styles: true !default; // default: true
146
+
147
+ $btn-background: #f1f1f1 !default; // default: #f1f1f1
148
+ $btn-primary-background: $link-color !default; // default: $link-color
149
+ $btn-info-background: #5bc0de !default; // default: #5bc0de
150
+ $btn-success-background: lighten($green, 15%) !default; // default: lighten($green, 15%)
151
+ $btn-warning-background: lighten($orange, 15%) !default; // default: lighten($orange, 15%)
152
+ $btn-danger-background: #ee5f5b !default; // default: #ee5f5b
153
+ $btn-inverse-background: $gray !default; // default: $gray
154
+
155
+ // =============================================================================
156
+ // 7. Debug mode
157
+ // =============================================================================
158
+
159
+ $debug-mode: false !default; // default: false
@@ -0,0 +1,8 @@
1
+ // =============================================================================
2
+ // Functions
3
+ // A collection of functions
4
+ // =============================================================================
5
+
6
+ @import "functions/pixels-to-ems",
7
+ "functions/contrasty",
8
+ "functions/is-saturated";
@@ -0,0 +1,9 @@
1
+ // =============================================================================
2
+ // Images
3
+ // A collection of image mixins and classes
4
+ //
5
+ // =============================================================================
6
+
7
+ @import "images/base",
8
+ "images/cover-image",
9
+ "images/thumbnails";
@@ -0,0 +1,9 @@
1
+ // =============================================================================
2
+ // Mixins
3
+ // A collection of mixins
4
+ // =============================================================================
5
+
6
+ @import "mixins/gradients",
7
+ "mixins/rem",
8
+ "mixins/set-font-size",
9
+ "mixins/button-style";
@@ -0,0 +1,7 @@
1
+ // =============================================================================
2
+ // Modules
3
+ // =============================================================================
4
+
5
+ @import "modules/forms",
6
+ "modules/tables",
7
+ "modules/buttons";
@@ -0,0 +1,15 @@
1
+ // =============================================================================
2
+ // Typography
3
+ //
4
+ // Basic typography styles.
5
+ // Core sizes and typefaces are configurable via the variables in the settings
6
+ // partial
7
+ //
8
+ // =============================================================================
9
+
10
+ @import "typography/base",
11
+ "typography/sizes",
12
+ "typography/paragraphs",
13
+ "typography/quotes",
14
+ "typography/links",
15
+ "typography/brand";
@@ -0,0 +1,67 @@
1
+ // =============================================================================
2
+ // Flag Object
3
+ //
4
+ // The flag object shares a lot of common traits with the media object.
5
+ // It's able to vertically align the image and text to the tops, middles or
6
+ // bottoms of each other.
7
+ //
8
+ // Learn more:
9
+ // http://csswizardry.com/2013/05/the-flag-object/
10
+ //
11
+ // @usage:
12
+ // <div class="flag">
13
+ // <div class="flag__image">
14
+ // <img src="placehold.it/45" alt="image">
15
+ // </div>
16
+ // <div class="flag__body">
17
+ // Descriptive content to the right
18
+ // </div>
19
+ // </div>
20
+ //
21
+ // =============================================================================
22
+
23
+ .flag{
24
+ display: table;
25
+ width: 100%;
26
+ }
27
+
28
+ .flag__image,
29
+ .flag__body {
30
+ display: table-cell;
31
+ vertical-align: middle;
32
+
33
+ .flag--top & {
34
+ vertical-align: top;
35
+ }
36
+
37
+ .flag--bottom & {
38
+ vertical-align: bottom;
39
+ }
40
+ }
41
+
42
+ .flag__image {
43
+ padding-right: $base-spacing-unit;
44
+
45
+ > img {
46
+ display: block;
47
+ max-width: none; // fix for fluid images
48
+ }
49
+
50
+ .flag--rev & {
51
+ padding-right: 0;
52
+ padding-left: $base-spacing-unit;
53
+ }
54
+ }
55
+
56
+ .flag__body {
57
+ width: 100%;
58
+
59
+ & + .flag__body {
60
+ padding-left: $base-spacing-unit;
61
+
62
+ .flag--rev & {
63
+ padding-left: 0;
64
+ padding-right: $base-spacing-unit;
65
+ }
66
+ }
67
+ }
@@ -0,0 +1,29 @@
1
+ // =============================================================================
2
+ // Flexbox
3
+ //
4
+ // @usage:
5
+ // <div class="flexbox">
6
+ // <div class="flexbox__item">I'm kinda</div>
7
+ // <div class="flexbox__item">flexboxy</div>
8
+ // </div>
9
+ //
10
+ // =============================================================================
11
+
12
+ .flexbox {
13
+ display: table;
14
+ width: 100%;
15
+ }
16
+
17
+
18
+ // Nasty hack to circumvent Modernizr conflicts.
19
+ // =============================================================================
20
+
21
+ html.flexbox {
22
+ display: block;
23
+ width: auto;
24
+ }
25
+
26
+ .flexbox__item {
27
+ display: table-cell;
28
+ vertical-align: middle;
29
+ }
@@ -0,0 +1,53 @@
1
+ // =============================================================================
2
+ // Island Object
3
+ //
4
+ // A simple object used to boxoff content, leaving it closed on all sides.
5
+ //
6
+ // Learn more:
7
+ // http://csswizardry.com/2011/10/the-island-object
8
+ //
9
+ // @usage:
10
+ // <div class="island">
11
+ // I am boxed off
12
+ // </div>
13
+ //
14
+ // =============================================================================
15
+
16
+ .island,
17
+ .islet,
18
+ .nauru {
19
+ @extend %prelude-clearfix;
20
+ display:block;
21
+ }
22
+
23
+ .island { padding: $base-spacing-unit; }
24
+
25
+ // Remove margin bottom on the last island
26
+ .island > :last-child,
27
+ .islet > :last-child,
28
+ .nauru > :last-child { margin-bottom: 0; }
29
+
30
+ // A smaller island
31
+ .islet { padding: $half-spacing-unit; }
32
+
33
+ // A tiny island
34
+ .nauru { padding: $quarter-spacing-unit; }
35
+
36
+ // Pull items full width of .island, .islet or .nauru parents.
37
+ // =============================================================================
38
+
39
+ .full-bleed {
40
+
41
+ margin-right: -($base-spacing-unit);
42
+ margin-left: -($base-spacing-unit);
43
+
44
+ .islet & {
45
+ margin-right: -($half-spacing-unit);
46
+ margin-left: -($half-spacing-unit);
47
+ }
48
+
49
+ .nauru & {
50
+ margin-right:-($quarter-spacing-unit);
51
+ margin-left: -($quarter-spacing-unit);
52
+ }
53
+ }