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.
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
- }