sass-flexi 1.0.2 → 1.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 (7) hide show
  1. checksums.yaml +5 -5
  2. data/stylesheets/bundle/_grid.scss +4 -4
  3. data/stylesheets/bundle/_normalize.scss +4 -0
  4. data/stylesheets/bundle/_typography.scss +13 -7
  5. data/templates/project/index.html +6 -5
  6. data/templates/project/screen.scss +26 -12
  7. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA512:
3
- data.tar.gz: 6664a554b865e13168ee71b2219a940a6e82408edc8c5f99c5d9915c79d35866a3f948ff202168d80acbbf72284c6b37db745cad988f7bd215e6038eac247e29
4
- metadata.gz: 8213f638313fe4e5b2be507bb2233b6c4053c294b58aa39226fd6e9c08a14e4a8fcf611f293ef771cc200d648a4bc1f6e6b23de67f9c2fe306816a3f1c3ddff8
5
2
  SHA1:
6
- data.tar.gz: 4e72c9e6c0352662852d629596872e38e9dd8b7c
7
- metadata.gz: fcdcb116846a39aa25f066993867818dba8dbc34
3
+ metadata.gz: cd177fbeed51cc0d17cbf15bda53ca853fa26392
4
+ data.tar.gz: 29a4d8c94bc9bbffede02fd6eb694c12d25b7703
5
+ SHA512:
6
+ metadata.gz: 62e7bee5297c0b77bd1a7fd859c283111db1f3e842a8fc83e0f3fd9b96db5bdac2131142d72133fadd564d4b8fc990e814a947617f29fae6929b3d8f24ae307b
7
+ data.tar.gz: 66a4af35aacce816dd2bc0f9cc8d265b179fd7f5c921f61523ee315878932e64fb36bca66fff36d670be589d66cc0a47c617a9f79060a70799c7e1662af063b3
data/stylesheets/bundle/_grid.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  // created by : MrAhmad
4
4
  // date : 10 June 2014
5
5
  // website : http://sass-flexi.com/
6
- // version : 0.1.alpha.1
6
+ // version : 1.0.3
7
7
  //============================
8
8
 
9
9
  //============================
@@ -51,7 +51,7 @@ $total-columns : 12 !default;
51
51
  @extend %clear;
52
52
  }
53
53
 
54
- // define the raw for the grid system, used to create horizantal of columns
54
+ // define the raw for the grid system, used to create horizontal of columns
55
55
  @mixin row($gutter-width:30) {
56
56
  margin-left: ($gutter-width/-2) * 1px;
57
57
  margin-right: ($gutter-width/-2) * 1px;
@@ -71,7 +71,7 @@ $total-columns : 12 !default;
71
71
  display: block;;
72
72
  }
73
73
 
74
- // define image for samll medias
74
+ // define image for small medias
75
75
  @mixin img-respon() {
76
76
  max-width: 100%;
77
77
  height: auto;
@@ -92,7 +92,7 @@ $total-columns : 12 !default;
92
92
  }
93
93
  }
94
94
 
95
- // define the width,offest,push, and pull for the grid system
95
+ // define the width,offset,push, and pull for the grid system
96
96
 
97
97
  // column width
98
98
  @mixin column-width($property:col,$total-columns:12) {
data/stylesheets/bundle/_normalize.scss CHANGED
@@ -1,3 +1,6 @@
1
+ @mixin normalize() {
2
+
3
+
1
4
  /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
2
5
 
3
6
  /**
@@ -422,4 +425,5 @@ table {
422
425
  td,
423
426
  th {
424
427
  padding: 0;
428
+ }
425
429
  }
data/stylesheets/bundle/_typography.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  // created by : MrAhmad
3
3
  // date : 10 June 2014
4
4
  // website : http://sass-flexi.com/
5
- // version : 0.1.alpha.1
5
+ // version : 1.0.3
6
6
  //============================
7
7
 
8
8
  //============================
@@ -13,12 +13,12 @@
13
13
  // 1- Modular scale for (tablet,desktop, and large media)
14
14
  // 2:3 perfect fifth
15
15
  // 16px @ 1:1.5 ideal text size
16
- // 95px @ 1:1.5 important number - choosen from column width
16
+ // 95px @ 1:1.5 important number - chosen from column width
17
17
  //---------------------------------------------------
18
18
  $scale-ratio : 1.5 !default;
19
19
  $font-size : 16 !default;
20
20
 
21
- // calculate the headingline elements
21
+ // calculate the heading elements
22
22
  $h1 : $font-size * 3.375;
23
23
  $h2 : $font-size * 2.25 ;
24
24
  $h3 : $font-size * 1.5 ;
@@ -30,13 +30,13 @@ $h6 : $font-size / 2.25 ;
30
30
  // 2- Modular scale for mobile media
31
31
  // 2:3 perfect fifth
32
32
  // 13px @ 1:1.5 ideal text size
33
- // 480px @ 1:1.5 important number - choosen from column width
33
+ // 480px @ 1:1.5 important number - chosen from column width
34
34
  //---------------------------------------------------
35
35
  $scale-ratio : 1.5 !default;
36
36
  $font-size-mob: 13 !default;
37
37
 
38
38
 
39
- // calculate the headingline elements
39
+ // calculate the heading elements
40
40
  $h1-mob : $font-size-mob * 2.25;
41
41
  $h2-mob : $font-size-mob * 1.5 ;
42
42
  $h3-mob : $font-size-mob * 1.25 ;
@@ -53,6 +53,8 @@ $head-color : darken($text-color, 20%) !default;
53
53
  // font-family
54
54
  $sans-serif : "Helvetica Neue",Helvetica, Arial, sans-serif !default;
55
55
  $serif : Georgia, Times, "Times New Roman", serif !default;
56
+ $body-font : $sans-serif;
57
+ $heading-font : $serif;
56
58
 
57
59
 
58
60
  // 3- Functions
@@ -78,7 +80,7 @@ $serif : Georgia, Times, "Times New Roman", serif !default;
78
80
  // 4- placeholders
79
81
  //---------------------------------------------------
80
82
  %head-family{
81
- font-family: $sans-serif;
83
+ font-family: $heading-font;
82
84
  color: $head-color;
83
85
  text-transform :capitalize;
84
86
  text-shadow: 0 1px 1px rgba(255,255,255,0.6);
@@ -101,7 +103,7 @@ $serif : Georgia, Times, "Times New Roman", serif !default;
101
103
  }
102
104
 
103
105
  // body and headline font size and font-family
104
- @mixin body-headline($font-size,$base:16){
106
+ @mixin body-heading($font-size,$base:16){
105
107
  body{
106
108
  font-family: $sans-serif;
107
109
  font-size: px($font-size);
@@ -276,3 +278,7 @@ $serif : Georgia, Times, "Times New Roman", serif !default;
276
278
  -moz-border-radius: px($raduis);
277
279
  border-radius: px($raduis);
278
280
  }
281
+
282
+ @mixin text($value) {
283
+ text-align: $value;
284
+ }
data/templates/project/index.html CHANGED
@@ -5,6 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>sass-flexi example page</title>
7
7
  <!-- attcahe screen.css stylesheet -->
8
+ <link rel="stylesheet" href="stylesheets/screen.css">
8
9
  </head>
9
10
  <body>
10
11
 
@@ -52,10 +53,10 @@
52
53
  <!-- typography -->
53
54
  <div class="container">
54
55
  <div class="wrapper">
55
- <div class="col-4">
56
- <h1>TITLE</h1>
56
+ <div class="col-8 push-1">
57
+ <h1>Title</h1>
57
58
 
58
- <h2>headline</h2>
59
+ <h2>heading title</h2>
59
60
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, ullam, similique adipisci magnam officia accusamus temporibus ratione nam eligendi laborum eos ea minus asperiores voluptate praesentium laboriosam illo. Ullam, soluta.</p>
60
61
 
61
62
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, totam, quidem quis nisi quas nostrum ipsam voluptas ratione qui accusantium mollitia magni unde aliquid sapiente tempora iure ex veniam. Non?</p>
@@ -67,8 +68,8 @@
67
68
  <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, repudiandae, ut, nostrum natus quasi eius assumenda aliquam reprehenderit neque commodi doloremque ducimus itaque ex distinctio quam quidem odit facilis. Saepe!</blockquote>
68
69
 
69
70
  <pre><code>@mixin flexi(cool){
70
- margin : 0px;
71
- }</code></pre>
71
+ margin : 0px;
72
+ </code></pre>
72
73
 
73
74
  <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit. <em>loaoll</em> culpa labore pariatur maiores unde totam odio accusamus assumenda voluptatum nam? Facere, <code>quis</code> debitis ratione quisquam eveniet rerum dolore labore dignissimos?</p>
74
75
 
data/templates/project/screen.scss CHANGED
@@ -3,6 +3,12 @@
3
3
 
4
4
  @import "sass-flexi";
5
5
 
6
+
7
+ //=============================
8
+ // normalize
9
+ //=============================
10
+ @include normalize();
11
+
6
12
  //=============================
7
13
  // flexi-grid framework
8
14
  //=============================
@@ -27,14 +33,14 @@
27
33
  @extend %clear;
28
34
  }
29
35
 
30
- // generate the columns for the grid systen
36
+ // generate the columns for the grid system
31
37
  @include columns(col,12);
32
38
 
33
39
 
34
40
  // Generate the viewports
35
41
  //-----------------------
36
42
 
37
- // 1- tablet viewport (width 768px)
43
+ // 1- tablet view-port (width 768px)
38
44
  @media screen and (min-width:768px){
39
45
  %float{
40
46
  float: left;
@@ -47,7 +53,7 @@
47
53
  @include direction(col,12);
48
54
 
49
55
 
50
- // 2- desktop viewport (width 992px)
56
+ // 2- desktop view-port (width 992px)
51
57
  @media screen and (min-width:992px){
52
58
  %float{
53
59
  float: left;
@@ -60,7 +66,7 @@
60
66
  @include direction(col,12);
61
67
 
62
68
 
63
- // 3- large viewport (width 1200px)
69
+ // 3- large view-port (width 1200px)
64
70
  @media screen and (min-width:1200px){
65
71
  %float{
66
72
  float: left;
@@ -77,15 +83,15 @@
77
83
  // flexi-typography framework
78
84
  //======================================
79
85
 
80
- html{
86
+ html {
81
87
  @include html(16,10);
82
88
  }
83
89
 
84
90
  // body and headline font-size and font-family
85
- @include body-headline(16,10);
91
+ @include body-heading(16,10);
86
92
 
87
93
  // link elements
88
- a{
94
+ a {
89
95
  @include link(#C02942); // define the color for the link elements, you can change the color number is you wish
90
96
  }
91
97
 
@@ -157,10 +163,18 @@ small, .small{font-size: 80%;}
157
163
  }
158
164
 
159
165
 
160
- // modifers
161
- .text-left{text-align: left;}
162
- .text-right{text-align: right;}
163
- .text-center{text-align: center;}
164
- .text-justify{text-align: justify;}
166
+ // modifiers
167
+ .text-left{
168
+ @include text(left);
169
+ }
170
+ .text-right{
171
+ @include text(right);
172
+ }
173
+ .text-center{
174
+ @include text(center);
175
+ }
176
+ .text-justify{
177
+ @include text(justify);
178
+ }
165
179
  //===== end flexi-typography framework =======
166
180
 
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sass-flexi
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.2
4
+ version: 1.0.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Ahmad Araj
@@ -9,7 +9,7 @@ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
11
 
12
- date: 2014-06-28 00:00:00 Z
12
+ date: 2014-06-29 00:00:00 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: compass