toppings-susy 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/toppings/susy/templates/_susy.responsive_grid.sass +74 -0
- data/lib/toppings/susy/version.rb +1 -1
- data/toppings-susy.gemspec +4 -4
- metadata +2 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 82c6361772f07515fe4e9ad051cb9269cd4bc555
|
4
|
+
data.tar.gz: 752f82909bb884127b25361e2bc6c09372ddbccd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f9321ceb5bd3b82b422525cf3c98fc4620f30f4baae27ec4cdebf7f07b1ba66d2b3b8502c398883dbea93202a18c9827da90bd7f372078d9559d8fc4ab5980f0
|
7
|
+
data.tar.gz: a48d63f4bb417f7a47095ed74b5eb163902232aab41c06457d6460d72d890de490d76776576bd557adf5ce3fe284c5d3b064c412d35ece48a8f2f7230bbda730
|
@@ -0,0 +1,74 @@
|
|
1
|
+
/* We live in a strong opinion that you should use a semantic layout
|
2
|
+
* grid framework for your layout base. Beside other frameworks out there
|
3
|
+
* the susy grid framework (http://susy.oddbird.net) seems to do the job
|
4
|
+
* as we expect it.
|
5
|
+
*
|
6
|
+
* We provide a minimal setup here which keeps a mobile first responsiveness
|
7
|
+
* in mind (http://www.abookapart.com/products/mobile-first).
|
8
|
+
*
|
9
|
+
* This configuration setup is taken directly from susys magic grid demo,
|
10
|
+
* which provides a nice dive-in into responsive designs.
|
11
|
+
*
|
12
|
+
* http://susy.oddbird.net/demos/magic
|
13
|
+
*/
|
14
|
+
|
15
|
+
@import 'susy'
|
16
|
+
|
17
|
+
// for magic grids the combination of columns, column width and gutter width
|
18
|
+
// determines the max container width here.
|
19
|
+
// number of columns available for content
|
20
|
+
$total-columns: 7
|
21
|
+
|
22
|
+
// each column is 4em wide
|
23
|
+
$column-width: 4em
|
24
|
+
|
25
|
+
// 1em gutters between columns
|
26
|
+
$gutter-width: 1em
|
27
|
+
|
28
|
+
// grid-padding equal to gutters
|
29
|
+
$grid-padding: $gutter-width
|
30
|
+
|
31
|
+
// break-point specifies the screen size we want to apply different styles
|
32
|
+
$break-point: 12
|
33
|
+
|
34
|
+
// break-point-em is the result of our break point combined with the
|
35
|
+
// other configurations
|
36
|
+
$break-point-em: $break-point * ($column-width + $gutter-width) - $gutter-width
|
37
|
+
|
38
|
+
// the mobile view layout comes in handy if we want to apply styles especially
|
39
|
+
// for our mobile view, which we don't want to reset in other layouts.
|
40
|
+
// Please be aware, that this should be used wisely and rarely, because
|
41
|
+
// this styles will also not be available in case a browser does not support
|
42
|
+
// media queries.
|
43
|
+
$mobile-layout: 0em $total-columns $break-point-em
|
44
|
+
|
45
|
+
// providing a better named short cut to the break-point
|
46
|
+
$screen-layout: $break-point
|
47
|
+
|
48
|
+
// as from here you just have to define your content container elements.
|
49
|
+
// Lets assume as in the magic grid example, we have a full-width header and
|
50
|
+
// footer and a responsive content container with class (obviously :)) "l-content"
|
51
|
+
//
|
52
|
+
//.l-content
|
53
|
+
// +container($total-columns, $break-point)
|
54
|
+
// We will provide a few examples in the following about how to get started to use
|
55
|
+
// the grid we have set up here, but please feel encouraged to take a closer look
|
56
|
+
// into the susy framework documentation, to get a better feeling for susy.
|
57
|
+
// After we have enabled the grid setup we are able to adjust our components
|
58
|
+
// easily to fit into our content columns.
|
59
|
+
//
|
60
|
+
// .robot-picture
|
61
|
+
// +span-columns(3, 7)
|
62
|
+
//
|
63
|
+
// .figcaptions
|
64
|
+
// +span-columns(4 omega, 7)
|
65
|
+
// Specialties can be applied to components by bringing in the
|
66
|
+
// at-breakpoint mixin, which provides an appropriate media-query for
|
67
|
+
// the changes.
|
68
|
+
//
|
69
|
+
// +at-breakpoint($large-screen-layout)
|
70
|
+
// .robot-picture
|
71
|
+
// +span-columns(4, 12)
|
72
|
+
//
|
73
|
+
// .figcaptions
|
74
|
+
// +span-columns(8 omega, 12)
|
data/toppings-susy.gemspec
CHANGED
@@ -14,10 +14,10 @@ Gem::Specification.new do |spec|
|
|
14
14
|
spec.license = "MIT"
|
15
15
|
|
16
16
|
spec.files = %w(LICENSE.txt README.md toppings-susy.gemspec)
|
17
|
-
spec.files += Dir.glob("
|
18
|
-
|
19
|
-
spec.executables =
|
20
|
-
spec.test_files =
|
17
|
+
spec.files += Dir.glob("lib/**/*")
|
18
|
+
|
19
|
+
spec.executables = []
|
20
|
+
spec.test_files = []
|
21
21
|
spec.require_paths = ["lib"]
|
22
22
|
|
23
23
|
spec.add_development_dependency "bundler", "~> 1.3"
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: toppings-susy
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Falk Hoppe
|
@@ -76,6 +76,7 @@ files:
|
|
76
76
|
- LICENSE.txt
|
77
77
|
- README.md
|
78
78
|
- toppings-susy.gemspec
|
79
|
+
- lib/toppings/susy/templates/_susy.responsive_grid.sass
|
79
80
|
- lib/toppings/susy/version.rb
|
80
81
|
- lib/toppings/susy.rb
|
81
82
|
homepage: ''
|