prelude-framework 0.7
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +20 -0
- data/Gemfile +4 -0
- data/LICENCE +19 -0
- data/README.md +5 -0
- data/Rakefile +1 -0
- data/lib/prelude/version.rb +3 -0
- data/lib/prelude-framework.rb +8 -0
- data/prelude.gemspec +23 -0
- data/scss/prelude/_abstractions.scss +21 -0
- data/scss/prelude/_all.scss +6 -0
- data/scss/prelude/_base.scss +6 -0
- data/scss/prelude/_core.scss +13 -0
- data/scss/prelude/_debug-mode.scss +125 -0
- data/scss/prelude/_defaults.scss +159 -0
- data/scss/prelude/_functions.scss +8 -0
- data/scss/prelude/_images.scss +9 -0
- data/scss/prelude/_mixins.scss +9 -0
- data/scss/prelude/_modules.scss +7 -0
- data/scss/prelude/_typography.scss +15 -0
- data/scss/prelude/abstractions/_flag.scss +67 -0
- data/scss/prelude/abstractions/_flexbox.scss +29 -0
- data/scss/prelude/abstractions/_island.scss +53 -0
- data/scss/prelude/abstractions/_media.scss +61 -0
- data/scss/prelude/abstractions/_nav.scss +110 -0
- data/scss/prelude/abstractions/_split.scss +26 -0
- data/scss/prelude/base/_border-box.scss +7 -0
- data/scss/prelude/base/_helpers.scss +167 -0
- data/scss/prelude/functions/_contrasty.scss +24 -0
- data/scss/prelude/functions/_is-saturated.scss +14 -0
- data/scss/prelude/functions/_pixels-to-ems.scss +7 -0
- data/scss/prelude/images/_base.scss +36 -0
- data/scss/prelude/images/_cover-image.scss +16 -0
- data/scss/prelude/images/_thumbnails.scss +47 -0
- data/scss/prelude/mixins/_button-style.scss +40 -0
- data/scss/prelude/mixins/_each-grid-breakpoint.scss +21 -0
- data/scss/prelude/mixins/_gradients.scss +12 -0
- data/scss/prelude/mixins/_rem.scss +31 -0
- data/scss/prelude/mixins/_set-font-size.scss +26 -0
- data/scss/prelude/modules/_buttons.scss +126 -0
- data/scss/prelude/modules/_forms.scss +634 -0
- data/scss/prelude/modules/_tables.scss +160 -0
- data/scss/prelude/typography/_base.scss +16 -0
- data/scss/prelude/typography/_brand.scss +19 -0
- data/scss/prelude/typography/_links.scss +14 -0
- data/scss/prelude/typography/_paragraphs.scss +9 -0
- data/scss/prelude/typography/_quotes.scss +31 -0
- data/scss/prelude/typography/_sizes.scss +63 -0
- data/scss/prelude.scss +53 -0
- data/test/config.rb +9 -0
- data/test/index.html +381 -0
- data/test/scss/_prelude-settings.scss +159 -0
- data/test/scss/style.scss +55 -0
- 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
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
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
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,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,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
|
+
}
|