sass-flexi 1.0.2 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/stylesheets/bundle/_grid.scss +4 -4
- data/stylesheets/bundle/_normalize.scss +4 -0
- data/stylesheets/bundle/_typography.scss +13 -7
- data/templates/project/index.html +6 -5
- data/templates/project/screen.scss +26 -12
- 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
|
-
|
7
|
-
|
3
|
+
metadata.gz: cd177fbeed51cc0d17cbf15bda53ca853fa26392
|
4
|
+
data.tar.gz: 29a4d8c94bc9bbffede02fd6eb694c12d25b7703
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 62e7bee5297c0b77bd1a7fd859c283111db1f3e842a8fc83e0f3fd9b96db5bdac2131142d72133fadd564d4b8fc990e814a947617f29fae6929b3d8f24ae307b
|
7
|
+
data.tar.gz: 66a4af35aacce816dd2bc0f9cc8d265b179fd7f5c921f61523ee315878932e64fb36bca66fff36d670be589d66cc0a47c617a9f79060a70799c7e1662af063b3
|
@@ -3,7 +3,7 @@
|
|
3
3
|
// created by : MrAhmad
|
4
4
|
// date : 10 June 2014
|
5
5
|
// website : http://sass-flexi.com/
|
6
|
-
// version :
|
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
|
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
|
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,
|
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) {
|
@@ -2,7 +2,7 @@
|
|
2
2
|
// created by : MrAhmad
|
3
3
|
// date : 10 June 2014
|
4
4
|
// website : http://sass-flexi.com/
|
5
|
-
// version :
|
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 -
|
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
|
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 -
|
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
|
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: $
|
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-
|
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
|
+
}
|
@@ -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-
|
56
|
-
<h1>
|
56
|
+
<div class="col-8 push-1">
|
57
|
+
<h1>Title</h1>
|
57
58
|
|
58
|
-
<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
|
-
|
71
|
-
|
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
|
|
@@ -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
|
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
|
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
|
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
|
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-
|
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
|
-
//
|
161
|
-
.text-left{
|
162
|
-
|
163
|
-
|
164
|
-
.text-
|
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.
|
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-
|
12
|
+
date: 2014-06-29 00:00:00 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: compass
|