toppings-susy 0.0.1 → 0.0.2
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.
- 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: ''
|