framous 0.2.5 → 0.3
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 +4 -0
- data/README.md +2 -21
- data/lib/framous.rb +0 -1
- data/templates/project/_settings.scss +92 -0
- data/templates/project/index.html +18 -18
- data/templates/project/manifest.rb +7 -9
- data/templates/project/screen.scss +3 -63
- metadata +20 -41
- data/stylesheets/_framous.scss +0 -13
- data/stylesheets/framous/base/_forms.scss +0 -128
- data/stylesheets/framous/base/_framous-base.scss +0 -11
- data/stylesheets/framous/base/_icons.scss +0 -27
- data/stylesheets/framous/base/_modular-scale.scss +0 -220
- data/stylesheets/framous/base/_settings.scss +0 -70
- data/stylesheets/framous/base/_table.scss +0 -120
- data/stylesheets/framous/base/_tables.scss +0 -120
- data/stylesheets/framous/base/_typography.scss +0 -213
- data/stylesheets/framous/grid/_framous-grid.scss +0 -9
- data/stylesheets/framous/grid/_functions.scss +0 -39
- data/stylesheets/framous/grid/_grid.scss +0 -201
- data/stylesheets/framous/grid/_settings.scss +0 -42
- data/stylesheets/framous/mixins/_framous-mixins.scss +0 -9
- data/stylesheets/framous/mixins/_hidpi-media-query.scss +0 -22
- data/stylesheets/framous/mixins/_image-rendering.scss +0 -17
- data/stylesheets/framous/mixins/_linear-gradient.scss +0 -47
- data/stylesheets/framous/mixins/_position.scss +0 -46
- data/templates/project/_base.scss +0 -83
- data/templates/project/_print.scss +0 -21
- data/templates/project/_reset.scss +0 -410
- data/templates/project/sample.html +0 -421
data/CHANGELOG.mkdn
CHANGED
data/README.md
CHANGED
@@ -1,23 +1,4 @@
|
|
1
1
|
framous
|
2
|
-
|
2
|
+
=======
|
3
3
|
|
4
|
-
|
5
|
-
|
6
|
-
Installation
|
7
|
-
============
|
8
|
-
|
9
|
-
From the command line:
|
10
|
-
|
11
|
-
(sudo) gem install framous
|
12
|
-
|
13
|
-
Add to a project:
|
14
|
-
|
15
|
-
// rails: compass.config, other: config.rb
|
16
|
-
require 'framous'
|
17
|
-
|
18
|
-
// command line
|
19
|
-
compass install framous
|
20
|
-
|
21
|
-
Or create a new project:
|
22
|
-
|
23
|
-
compass create <project_directory_name> -r framous --using framous
|
4
|
+
Framous is light & powerful front-end toolkit to prototype digital product.
|
data/lib/framous.rb
CHANGED
@@ -0,0 +1,92 @@
|
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Grid Settings
|
3
|
+
|
4
|
+
$grid-system-style: 'fluid';
|
5
|
+
$nb-columns: 12;
|
6
|
+
$column-width: 60px;
|
7
|
+
$gutter-width: 20px;
|
8
|
+
$max-width: 1200px;
|
9
|
+
|
10
|
+
$border-box-sizing: true;
|
11
|
+
|
12
|
+
// Breakpoints
|
13
|
+
|
14
|
+
$phone: 320px;
|
15
|
+
$phone-wide: 480px;
|
16
|
+
$tablet: 768px;
|
17
|
+
$large-screen: 980px;
|
18
|
+
|
19
|
+
// ---------------------------------------------------------------------------
|
20
|
+
// Colors Settings
|
21
|
+
|
22
|
+
// Branding Set
|
23
|
+
|
24
|
+
$blue-set: #465aff;
|
25
|
+
$blue-dark-set: #143255;
|
26
|
+
$blue-light-set: #afe1fa;
|
27
|
+
$yellow-set: #ffc814;
|
28
|
+
$yellow-light-set: #fff0c8;
|
29
|
+
$green-set: #78c700;
|
30
|
+
|
31
|
+
// Colors Set
|
32
|
+
|
33
|
+
$white-set: #fff;
|
34
|
+
$grey-set: #808080;
|
35
|
+
$black-set: #000;
|
36
|
+
|
37
|
+
$background-body-color: transparent;
|
38
|
+
$txt-color: $blue-dark-set;
|
39
|
+
$body-color: $blue-dark-set;
|
40
|
+
$highlight-color: $yellow-light-set;
|
41
|
+
|
42
|
+
$background-color: lighten($grey-set,45);
|
43
|
+
$border-color: lighten($grey-set,30);
|
44
|
+
|
45
|
+
$link-color: $blue-set;
|
46
|
+
$link-color-hover: $blue-dark-set;
|
47
|
+
|
48
|
+
// ---------------------------------------------------------------------------
|
49
|
+
// Type Settings
|
50
|
+
|
51
|
+
// Text Direction Settings
|
52
|
+
|
53
|
+
$text-direction: ltr;
|
54
|
+
$default-float: left;
|
55
|
+
$default-opposite: right;
|
56
|
+
|
57
|
+
@if $text-direction == ltr {
|
58
|
+
$default-float: left;
|
59
|
+
$default-opposite: right;
|
60
|
+
} @else {
|
61
|
+
$default-float: right;
|
62
|
+
$default-opposite: left;
|
63
|
+
}
|
64
|
+
|
65
|
+
// Font Settings
|
66
|
+
|
67
|
+
$adelle-sans: "adelle-sans", sans-serif;
|
68
|
+
|
69
|
+
$header-font-family: $adelle-sans;
|
70
|
+
$font-weight-bold: 700;
|
71
|
+
$header-font-color: $txt-color;
|
72
|
+
$body-font-family: $adelle-sans;
|
73
|
+
$font-weight-normal: 400;
|
74
|
+
$font-weight-light: 300;
|
75
|
+
$body-font-color: $body-color;
|
76
|
+
|
77
|
+
// Modular Scale Values
|
78
|
+
// http://typecast.com/blog/contrast-through-scale
|
79
|
+
|
80
|
+
$tera: 72px;
|
81
|
+
$giga: 60px;
|
82
|
+
$mega: 48px;
|
83
|
+
$h1: 36px; // h1
|
84
|
+
$h2: 24px; // h2
|
85
|
+
$h3: 21px; // h3
|
86
|
+
$h4: 18px; // h4
|
87
|
+
$h5: 16px; // h5
|
88
|
+
$p: 14px; // h6, p
|
89
|
+
|
90
|
+
// Vertical Rythm
|
91
|
+
$base-font-size: $p;
|
92
|
+
$base-line-height: 20px;
|
@@ -1,34 +1,34 @@
|
|
1
1
|
<!DOCTYPE html>
|
2
|
+
<!DOCTYPE html>
|
3
|
+
<html lang="en">
|
2
4
|
|
3
|
-
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
4
|
-
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
5
|
-
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
6
5
|
<head>
|
7
|
-
|
8
|
-
|
9
|
-
<!-- Set the viewport width to device width for mobile -->
|
10
|
-
<meta name="viewport" content="width=device-width" />
|
6
|
+
<meta charset="utf-8" />
|
11
7
|
|
12
|
-
|
8
|
+
<!-- Set the viewport width to device width for mobile -->
|
9
|
+
<meta name="viewport" content="width=device-width" />
|
13
10
|
|
14
|
-
|
15
|
-
<link rel="stylesheet" href="stylesheets/screen.css" media="all">
|
16
|
-
<!-- Font Stacks -->
|
11
|
+
<title>Document Title</title>
|
17
12
|
|
13
|
+
<!-- Included CSS Files -->
|
14
|
+
<link rel="stylesheet" href="stylesheets/screen.css" media="all">
|
18
15
|
</head>
|
16
|
+
|
19
17
|
<body>
|
20
18
|
|
21
|
-
<header role="banner">
|
19
|
+
<header role="banner">
|
20
|
+
|
21
|
+
</header><!-- /header -->
|
22
22
|
|
23
|
-
|
23
|
+
<div role="main">
|
24
24
|
|
25
|
-
|
25
|
+
</div><!-- /main -->
|
26
26
|
|
27
|
-
|
27
|
+
<footer role="contentinfo">
|
28
|
+
|
29
|
+
</footer><!-- /footer -->
|
28
30
|
|
29
|
-
|
30
|
-
|
31
|
-
</footer><!-- /footer -->
|
31
|
+
<!-- JS -->
|
32
32
|
|
33
33
|
</body>
|
34
34
|
</html>
|
@@ -1,21 +1,19 @@
|
|
1
|
+
description 'Framous Compass Gem'
|
2
|
+
|
3
|
+
# Sass Files
|
1
4
|
stylesheet 'screen.scss', :media => 'screen, projection'
|
2
|
-
stylesheet '
|
3
|
-
stylesheet '_base.scss', :media => 'screen, projection'
|
4
|
-
stylesheet '_print.scss', :media => 'print'
|
5
|
+
stylesheet '_settings.scss', :media => 'screen, projection'
|
5
6
|
|
6
7
|
html 'index.html'
|
7
|
-
html 'sample.html'
|
8
8
|
|
9
9
|
description "Framous: A light HTML & SCSS rapid prototyping toolkit for web development."
|
10
10
|
|
11
11
|
help %Q{
|
12
|
-
|
12
|
+
Please see Framous github for all documentation and tutorials:
|
13
13
|
|
14
|
-
|
14
|
+
https://github.com/framous/framous-doc
|
15
15
|
}
|
16
16
|
|
17
17
|
welcome_message %Q{
|
18
|
-
|
19
|
-
|
20
|
-
http://github.com/alechance/framous
|
18
|
+
Hola! You're now using Framous, let's get started!
|
21
19
|
}
|
@@ -4,68 +4,8 @@
|
|
4
4
|
|
5
5
|
@charset "utf-8";
|
6
6
|
|
7
|
-
//
|
8
|
-
@import "
|
7
|
+
// Compass
|
8
|
+
@import "compass";
|
9
9
|
|
10
|
-
//
|
11
|
-
@import "reset";
|
12
|
-
|
13
|
-
// Comment out this import if you are customizing you imports below
|
10
|
+
// Framous
|
14
11
|
@import "framous";
|
15
|
-
|
16
|
-
// A semantic, fluid grid framework
|
17
|
-
// Based on http://neat.bourbon.io/ & http://susy.oddbird.net/
|
18
|
-
// @import "framous/grid/framous-grid";
|
19
|
-
|
20
|
-
// Fundamental HTML elements styled and enhanced with extensible classes.
|
21
|
-
// @import "modular-scale";
|
22
|
-
// @import "framous/base/settings";
|
23
|
-
// @import "framous/base/typography";
|
24
|
-
// @import "framous/base/forms";
|
25
|
-
// @import "framous/base/tables";
|
26
|
-
// @import "framous/base/icons";
|
27
|
-
|
28
|
-
// Library of some sass mixins
|
29
|
-
// @import "framous/mixins/framous-mixins";
|
30
|
-
|
31
|
-
// Print styles
|
32
|
-
@import "print";
|
33
|
-
|
34
|
-
//
|
35
|
-
// Core Layout : Example
|
36
|
-
//
|
37
|
-
|
38
|
-
body {
|
39
|
-
div[role=main] {
|
40
|
-
position: relative;
|
41
|
-
margin: 0 auto;
|
42
|
-
@include outer-container;
|
43
|
-
|
44
|
-
article#main {
|
45
|
-
@include span-columns(8);
|
46
|
-
}
|
47
|
-
aside[role="complementary"] {
|
48
|
-
@include span-columns(4);
|
49
|
-
|
50
|
-
h3 {
|
51
|
-
@include adjust-font-size-to(ms(1));
|
52
|
-
color: $grey-dark-set;
|
53
|
-
font-family: $open-sans;
|
54
|
-
}
|
55
|
-
}
|
56
|
-
}
|
57
|
-
}
|
58
|
-
|
59
|
-
@include breakpoint($small) {
|
60
|
-
body {
|
61
|
-
div[role=main] {
|
62
|
-
margin: 0 $gutter/4;
|
63
|
-
article#main {
|
64
|
-
@include fill-parent;
|
65
|
-
}
|
66
|
-
aside[role="complementary"] {
|
67
|
-
@include fill-parent;
|
68
|
-
}
|
69
|
-
}
|
70
|
-
}
|
71
|
-
}
|
metadata
CHANGED
@@ -1,56 +1,56 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: framous
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 13
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
|
-
-
|
9
|
-
|
10
|
-
version: 0.2.5
|
8
|
+
- 3
|
9
|
+
version: "0.3"
|
11
10
|
platform: ruby
|
12
11
|
authors:
|
13
12
|
- Alec Hance
|
14
|
-
-
|
13
|
+
- Thomas Hermant
|
15
14
|
autorequire:
|
16
15
|
bindir: bin
|
17
16
|
cert_chain: []
|
18
17
|
|
19
|
-
date:
|
18
|
+
date: 2013-06-11 00:00:00 Z
|
20
19
|
dependencies:
|
21
20
|
- !ruby/object:Gem::Dependency
|
22
|
-
name:
|
21
|
+
name: sass
|
23
22
|
prerelease: false
|
24
23
|
requirement: &id001 !ruby/object:Gem::Requirement
|
25
24
|
none: false
|
26
25
|
requirements:
|
27
26
|
- - ">="
|
28
27
|
- !ruby/object:Gem::Version
|
29
|
-
hash:
|
28
|
+
hash: 15
|
30
29
|
segments:
|
30
|
+
- 3
|
31
|
+
- 2
|
31
32
|
- 0
|
32
|
-
|
33
|
-
version: "0.11"
|
33
|
+
version: 3.2.0
|
34
34
|
type: :runtime
|
35
35
|
version_requirements: *id001
|
36
36
|
- !ruby/object:Gem::Dependency
|
37
|
-
name:
|
37
|
+
name: compass
|
38
38
|
prerelease: false
|
39
39
|
requirement: &id002 !ruby/object:Gem::Requirement
|
40
40
|
none: false
|
41
41
|
requirements:
|
42
42
|
- - ">="
|
43
43
|
- !ruby/object:Gem::Version
|
44
|
-
hash:
|
44
|
+
hash: 43
|
45
45
|
segments:
|
46
|
-
- 3
|
47
|
-
- 2
|
48
46
|
- 0
|
49
|
-
|
47
|
+
- 12
|
48
|
+
- 2
|
49
|
+
version: 0.12.2
|
50
50
|
type: :runtime
|
51
51
|
version_requirements: *id002
|
52
|
-
description: A light
|
53
|
-
email:
|
52
|
+
description: A light rapid prototyping toolkit for designers
|
53
|
+
email: hello@borderlab.com
|
54
54
|
executables: []
|
55
55
|
|
56
56
|
extensions: []
|
@@ -62,32 +62,11 @@ files:
|
|
62
62
|
- LICENSE.txt
|
63
63
|
- README.md
|
64
64
|
- lib/framous.rb
|
65
|
-
-
|
66
|
-
- stylesheets/framous/base/_forms.scss
|
67
|
-
- stylesheets/framous/base/_framous-base.scss
|
68
|
-
- stylesheets/framous/base/_icons.scss
|
69
|
-
- stylesheets/framous/base/_modular-scale.scss
|
70
|
-
- stylesheets/framous/base/_settings.scss
|
71
|
-
- stylesheets/framous/base/_table.scss
|
72
|
-
- stylesheets/framous/base/_tables.scss
|
73
|
-
- stylesheets/framous/base/_typography.scss
|
74
|
-
- stylesheets/framous/grid/_framous-grid.scss
|
75
|
-
- stylesheets/framous/grid/_functions.scss
|
76
|
-
- stylesheets/framous/grid/_grid.scss
|
77
|
-
- stylesheets/framous/grid/_settings.scss
|
78
|
-
- stylesheets/framous/mixins/_framous-mixins.scss
|
79
|
-
- stylesheets/framous/mixins/_hidpi-media-query.scss
|
80
|
-
- stylesheets/framous/mixins/_image-rendering.scss
|
81
|
-
- stylesheets/framous/mixins/_linear-gradient.scss
|
82
|
-
- stylesheets/framous/mixins/_position.scss
|
83
|
-
- templates/project/_base.scss
|
84
|
-
- templates/project/_print.scss
|
85
|
-
- templates/project/_reset.scss
|
65
|
+
- templates/project/_settings.scss
|
86
66
|
- templates/project/index.html
|
87
67
|
- templates/project/manifest.rb
|
88
|
-
- templates/project/sample.html
|
89
68
|
- templates/project/screen.scss
|
90
|
-
homepage: http://
|
69
|
+
homepage: http://getframo.us
|
91
70
|
licenses: []
|
92
71
|
|
93
72
|
post_install_message:
|
@@ -119,6 +98,6 @@ rubyforge_project:
|
|
119
98
|
rubygems_version: 1.8.24
|
120
99
|
signing_key:
|
121
100
|
specification_version: 3
|
122
|
-
summary: A light
|
101
|
+
summary: A light rapid prototyping toolkit for designers
|
123
102
|
test_files: []
|
124
103
|
|
data/stylesheets/_framous.scss
DELETED
@@ -1,128 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Forms.scss
|
3
|
-
//
|
4
|
-
|
5
|
-
form {
|
6
|
-
margin-bottom: ms(1);
|
7
|
-
}
|
8
|
-
|
9
|
-
form fieldset {
|
10
|
-
margin: 0 0 ms(0) 0;
|
11
|
-
padding: 0 0 ms(0) 0;
|
12
|
-
border: none;
|
13
|
-
border-bottom: 1px solid lighten($border-color,15);
|
14
|
-
|
15
|
-
&.form-actions {
|
16
|
-
margin: 0 0 0 20%;
|
17
|
-
padding: 0;
|
18
|
-
border: none;
|
19
|
-
}
|
20
|
-
|
21
|
-
&.check {
|
22
|
-
padding-left: 20%;
|
23
|
-
|
24
|
-
label {
|
25
|
-
display: inline;
|
26
|
-
float: none;
|
27
|
-
width: auto;
|
28
|
-
font-weight: normal;
|
29
|
-
}
|
30
|
-
}
|
31
|
-
|
32
|
-
label {
|
33
|
-
float: left;
|
34
|
-
margin: 4px 0 5px 0;
|
35
|
-
width: 20%;
|
36
|
-
font-weight: bold;
|
37
|
-
}
|
38
|
-
|
39
|
-
&.radio ul {
|
40
|
-
@include reset-list-style;
|
41
|
-
margin: 5px 0 0 20%;
|
42
|
-
|
43
|
-
li {
|
44
|
-
margin: 0 0 5px 0;
|
45
|
-
|
46
|
-
&:last-child {
|
47
|
-
margin: 0;
|
48
|
-
}
|
49
|
-
|
50
|
-
label {
|
51
|
-
display: inline;
|
52
|
-
float: none;
|
53
|
-
width: auto;
|
54
|
-
font-weight: normal;
|
55
|
-
}
|
56
|
-
}
|
57
|
-
}
|
58
|
-
|
59
|
-
input.form-text,
|
60
|
-
textarea {
|
61
|
-
display: block;
|
62
|
-
padding: 5px;
|
63
|
-
width: 50%;
|
64
|
-
border: 1px solid $border-color;
|
65
|
-
font-family: $open-sans;
|
66
|
-
}
|
67
|
-
|
68
|
-
input.form-text:focus,
|
69
|
-
textarea:focus {
|
70
|
-
border: 1px solid $border-color-hover;
|
71
|
-
}
|
72
|
-
|
73
|
-
textarea {
|
74
|
-
height: 150px;
|
75
|
-
}
|
76
|
-
|
77
|
-
select {
|
78
|
-
margin: 0;
|
79
|
-
min-width: 25%;
|
80
|
-
font-family: $open-sans;
|
81
|
-
}
|
82
|
-
|
83
|
-
p.form-help {
|
84
|
-
margin: 5px 0 0 20%;
|
85
|
-
color: $grey-set;
|
86
|
-
}
|
87
|
-
}
|
88
|
-
|
89
|
-
form input[type="submit"] {
|
90
|
-
margin: 0;
|
91
|
-
padding: 5px 10px;
|
92
|
-
border: 0 none;
|
93
|
-
background: $link-color;
|
94
|
-
color: $white-set;
|
95
|
-
font-weight: 700;
|
96
|
-
font-family: $open-sans;
|
97
|
-
|
98
|
-
&:hover,
|
99
|
-
&:focus {
|
100
|
-
background: $link-color-hover;
|
101
|
-
}
|
102
|
-
|
103
|
-
&:active {
|
104
|
-
background: $link-color-hover;
|
105
|
-
}
|
106
|
-
}
|
107
|
-
|
108
|
-
@include breakpoint($small) {
|
109
|
-
form fieldset label {
|
110
|
-
display: block;
|
111
|
-
float: none;
|
112
|
-
margin: 0 0 5px 0;
|
113
|
-
width: auto;
|
114
|
-
}
|
115
|
-
|
116
|
-
form fieldset.form-actions,
|
117
|
-
form fieldset.check,
|
118
|
-
form fieldset.radio ul,
|
119
|
-
form fieldset p.form-help {
|
120
|
-
margin-left: 0;
|
121
|
-
padding-left: 0;
|
122
|
-
}
|
123
|
-
|
124
|
-
form fieldset input.form-text,
|
125
|
-
form fieldset textarea {
|
126
|
-
width: 100%;
|
127
|
-
}
|
128
|
-
}
|