simplest 0.1.0
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.
- data/lib/simplest.rb +2 -0
- data/stylesheets/_demo-fluid.sass +52 -0
- data/stylesheets/_demo.sass +73 -0
- data/stylesheets/_mixins.sass +19 -0
- data/stylesheets/_simplest.sass +144 -0
- data/stylesheets/style.sass +5 -0
- metadata +80 -0
data/lib/simplest.rb
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@charset 'utf-8'
|
|
2
|
+
@import demo
|
|
3
|
+
|
|
4
|
+
$simplest-grid-content : 940px
|
|
5
|
+
$simplest-gutter-width : 20px
|
|
6
|
+
$simplest-margin-width : 20px
|
|
7
|
+
$simplest-grid-columns : 12
|
|
8
|
+
$simplest-fluid-grid : true
|
|
9
|
+
|
|
10
|
+
.wrapper
|
|
11
|
+
+grid-wrapper
|
|
12
|
+
.content
|
|
13
|
+
+grid-content
|
|
14
|
+
.main
|
|
15
|
+
+row
|
|
16
|
+
ul
|
|
17
|
+
+row
|
|
18
|
+
&.two-col li
|
|
19
|
+
+col(6)
|
|
20
|
+
&.three-col li
|
|
21
|
+
+col(4)
|
|
22
|
+
&.four-col li
|
|
23
|
+
+col(3)
|
|
24
|
+
&.six-col li
|
|
25
|
+
+col(2)
|
|
26
|
+
section
|
|
27
|
+
+row
|
|
28
|
+
+col(8)
|
|
29
|
+
+first
|
|
30
|
+
article
|
|
31
|
+
+col(2, 4, parent(8))
|
|
32
|
+
+first
|
|
33
|
+
aside
|
|
34
|
+
+col(2, 4, parent(8))
|
|
35
|
+
+last
|
|
36
|
+
nav
|
|
37
|
+
+col(4)
|
|
38
|
+
+last
|
|
39
|
+
|
|
40
|
+
&.layout .content .grid-overlay
|
|
41
|
+
position: absolute
|
|
42
|
+
width: 100%
|
|
43
|
+
top: -50px
|
|
44
|
+
left: 0
|
|
45
|
+
ul
|
|
46
|
+
text-align: center
|
|
47
|
+
+row
|
|
48
|
+
li
|
|
49
|
+
+col(1)
|
|
50
|
+
height: 300px
|
|
51
|
+
color: #463F4C
|
|
52
|
+
background-color: rgba(255,255,255, .1)
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Vast+Shadow|IM+Fell+DW+Pica)
|
|
2
|
+
|
|
3
|
+
html
|
|
4
|
+
background-color: rgb(250,250,250)
|
|
5
|
+
margin: 0
|
|
6
|
+
padding: 0
|
|
7
|
+
|
|
8
|
+
body
|
|
9
|
+
margin: 30px
|
|
10
|
+
padding: 0
|
|
11
|
+
font: 20px/1.6em 'IM Fell DW Pica', serif, sans-serif
|
|
12
|
+
color: #463F4C
|
|
13
|
+
text-shadow: 0 1px 0 rgba(255,255,255, .5)
|
|
14
|
+
|
|
15
|
+
pre
|
|
16
|
+
border: 1px dashed rgb(200,200,200)
|
|
17
|
+
line-height: 1.4em
|
|
18
|
+
code
|
|
19
|
+
font-size: 15px
|
|
20
|
+
line-height: 1.4em
|
|
21
|
+
|
|
22
|
+
header
|
|
23
|
+
margin: 0 auto
|
|
24
|
+
max-width: 980px
|
|
25
|
+
h2, p
|
|
26
|
+
margin-left: 2.04081633%
|
|
27
|
+
margin-right: 2.04081633%
|
|
28
|
+
h1, h2
|
|
29
|
+
margin-bottom: .1em
|
|
30
|
+
h1
|
|
31
|
+
font-size: 2.4em
|
|
32
|
+
text-align: center
|
|
33
|
+
margin-bottom: 2.3em
|
|
34
|
+
h2
|
|
35
|
+
font-size: 1.4em
|
|
36
|
+
margin-top: 1em
|
|
37
|
+
|
|
38
|
+
p
|
|
39
|
+
margin: 0.5em 0 0 0
|
|
40
|
+
|
|
41
|
+
.wrapper
|
|
42
|
+
&.layout
|
|
43
|
+
text-align: center
|
|
44
|
+
line-height: 2em
|
|
45
|
+
background-color: #51788B
|
|
46
|
+
padding: 20px 0
|
|
47
|
+
//margin-top: 50px
|
|
48
|
+
color: #D3E7EF
|
|
49
|
+
.content
|
|
50
|
+
i, b, li
|
|
51
|
+
display: block
|
|
52
|
+
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2)
|
|
53
|
+
font-weight: normal
|
|
54
|
+
font-style: normal
|
|
55
|
+
line-height: 2em
|
|
56
|
+
i, li
|
|
57
|
+
line-height: 1.4em
|
|
58
|
+
padding-bottom: .6em
|
|
59
|
+
color: #3d6778
|
|
60
|
+
text-shadow: none
|
|
61
|
+
i
|
|
62
|
+
font-size: .8em
|
|
63
|
+
li b
|
|
64
|
+
color: #D3E7EF
|
|
65
|
+
|
|
66
|
+
.main
|
|
67
|
+
background-color: #ACD4E4
|
|
68
|
+
ul
|
|
69
|
+
margin-bottom: 2px
|
|
70
|
+
header, section, nav, li
|
|
71
|
+
background-color: #84B5CC
|
|
72
|
+
article, aside
|
|
73
|
+
background-color: #689fb5
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
=at-media($media)
|
|
2
|
+
@if $media == ipad-landscape
|
|
3
|
+
@media only screen and (min-width : 1024px) and (max-width: 1200px)
|
|
4
|
+
@content
|
|
5
|
+
@else if $media == ipad-portrait
|
|
6
|
+
@media only screen and (min-width : 768px) and (max-width : 1023px)
|
|
7
|
+
@content
|
|
8
|
+
@else if $media == iphone-landscape
|
|
9
|
+
@media only screen and (min-width : 480px) and (max-width: 767px)
|
|
10
|
+
@content
|
|
11
|
+
@else if $media == iphone-portrait
|
|
12
|
+
@media only screen and (max-width: 479px)
|
|
13
|
+
@content
|
|
14
|
+
@else if $media == less-than-ipad-landscape
|
|
15
|
+
@media only screen and (max-width : 1023px)
|
|
16
|
+
@content
|
|
17
|
+
@else if $media == less-than-ipad-portrait
|
|
18
|
+
@media only screen and (max-width: 767px)
|
|
19
|
+
@content
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
/* * * * * * * * SIMPLEST * * * * * * * *
|
|
2
|
+
*
|
|
3
|
+
* The Semantic gridsystem
|
|
4
|
+
* Responsive, fixed or fluid layout, nested columns
|
|
5
|
+
* -:-
|
|
6
|
+
* The best solution is the simplest solution
|
|
7
|
+
*
|
|
8
|
+
|
|
9
|
+
// Gridcontent width ( columns + gutter excluding margins )
|
|
10
|
+
$simplest-grid-content : 940px !default
|
|
11
|
+
|
|
12
|
+
// Gutter width between columns
|
|
13
|
+
$simplest-gutter-width : 20px !default
|
|
14
|
+
|
|
15
|
+
// Margin width on each side of grid-content
|
|
16
|
+
$simplest-margin-width : 20px !default
|
|
17
|
+
|
|
18
|
+
// Default number of columns
|
|
19
|
+
$simplest-grid-columns : 12 !default
|
|
20
|
+
|
|
21
|
+
// Force fluid grid
|
|
22
|
+
$simplest-fluid-grid : false !default
|
|
23
|
+
|
|
24
|
+
// Grid column
|
|
25
|
+
=col($v1:1, $v2:false, $v3:false)
|
|
26
|
+
$nr-of-columns : $v1
|
|
27
|
+
$context : $simplest-grid-content
|
|
28
|
+
$context-nr-of-columns : $simplest-grid-columns
|
|
29
|
+
|
|
30
|
+
@if (type-of($v2) == number)
|
|
31
|
+
$context-nr-of-columns: $v2
|
|
32
|
+
@if (type-of($v3) == number)
|
|
33
|
+
$context : $v3
|
|
34
|
+
|
|
35
|
+
$total-width : $context
|
|
36
|
+
|
|
37
|
+
@if $simplest-fluid-grid
|
|
38
|
+
$total-width : 100%
|
|
39
|
+
|
|
40
|
+
$target_nr_of_col : $nr-of-columns
|
|
41
|
+
$one-col-width : ($context / $context-nr-of-columns) - ((($simplest-gutter-width * $context-nr-of-columns) - $simplest-gutter-width) / $context-nr-of-columns)
|
|
42
|
+
$target : $one-col-width * $target_nr_of_col + (($simplest-gutter-width * $target_nr_of_col) - $simplest-gutter-width)
|
|
43
|
+
$col-width : $total-width * ( $target / $context )
|
|
44
|
+
$gutter-width : $total-width * (($simplest-gutter-width / 2) / $context)
|
|
45
|
+
|
|
46
|
+
/*
|
|
47
|
+
span : #{$target_nr_of_col} of #{$context-nr-of-columns} columns
|
|
48
|
+
context : #{$context}
|
|
49
|
+
col-target : #{$target}
|
|
50
|
+
col-width : #{$col-width}
|
|
51
|
+
margin-target : #{$simplest-gutter-width / 2}
|
|
52
|
+
margin-width : #{$gutter-width}
|
|
53
|
+
|
|
54
|
+
float: left
|
|
55
|
+
width: $col-width
|
|
56
|
+
margin-left: $gutter-width
|
|
57
|
+
margin-right: $gutter-width
|
|
58
|
+
//&:first-child,
|
|
59
|
+
&.first
|
|
60
|
+
margin-left: 0
|
|
61
|
+
//&:last-child,
|
|
62
|
+
&.last
|
|
63
|
+
margin-right: 0
|
|
64
|
+
|
|
65
|
+
// Grid row
|
|
66
|
+
=row
|
|
67
|
+
+clearfix
|
|
68
|
+
margin: 0
|
|
69
|
+
padding: 0
|
|
70
|
+
list-style: none
|
|
71
|
+
li
|
|
72
|
+
margin: 0
|
|
73
|
+
padding: 0
|
|
74
|
+
|
|
75
|
+
=colgroup
|
|
76
|
+
+row
|
|
77
|
+
|
|
78
|
+
//=push($offset:1)
|
|
79
|
+
margin-left:
|
|
80
|
+
|
|
81
|
+
//=pull($offset:1)
|
|
82
|
+
margin-right:
|
|
83
|
+
|
|
84
|
+
// @return $nr-of-columns total width including gutter
|
|
85
|
+
@function col-width($nr-of-columns,$columns,$context)
|
|
86
|
+
$tot-gutter : ($simplest-gutter-width * $columns) - $simplest-gutter-width
|
|
87
|
+
$one-col-width : (($context - $tot-gutter) / $columns)
|
|
88
|
+
@return (($one-col-width * $nr-of-columns) + ($simplest-gutter-width * $nr-of-columns))
|
|
89
|
+
|
|
90
|
+
// @return context width
|
|
91
|
+
@function parent($nr-of-columns,$top-level-colums:$simplest-grid-columns)
|
|
92
|
+
@return col-width($nr-of-columns,$top-level-colums,$simplest-grid-content) - $simplest-gutter-width
|
|
93
|
+
|
|
94
|
+
=grid-wrapper
|
|
95
|
+
margin: 0 auto
|
|
96
|
+
$width: $simplest-grid-content + ($simplest-margin-width * 2)
|
|
97
|
+
@if $simplest-fluid-grid
|
|
98
|
+
max-width: $width
|
|
99
|
+
@else
|
|
100
|
+
width: $width
|
|
101
|
+
|
|
102
|
+
=grid-content
|
|
103
|
+
+row
|
|
104
|
+
$margin: $simplest-margin-width
|
|
105
|
+
@if $simplest-fluid-grid
|
|
106
|
+
$margin: ( $simplest-margin-width / ($simplest-grid-content + ($simplest-margin-width * 2)) ) * 100%
|
|
107
|
+
padding-left: $margin
|
|
108
|
+
padding-right: $margin
|
|
109
|
+
|
|
110
|
+
=alpha
|
|
111
|
+
margin-left: 0
|
|
112
|
+
|
|
113
|
+
=first
|
|
114
|
+
+alpha
|
|
115
|
+
|
|
116
|
+
=omega
|
|
117
|
+
margin-right: 0
|
|
118
|
+
|
|
119
|
+
=last
|
|
120
|
+
+omega
|
|
121
|
+
|
|
122
|
+
=first-last
|
|
123
|
+
&.first
|
|
124
|
+
+first
|
|
125
|
+
&.last
|
|
126
|
+
+last
|
|
127
|
+
|
|
128
|
+
=clearfix
|
|
129
|
+
// http://nicolasgallagher.com/micro-clearfix-hack/
|
|
130
|
+
//For modern browsers
|
|
131
|
+
&:before, &:after
|
|
132
|
+
content: ""
|
|
133
|
+
display: table
|
|
134
|
+
&:after
|
|
135
|
+
clear: both
|
|
136
|
+
// For IE 6/7 (trigger hasLayout)
|
|
137
|
+
zoom: 1
|
|
138
|
+
|
|
139
|
+
// calc-percent(650px, 1000px)
|
|
140
|
+
@function calc-percent($target, $container)
|
|
141
|
+
@return ($target / $container) * 100%
|
|
142
|
+
|
|
143
|
+
@function strip-units($number)
|
|
144
|
+
@return $number / ($number * 0 + 1)
|
metadata
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: simplest
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
prerelease:
|
|
5
|
+
version: 0.1.0
|
|
6
|
+
platform: ruby
|
|
7
|
+
authors:
|
|
8
|
+
- Elner
|
|
9
|
+
autorequire:
|
|
10
|
+
bindir: bin
|
|
11
|
+
cert_chain: []
|
|
12
|
+
|
|
13
|
+
date: 2012-10-21 00:00:00 Z
|
|
14
|
+
dependencies:
|
|
15
|
+
- !ruby/object:Gem::Dependency
|
|
16
|
+
name: compass
|
|
17
|
+
prerelease: false
|
|
18
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
|
19
|
+
none: false
|
|
20
|
+
requirements:
|
|
21
|
+
- - ">="
|
|
22
|
+
- !ruby/object:Gem::Version
|
|
23
|
+
version: 0.10.0
|
|
24
|
+
type: :runtime
|
|
25
|
+
version_requirements: *id001
|
|
26
|
+
- !ruby/object:Gem::Dependency
|
|
27
|
+
name: sass
|
|
28
|
+
prerelease: false
|
|
29
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
|
30
|
+
none: false
|
|
31
|
+
requirements:
|
|
32
|
+
- - ">="
|
|
33
|
+
- !ruby/object:Gem::Version
|
|
34
|
+
version: 3.2.1
|
|
35
|
+
type: :runtime
|
|
36
|
+
version_requirements: *id002
|
|
37
|
+
description: The Semantic gridsystem
|
|
38
|
+
email: info@elnerstudio.com
|
|
39
|
+
executables: []
|
|
40
|
+
|
|
41
|
+
extensions: []
|
|
42
|
+
|
|
43
|
+
extra_rdoc_files: []
|
|
44
|
+
|
|
45
|
+
files:
|
|
46
|
+
- lib/simplest.rb
|
|
47
|
+
- stylesheets/_demo-fluid.sass
|
|
48
|
+
- stylesheets/_demo.sass
|
|
49
|
+
- stylesheets/_mixins.sass
|
|
50
|
+
- stylesheets/_simplest.sass
|
|
51
|
+
- stylesheets/style.sass
|
|
52
|
+
homepage: https://github.com/elner/simplest
|
|
53
|
+
licenses: []
|
|
54
|
+
|
|
55
|
+
post_install_message:
|
|
56
|
+
rdoc_options: []
|
|
57
|
+
|
|
58
|
+
require_paths:
|
|
59
|
+
- lib
|
|
60
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
61
|
+
none: false
|
|
62
|
+
requirements:
|
|
63
|
+
- - ">="
|
|
64
|
+
- !ruby/object:Gem::Version
|
|
65
|
+
version: "0"
|
|
66
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
67
|
+
none: false
|
|
68
|
+
requirements:
|
|
69
|
+
- - ">="
|
|
70
|
+
- !ruby/object:Gem::Version
|
|
71
|
+
version: "0"
|
|
72
|
+
requirements: []
|
|
73
|
+
|
|
74
|
+
rubyforge_project:
|
|
75
|
+
rubygems_version: 1.8.24
|
|
76
|
+
signing_key:
|
|
77
|
+
specification_version: 3
|
|
78
|
+
summary: Simplest gridsystem
|
|
79
|
+
test_files: []
|
|
80
|
+
|