framous 0.0.2 → 0.1
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/CHANGELOG.mkdn +6 -0
- data/LICENSE.txt +25 -19
- data/README.md +15 -21
- data/lib/framous.rb +1 -8
- data/stylesheets/_framous-commons.scss +5 -0
- data/stylesheets/_framous-grid.scss +7 -0
- data/stylesheets/_framous.scss +6 -1
- data/stylesheets/framous/_functions.scss +39 -0
- data/stylesheets/framous/_grid.scss +201 -0
- data/stylesheets/framous/_settings.scss +42 -0
- data/templates/project/manifest.rb +15 -2
- data/templates/project/screen.scss +8 -2
- metadata +47 -17
- data/.gitignore +0 -17
- data/Gemfile +0 -4
- data/Rakefile +0 -1
- data/framous.gemspec +0 -19
- data/lib/framous/version.rb +0 -3
data/CHANGELOG.mkdn
ADDED
data/LICENSE.txt
CHANGED
@@ -1,22 +1,28 @@
|
|
1
|
-
Copyright (c) 2012 Alec Hance
|
1
|
+
Copyright (c) 2012, Alec Hance
|
2
|
+
All rights reserved.
|
2
3
|
|
3
|
-
|
4
|
+
Redistribution and use in source and binary forms, with or without
|
5
|
+
modification, are permitted provided that the following conditions are
|
6
|
+
met:
|
4
7
|
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
the
|
8
|
+
* Redistributions of source code must retain the above copyright
|
9
|
+
notice, this list of conditions and the following disclaimer.
|
10
|
+
* Redistributions in binary form must reproduce the above
|
11
|
+
copyright notice, this list of conditions and the following
|
12
|
+
disclaimer in the documentation and/or other materials provided
|
13
|
+
with the distribution.
|
14
|
+
* Neither the name of the author nor the names of other
|
15
|
+
contributors may be used to endorse or promote products derived
|
16
|
+
from this software without specific prior written permission.
|
12
17
|
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
OF
|
22
|
-
|
18
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
19
|
+
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
20
|
+
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
21
|
+
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
22
|
+
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
23
|
+
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
24
|
+
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
25
|
+
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
26
|
+
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
27
|
+
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
28
|
+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
data/README.md
CHANGED
@@ -1,29 +1,23 @@
|
|
1
|
-
|
1
|
+
framous
|
2
|
+
============
|
2
3
|
|
3
|
-
|
4
|
+
HTML5 and SCSS Starter Kit
|
4
5
|
|
5
|
-
|
6
|
+
Installation
|
7
|
+
============
|
6
8
|
|
7
|
-
|
9
|
+
From the command line:
|
8
10
|
|
9
|
-
gem
|
11
|
+
(sudo) gem install framous
|
10
12
|
|
11
|
-
|
13
|
+
Add to a project:
|
12
14
|
|
13
|
-
|
15
|
+
// rails: compass.config, other: config.rb
|
16
|
+
require 'framous'
|
14
17
|
|
15
|
-
|
18
|
+
// command line
|
19
|
+
compass install framous
|
20
|
+
|
21
|
+
Or create a new project:
|
16
22
|
|
17
|
-
|
18
|
-
|
19
|
-
## Usage
|
20
|
-
|
21
|
-
TODO: Write usage instructions here
|
22
|
-
|
23
|
-
## Contributing
|
24
|
-
|
25
|
-
1. Fork it
|
26
|
-
2. Create your feature branch (`git checkout -b my-new-feature`)
|
27
|
-
3. Commit your changes (`git commit -am 'Add some feature'`)
|
28
|
-
4. Push to the branch (`git push origin my-new-feature`)
|
29
|
-
5. Create new Pull Request
|
23
|
+
compass create <project_directory_name> -r framous --using framous
|
data/lib/framous.rb
CHANGED
@@ -1,10 +1,3 @@
|
|
1
|
-
require
|
2
|
-
|
3
|
-
require "compass"
|
4
|
-
|
1
|
+
require 'compass'
|
5
2
|
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
6
3
|
Compass::Frameworks.register('framous', :path => extension_path)
|
7
|
-
|
8
|
-
module Framous
|
9
|
-
# Your code goes here...
|
10
|
-
end
|
data/stylesheets/_framous.scss
CHANGED
@@ -0,0 +1,39 @@
|
|
1
|
+
//
|
2
|
+
// Functions & Mixins
|
3
|
+
//
|
4
|
+
|
5
|
+
//
|
6
|
+
// Flexible grid
|
7
|
+
//
|
8
|
+
|
9
|
+
@function flex-grid($columns, $container-columns: $fg-max-columns) {
|
10
|
+
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
|
11
|
+
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
12
|
+
@return percentage($width / $container-width);
|
13
|
+
}
|
14
|
+
|
15
|
+
// Flexible gutter
|
16
|
+
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
|
17
|
+
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
18
|
+
@return percentage($gutter / $container-width);
|
19
|
+
}
|
20
|
+
|
21
|
+
//
|
22
|
+
// Container Span
|
23
|
+
//
|
24
|
+
|
25
|
+
@function container-span($span: $span) {
|
26
|
+
@if length($span) == 3 {
|
27
|
+
$container-columns: nth($span, 3);
|
28
|
+
@return $container-columns;
|
29
|
+
}
|
30
|
+
|
31
|
+
@else if length($span) == 2 {
|
32
|
+
$container-columns: nth($span, 2);
|
33
|
+
@return $container-columns;
|
34
|
+
}
|
35
|
+
|
36
|
+
@else {
|
37
|
+
@return $grid-columns;
|
38
|
+
}
|
39
|
+
}
|
@@ -0,0 +1,201 @@
|
|
1
|
+
//
|
2
|
+
// Grid.scss
|
3
|
+
// The default grid uses 12 columns.
|
4
|
+
// A setting that can be easily overridden in /base/settings.scss
|
5
|
+
//
|
6
|
+
|
7
|
+
//
|
8
|
+
// Imports
|
9
|
+
//
|
10
|
+
|
11
|
+
@import "compass/css3/box-sizing";
|
12
|
+
|
13
|
+
// $border-box-sizing: true !default;
|
14
|
+
// Makes all elements have a border-box layout
|
15
|
+
|
16
|
+
@if $border-box-sizing == true {
|
17
|
+
* {
|
18
|
+
@include box-sizing(border-box);
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
$fg-column: $column;
|
23
|
+
$fg-gutter: $gutter;
|
24
|
+
$fg-max-columns: $grid-columns;
|
25
|
+
$fg-max-width: $max-width;
|
26
|
+
$parent-columns: $grid-columns !default;
|
27
|
+
|
28
|
+
// outer wrapper center container
|
29
|
+
@mixin outer-container() {
|
30
|
+
@include clearfix;
|
31
|
+
max-width: $fg-max-width;
|
32
|
+
text-align: left;
|
33
|
+
margin: {
|
34
|
+
left: auto;
|
35
|
+
right: auto;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
// Grid span columns
|
40
|
+
// Use the span-columns mixin to specify the number of columns an element:
|
41
|
+
// @include span-columns($span: $columns of $container-columns, $display: block)
|
42
|
+
// eg. Element that spans across 6 columns (out of the default 12)
|
43
|
+
// div.element { @include span-columns(6 of 8); }
|
44
|
+
@mixin span-columns($span: $columns of $container-columns, $display: block) {
|
45
|
+
|
46
|
+
$columns: nth($span, 1);
|
47
|
+
$container-columns: container-span($span);
|
48
|
+
|
49
|
+
@if $container-columns != $grid-columns {
|
50
|
+
$parent-columns: $container-columns;
|
51
|
+
}
|
52
|
+
|
53
|
+
@if $display == table {
|
54
|
+
display: table-cell;
|
55
|
+
padding-right: flex-gutter($container-columns);
|
56
|
+
width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
|
57
|
+
|
58
|
+
&:last-child {
|
59
|
+
padding-right: 0;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
@else if $display == inline-block {
|
64
|
+
@include inline-block;
|
65
|
+
margin-right: flex-gutter($container-columns);
|
66
|
+
width: flex-grid($columns, $container-columns);
|
67
|
+
|
68
|
+
&:last-child {
|
69
|
+
margin-right: 0;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
@else {
|
74
|
+
display: block;
|
75
|
+
float: left;
|
76
|
+
margin-right: flex-gutter($container-columns);
|
77
|
+
width: flex-grid($columns, $container-columns);
|
78
|
+
|
79
|
+
&:last-child {
|
80
|
+
margin-right: 0;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
}
|
84
|
+
|
85
|
+
// Clearfix / row container
|
86
|
+
// In order to clear floated or table-cell columns:
|
87
|
+
@mixin row($display: block) {
|
88
|
+
@include clearfix;
|
89
|
+
@if $display == table {
|
90
|
+
display: table;
|
91
|
+
}
|
92
|
+
|
93
|
+
@else {
|
94
|
+
display: block;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
// Shift
|
99
|
+
// To move an element to the left or right by a number of columns:
|
100
|
+
@mixin shift($n-columns: 1) {
|
101
|
+
margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
|
102
|
+
}
|
103
|
+
|
104
|
+
// Pad
|
105
|
+
// To add padding around the entire column use pad().
|
106
|
+
// By default it adds the same value as the grid's gutter.
|
107
|
+
@mixin pad($padding: flex-gutter()) {
|
108
|
+
padding: $padding;
|
109
|
+
}
|
110
|
+
|
111
|
+
// Remove element gutter
|
112
|
+
@mixin omega($display: block, $direction: right) {
|
113
|
+
@if $display == table {
|
114
|
+
padding-#{$direction}: 0;
|
115
|
+
}
|
116
|
+
|
117
|
+
@else {
|
118
|
+
margin-#{$direction}: 0;
|
119
|
+
}
|
120
|
+
}
|
121
|
+
|
122
|
+
// You can also use nth-omega to remove the gutter of a specific column or set of columns
|
123
|
+
@mixin nth-omega($nth, $display: block, $direction: right) {
|
124
|
+
@if $display == table {
|
125
|
+
&:nth-child(#{$nth}) {
|
126
|
+
padding-#{$direction}: 0;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
|
130
|
+
@else {
|
131
|
+
&:nth-child(#{$nth}) {
|
132
|
+
margin-#{$direction}: 0;
|
133
|
+
}
|
134
|
+
}
|
135
|
+
}
|
136
|
+
|
137
|
+
// Fill 100% of parent
|
138
|
+
// This makes sure that the child fills 100% of its parent
|
139
|
+
@mixin fill-parent() {
|
140
|
+
width: 100%;
|
141
|
+
|
142
|
+
@if $border-box-sizing == false {
|
143
|
+
@include box-sizing(border-box);
|
144
|
+
}
|
145
|
+
}
|
146
|
+
|
147
|
+
// Breakpoints
|
148
|
+
// The breakpoint() mixin allows you to use media-queries to modify both the grid and the layout.
|
149
|
+
// It takes two arguments:
|
150
|
+
@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
|
151
|
+
|
152
|
+
@if length($query) == 1 {
|
153
|
+
@media screen and ($default-feature: nth($query, 1)) {
|
154
|
+
$default-grid-columns: $grid-columns;
|
155
|
+
$grid-columns: $total-columns;
|
156
|
+
@content;
|
157
|
+
$grid-columns: $default-grid-columns;
|
158
|
+
}
|
159
|
+
}
|
160
|
+
|
161
|
+
@else if length($query) == 2 {
|
162
|
+
@media screen and (nth($query, 1): nth($query, 2)) {
|
163
|
+
$default-grid-columns: $grid-columns;
|
164
|
+
$grid-columns: $total-columns;
|
165
|
+
@content;
|
166
|
+
$grid-columns: $default-grid-columns;
|
167
|
+
}
|
168
|
+
}
|
169
|
+
|
170
|
+
@else if length($query) == 3 {
|
171
|
+
@media screen and (nth($query, 1): nth($query, 2)) {
|
172
|
+
$default-grid-columns: $grid-columns;
|
173
|
+
$grid-columns: nth($query, 3);
|
174
|
+
@content;
|
175
|
+
$grid-columns: $default-grid-columns;
|
176
|
+
}
|
177
|
+
}
|
178
|
+
|
179
|
+
@else if length($query) == 4 {
|
180
|
+
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
181
|
+
$default-grid-columns: $grid-columns;
|
182
|
+
$grid-columns: $total-columns;
|
183
|
+
@content;
|
184
|
+
$grid-columns: $default-grid-columns;
|
185
|
+
}
|
186
|
+
}
|
187
|
+
|
188
|
+
@else if length($query) == 5 {
|
189
|
+
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
190
|
+
$default-grid-columns: $grid-columns;
|
191
|
+
$grid-columns: nth($query, 5);
|
192
|
+
@content;
|
193
|
+
$grid-columns: $default-grid-columns;
|
194
|
+
}
|
195
|
+
}
|
196
|
+
|
197
|
+
@else {
|
198
|
+
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
|
199
|
+
}
|
200
|
+
}
|
201
|
+
|
@@ -0,0 +1,42 @@
|
|
1
|
+
//
|
2
|
+
// Settings.scss
|
3
|
+
//
|
4
|
+
|
5
|
+
//
|
6
|
+
// 1. Responsive Grid
|
7
|
+
//
|
8
|
+
|
9
|
+
// Column width
|
10
|
+
$column: 145px !default;
|
11
|
+
// Gutter between each two columns
|
12
|
+
$gutter: 9px !default;
|
13
|
+
// Total number of columns in the grid (Total Columns For Main Container)
|
14
|
+
$grid-columns: 12 !default;
|
15
|
+
// Max-width of the outer container
|
16
|
+
$max-width: 1024px !default;
|
17
|
+
// Makes all elements have a border-box layout
|
18
|
+
$border-box-sizing: true !default;
|
19
|
+
// Default @media feature for the breakpoint() mixin
|
20
|
+
$default-feature: min-width;
|
21
|
+
|
22
|
+
//
|
23
|
+
// 2. Responsive Breakpoints
|
24
|
+
// @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
|
25
|
+
//
|
26
|
+
|
27
|
+
// Smartphones (portrait and landscape)
|
28
|
+
$phone: min-device-width 320px max-device-width 479px;
|
29
|
+
// Smartphones (portrait)
|
30
|
+
$phone-portrait: max-width 319px;
|
31
|
+
// Smartphones (landscape)
|
32
|
+
$phone-landscape: min-width 320px max-width 479px;
|
33
|
+
// iPads (portrait and landscape)
|
34
|
+
$ipad: min-device-width 768px;
|
35
|
+
// iPads (portrait)
|
36
|
+
$ipad-portrait: min-device-width 768px max-device-width 1024px orientation portrait;
|
37
|
+
// iPads (landscape)
|
38
|
+
$ipad-landscape: min-device-width 768px max-device-width 1024px orientation landscape;
|
39
|
+
// Desktops and laptops
|
40
|
+
$desktop: min-width 1024px;
|
41
|
+
// iPhone 4
|
42
|
+
$retina: -webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5;
|
@@ -1,2 +1,15 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
stylesheet 'screen.scss', :media => 'screen, projection'
|
2
|
+
|
3
|
+
description "Framous: HTML5 and SCSS Starter Kit"
|
4
|
+
|
5
|
+
help %Q{
|
6
|
+
Please see Framous github for all documentation and tutorials:
|
7
|
+
|
8
|
+
http://github.com/alechance/framous
|
9
|
+
}
|
10
|
+
|
11
|
+
welcome_message %Q{
|
12
|
+
Please see Framous github for all documentation and tutorials:
|
13
|
+
|
14
|
+
http://github.com/alechance/framous
|
15
|
+
}
|
@@ -1,2 +1,8 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
//** Framous-Grid **//
|
2
|
+
|
3
|
+
// Import ------------------------------------------------------------------
|
4
|
+
|
5
|
+
@import "framous-grid";
|
6
|
+
|
7
|
+
// For future include framous-commons
|
8
|
+
// @import "framous-commons"
|
metadata
CHANGED
@@ -1,26 +1,55 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: framous
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 9
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
|
-
-
|
9
|
-
|
10
|
-
version: 0.0.2
|
8
|
+
- 1
|
9
|
+
version: "0.1"
|
11
10
|
platform: ruby
|
12
11
|
authors:
|
13
12
|
- Alec Hance
|
13
|
+
- Khalid Yagoubi
|
14
14
|
autorequire:
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
17
|
|
18
|
-
date: 2012-11-
|
19
|
-
dependencies:
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
18
|
+
date: 2012-11-15 00:00:00 Z
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
name: compass
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
none: false
|
25
|
+
requirements:
|
26
|
+
- - ">="
|
27
|
+
- !ruby/object:Gem::Version
|
28
|
+
hash: 29
|
29
|
+
segments:
|
30
|
+
- 0
|
31
|
+
- 11
|
32
|
+
version: "0.11"
|
33
|
+
type: :runtime
|
34
|
+
version_requirements: *id001
|
35
|
+
- !ruby/object:Gem::Dependency
|
36
|
+
name: sass
|
37
|
+
prerelease: false
|
38
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
39
|
+
none: false
|
40
|
+
requirements:
|
41
|
+
- - ">="
|
42
|
+
- !ruby/object:Gem::Version
|
43
|
+
hash: 15
|
44
|
+
segments:
|
45
|
+
- 3
|
46
|
+
- 2
|
47
|
+
- 0
|
48
|
+
version: 3.2.0
|
49
|
+
type: :runtime
|
50
|
+
version_requirements: *id002
|
51
|
+
description: HTML5 and SCSS StarterKit
|
52
|
+
email: hello@alechance.com
|
24
53
|
executables: []
|
25
54
|
|
26
55
|
extensions: []
|
@@ -28,18 +57,19 @@ extensions: []
|
|
28
57
|
extra_rdoc_files: []
|
29
58
|
|
30
59
|
files:
|
31
|
-
- .
|
32
|
-
- Gemfile
|
60
|
+
- CHANGELOG.mkdn
|
33
61
|
- LICENSE.txt
|
34
62
|
- README.md
|
35
|
-
- Rakefile
|
36
|
-
- framous.gemspec
|
37
63
|
- lib/framous.rb
|
38
|
-
-
|
64
|
+
- stylesheets/_framous-commons.scss
|
65
|
+
- stylesheets/_framous-grid.scss
|
39
66
|
- stylesheets/_framous.scss
|
67
|
+
- stylesheets/framous/_functions.scss
|
68
|
+
- stylesheets/framous/_grid.scss
|
69
|
+
- stylesheets/framous/_settings.scss
|
40
70
|
- templates/project/manifest.rb
|
41
71
|
- templates/project/screen.scss
|
42
|
-
homepage:
|
72
|
+
homepage: http://github.com/alechance/framous
|
43
73
|
licenses: []
|
44
74
|
|
45
75
|
post_install_message:
|
@@ -71,6 +101,6 @@ rubyforge_project:
|
|
71
101
|
rubygems_version: 1.8.24
|
72
102
|
signing_key:
|
73
103
|
specification_version: 3
|
74
|
-
summary:
|
104
|
+
summary: HTML5 and SCSS StarterKit
|
75
105
|
test_files: []
|
76
106
|
|
data/.gitignore
DELETED
data/Gemfile
DELETED
data/Rakefile
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
require "bundler/gem_tasks"
|
data/framous.gemspec
DELETED
@@ -1,19 +0,0 @@
|
|
1
|
-
# -*- encoding: utf-8 -*-
|
2
|
-
lib = File.expand_path('../lib', __FILE__)
|
3
|
-
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
-
require 'framous/version'
|
5
|
-
|
6
|
-
Gem::Specification.new do |gem|
|
7
|
-
gem.name = "framous"
|
8
|
-
gem.version = Framous::VERSION
|
9
|
-
gem.authors = ["Alec Hance"]
|
10
|
-
gem.email = ["hello@alechance.com"]
|
11
|
-
gem.description = %q{A fluid grid framework written with SCSS & Compass Style}
|
12
|
-
gem.summary = %q{A fluid grid framework written with SCSS & Compass Style}
|
13
|
-
gem.homepage = ""
|
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
|
-
end
|
data/lib/framous/version.rb
DELETED