blob: fc0f614614fa5fc45d97288a88cd33f3e188bbe7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
// Grids
//
// Wyrm uses Bourbon's [Neat grid system](http://neat.bourbon.io) with `$border-box-sizing: true`. Please visit their site
// for full documenation. Wyrm's `+media()` breakpoint settings are set as follows in
// `wyrm_core/_grid_settings.sass`.
//
// * `+media($desktop-wide)` is 12 columns, min-width: 1400px wide.
// * `+media($desktop)` is 12 columns, min-width: 769px wide.
// * `+media($tablet)` is 8 columns, max-width: 768px.
// * `+media($mobile)` is 4 columns, max-width: 480px.
//
// Because Wyrm is used in a couple different Ember setups, we added the `+omega-type` mixin to `wyrm_core/neat_extra.sass`.
// It's essentially the same as Neat's `+omega` mixin, but uses nth-of-type to make play nice with Ember's love of adding
// additional DOM objects in between your constructed markup.
//
// Markup:
// <div class="grid-example">
// <p>+outer-container applied to this wrapping grid.</p>
// <aside>+span-columns(4)</aside>
// <section>+span-columns(8) +omega-type</section>
// </div>
//
// Styleguide 5.0
@import "neat-helpers"
$column: golden-ratio(1em, 3) !default
$gutter: golden-ratio(1em, 1) !default
$grid-columns: 12 !default
$max-width: 100% !default
$border-box-sizing: true !default
$default-feature: min-width
$default-layout-direction: LTR !default
$mobile: new-breakpoint(max-width 480px 4)
$tablet: new-breakpoint(max-width 768px 8)
$desktop: new-breakpoint(min-width 769px 12)
$desktop-wide: new-breakpoint(min-width 1200px 12)
$desktop-wider: new-breakpoint(min-width 1400px 12)
|
