framous 0.2.5 → 0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. data/CHANGELOG.mkdn +4 -0
  2. data/README.md +2 -21
  3. data/lib/framous.rb +0 -1
  4. data/templates/project/_settings.scss +92 -0
  5. data/templates/project/index.html +18 -18
  6. data/templates/project/manifest.rb +7 -9
  7. data/templates/project/screen.scss +3 -63
  8. metadata +20 -41
  9. data/stylesheets/_framous.scss +0 -13
  10. data/stylesheets/framous/base/_forms.scss +0 -128
  11. data/stylesheets/framous/base/_framous-base.scss +0 -11
  12. data/stylesheets/framous/base/_icons.scss +0 -27
  13. data/stylesheets/framous/base/_modular-scale.scss +0 -220
  14. data/stylesheets/framous/base/_settings.scss +0 -70
  15. data/stylesheets/framous/base/_table.scss +0 -120
  16. data/stylesheets/framous/base/_tables.scss +0 -120
  17. data/stylesheets/framous/base/_typography.scss +0 -213
  18. data/stylesheets/framous/grid/_framous-grid.scss +0 -9
  19. data/stylesheets/framous/grid/_functions.scss +0 -39
  20. data/stylesheets/framous/grid/_grid.scss +0 -201
  21. data/stylesheets/framous/grid/_settings.scss +0 -42
  22. data/stylesheets/framous/mixins/_framous-mixins.scss +0 -9
  23. data/stylesheets/framous/mixins/_hidpi-media-query.scss +0 -22
  24. data/stylesheets/framous/mixins/_image-rendering.scss +0 -17
  25. data/stylesheets/framous/mixins/_linear-gradient.scss +0 -47
  26. data/stylesheets/framous/mixins/_position.scss +0 -46
  27. data/templates/project/_base.scss +0 -83
  28. data/templates/project/_print.scss +0 -21
  29. data/templates/project/_reset.scss +0 -410
  30. data/templates/project/sample.html +0 -421
data/CHANGELOG.mkdn CHANGED
@@ -1,6 +1,10 @@
1
1
  Framous Changelog
2
2
  =================
3
3
 
4
+ v0.3 [Jul 23, 2013]
5
+ ---------------------
6
+ * major updates : grid system, typography & javascript plugins
7
+
4
8
  v0.2.5 [Mar 7, 2013]
5
9
  ---------------------
6
10
  * add sample.html to manifest.rb
data/README.md CHANGED
@@ -1,23 +1,4 @@
1
1
  framous
2
- ============
2
+ =======
3
3
 
4
- A light HTML & SCSS rapid prototyping toolkit for web development
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 &amp; powerful front-end toolkit to prototype digital product.
data/lib/framous.rb CHANGED
@@ -1,5 +1,4 @@
1
1
  require 'compass'
2
- require 'modular-scale'
3
2
 
4
3
  extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
5
4
  Compass::Frameworks.register('framous', :path => extension_path)
data/templates/project/_settings.scss ADDED
@@ -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;
data/templates/project/index.html CHANGED
@@ -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
- <meta charset="utf-8" />
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
- <title>Document Title</title>
8
+ <!-- Set the viewport width to device width for mobile -->
9
+ <meta name="viewport" content="width=device-width" />
13
10
 
14
- <!-- Included CSS Files -->
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
- </header><!-- /header -->
23
+ <div role="main">
24
24
 
25
- <div role="main">
25
+ </div><!-- /main -->
26
26
 
27
- </div><!-- /main -->
27
+ <footer role="contentinfo">
28
+
29
+ </footer><!-- /footer -->
28
30
 
29
- <footer role="contentinfo">
30
-
31
- </footer><!-- /footer -->
31
+ <!-- JS -->
32
32
 
33
33
  </body>
34
34
  </html>
data/templates/project/manifest.rb CHANGED
@@ -1,21 +1,19 @@
1
+ description 'Framous Compass Gem'
2
+
3
+ # Sass Files
1
4
  stylesheet 'screen.scss', :media => 'screen, projection'
2
- stylesheet '_reset.scss', :media => 'screen, projection'
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
- Please see Framous github for all documentation and tutorials:
12
+ Please see Framous github for all documentation and tutorials:
13
13
 
14
- http://github.com/alechance/framous
14
+ https://github.com/framous/framous-doc
15
15
  }
16
16
 
17
17
  welcome_message %Q{
18
- Please see Framous github for all documentation and tutorials:
19
-
20
- http://github.com/alechance/framous
18
+ Hola! You're now using Framous, let's get started!
21
19
  }
data/templates/project/screen.scss CHANGED
@@ -4,68 +4,8 @@
4
4
 
5
5
  @charset "utf-8";
6
6
 
7
- // Basic settings that can be easily overridden from _base.scss
8
- @import "base";
7
+ // Compass
8
+ @import "compass";
9
9
 
10
- // Reset Normalize.css
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: 29
4
+ hash: 13
5
5
  prerelease:
6
6
  segments:
7
7
  - 0
8
- - 2
9
- - 5
10
- version: 0.2.5
8
+ - 3
9
+ version: "0.3"
11
10
  platform: ruby
12
11
  authors:
13
12
  - Alec Hance
14
- - Khalid Yagoubi
13
+ - Thomas Hermant
15
14
  autorequire:
16
15
  bindir: bin
17
16
  cert_chain: []
18
17
 
19
- date: 2012-11-15 00:00:00 Z
18
+ date: 2013-06-11 00:00:00 Z
20
19
  dependencies:
21
20
  - !ruby/object:Gem::Dependency
22
- name: compass
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: 29
28
+ hash: 15
30
29
  segments:
30
+ - 3
31
+ - 2
31
32
  - 0
32
- - 11
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: sass
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: 15
44
+ hash: 43
45
45
  segments:
46
- - 3
47
- - 2
48
46
  - 0
49
- version: 3.2.0
47
+ - 12
48
+ - 2
49
+ version: 0.12.2
50
50
  type: :runtime
51
51
  version_requirements: *id002
52
- description: A light HTML & SCSS rapid prototyping toolkit for web development
53
- email: alec@borderlab.com
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
- - stylesheets/_framous.scss
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://github.com/alechance/framous
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 HTML & SCSS rapid prototyping toolkit for web development
101
+ summary: A light rapid prototyping toolkit for designers
123
102
  test_files: []
124
103
 
data/stylesheets/_framous.scss DELETED
@@ -1,13 +0,0 @@
1
- //
2
- // Framous.scss
3
- // Framous features
4
- //
5
-
6
- @import "compass/css3";
7
- @import "modular-scale";
8
-
9
- @import "framous/grid/framous-grid";
10
-
11
- @import "framous/base/framous-base";
12
-
13
- @import "framous/mixins/framous-mixins";
data/stylesheets/framous/base/_forms.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
- }