edge_framework 0.6.1 → 0.8.1
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/Gemfile +1 -1
- data/Gemfile.lock +38 -0
- data/assets/sass/edge/_base.scss +224 -193
- data/assets/sass/edge/_components.scss +1 -1
- data/assets/sass/edge/_helpers.scss +2 -2
- data/assets/sass/edge/components/_code.scss +4 -4
- data/assets/sass/edge/components/_grid-old.scss +287 -0
- data/assets/sass/edge/components/_grid.scss +221 -241
- data/assets/sass/edge/components/_tile.scss +113 -0
- data/assets/sass/edge/components/_visibility.scss +2 -2
- data/assets/sass/edge/helpers/_sprites.scss +4 -3
- data/assets/sass/for-test.scss +152 -0
- data/assets/test.html +441 -63
- data/lib/edge/version.rb +2 -2
- data/template/base/assets/sass/_setting.scss +15 -16
- data/template/base/assets/sass/{edge-framework.scss → framework.scss} +0 -0
- data/template/base/config.rb +16 -0
- metadata +8 -4
- data/assets/sass/edge/components/_block-grid.scss +0 -112
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
// ---------------------------------
|
|
2
|
+
// TILE
|
|
3
|
+
// Based on ZURB's Foundation 4
|
|
4
|
+
// ---------------------------------
|
|
5
|
+
|
|
6
|
+
$max-tiles : 12 !default;
|
|
7
|
+
$tile-gutter : 15px !default;
|
|
8
|
+
|
|
9
|
+
@mixin tile-calc (
|
|
10
|
+
$per-row : 0,
|
|
11
|
+
$gutter : $tile-gutter,
|
|
12
|
+
$collapse : false ) {
|
|
13
|
+
|
|
14
|
+
@if $per-row > 0 {
|
|
15
|
+
width : 100% / $per-row;
|
|
16
|
+
|
|
17
|
+
&:nth-of-type(#{$per-row}n+1) {
|
|
18
|
+
clear: both;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
@else {
|
|
22
|
+
@if $collapse {
|
|
23
|
+
padding : 0;
|
|
24
|
+
} @else {
|
|
25
|
+
padding : 0 ($gutter / 2);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@mixin tile (
|
|
31
|
+
$large-tile : 0,
|
|
32
|
+
$small-tile : 0,
|
|
33
|
+
$gutter : $tile-gutter,
|
|
34
|
+
$collapse : false ) {
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
// For <ul> styling
|
|
38
|
+
@if $external-call or $large-tile == 0 {
|
|
39
|
+
display : block;
|
|
40
|
+
@if $collapse {
|
|
41
|
+
margin-right: 0;
|
|
42
|
+
margin-left: 0;
|
|
43
|
+
} @else {
|
|
44
|
+
margin-right: -(em($gutter) / 2);
|
|
45
|
+
margin-left: -(em($gutter) / 2);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@include clearfix;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// For <li> styling
|
|
52
|
+
> li {
|
|
53
|
+
@if $external-call or $large-tile == 0 {
|
|
54
|
+
display : block;
|
|
55
|
+
position : relative;
|
|
56
|
+
float : $default-float;
|
|
57
|
+
height : auto;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@include tile-calc($per-row:$large-tile, $gutter:$gutter, $collapse:$collapse);
|
|
61
|
+
|
|
62
|
+
@if $small-tile > 0 {
|
|
63
|
+
@include below(small) {
|
|
64
|
+
&:nth-of-type(n) {
|
|
65
|
+
clear: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@include tile-calc($per-row:$small-tile, $gutter:$gutter, $collapse:$collapse);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
} // li
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@if $include-tile {
|
|
75
|
+
|
|
76
|
+
/* ---------------
|
|
77
|
+
EDGE Block Grid
|
|
78
|
+
--------------- */
|
|
79
|
+
|
|
80
|
+
[class*="-tile-"] {
|
|
81
|
+
@include tile();
|
|
82
|
+
|
|
83
|
+
&.collapse {
|
|
84
|
+
@include tile($collapse:true);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@for $i from 2 through $max-tiles {
|
|
89
|
+
.large-tile-#{$i} {
|
|
90
|
+
@include tile($large-tile:$i);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@if $responsive {
|
|
95
|
+
@include below(small) {
|
|
96
|
+
// Make large-tie 100% width
|
|
97
|
+
[class*="large-tile-"] > li {
|
|
98
|
+
width: 100%;
|
|
99
|
+
}
|
|
100
|
+
[class*="small-tile-"] > li:nth-child(n) {
|
|
101
|
+
clear: none;
|
|
102
|
+
}
|
|
103
|
+
@for $i from 1 through $max-tiles {
|
|
104
|
+
.small-tile-#{$i} {
|
|
105
|
+
@include tile($large-tile:$i);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
} // responsive
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
} // include-block-grid
|
|
@@ -36,14 +36,14 @@ EDGE Visibility
|
|
|
36
36
|
|
|
37
37
|
/* Above small breakpoint (>#{$small-screen}) */
|
|
38
38
|
.hide-for-large { display: none !important; }
|
|
39
|
-
@include
|
|
39
|
+
@include above(small) {
|
|
40
40
|
.hide-for-small { display: inherit !important; }
|
|
41
41
|
@include special-display(small);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
|
|
45
45
|
/* Below small breakpoint (<=#{$small-screen}) */
|
|
46
|
-
@include small {
|
|
46
|
+
@include below(small) {
|
|
47
47
|
.hide-for-small { display: none !important; }
|
|
48
48
|
.hide-for-large { display: inherit !important; }
|
|
49
49
|
@include special-display(large);
|
|
@@ -13,9 +13,10 @@
|
|
|
13
13
|
// -----------------------------------------------------
|
|
14
14
|
|
|
15
15
|
// Generate standard sprites
|
|
16
|
-
@mixin sprite(
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
@mixin sprite(
|
|
17
|
+
$folder-name : "sprites",
|
|
18
|
+
$main-class : "sprite",
|
|
19
|
+
$prefix-class : "") {
|
|
19
20
|
$sprites: sprite-map("#{$folder-name}/*.png", $layout: smart);
|
|
20
21
|
.#{$main-class}{
|
|
21
22
|
background : $sprites;
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
@import "edge/base";
|
|
2
|
+
@import "edge/helpers";
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
.custom-grid {
|
|
6
|
+
@include grid-column($large:3);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.demo-grid {
|
|
10
|
+
@include transition($g-transition);
|
|
11
|
+
p {
|
|
12
|
+
text-align : center;
|
|
13
|
+
margin : 0;
|
|
14
|
+
}
|
|
15
|
+
.column,
|
|
16
|
+
.columns {
|
|
17
|
+
p {
|
|
18
|
+
margin-bottom : em(15px);
|
|
19
|
+
padding-top : em(10px);
|
|
20
|
+
padding-bottom : em(10px);
|
|
21
|
+
background : #eee;
|
|
22
|
+
text-align : center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.column,
|
|
26
|
+
.columns {
|
|
27
|
+
p {
|
|
28
|
+
background : #ddd;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.column,
|
|
32
|
+
.columns {
|
|
33
|
+
p {
|
|
34
|
+
background : #ccc;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.demo-block-grid {
|
|
42
|
+
p {
|
|
43
|
+
background : #eee;
|
|
44
|
+
margin-bottom : em(15px);
|
|
45
|
+
padding-top : em(10px);
|
|
46
|
+
padding-bottom : em(10px);
|
|
47
|
+
text-align : center;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.custom-block-grid {
|
|
52
|
+
@include tile($large-tile:5, $small-tile:3, $collapse:true);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.media-query-wrapper {
|
|
56
|
+
@include below(small) {
|
|
57
|
+
background: $red-color;
|
|
58
|
+
}
|
|
59
|
+
@include above(small) {
|
|
60
|
+
background: $green-color;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
[data-page="form"] {
|
|
65
|
+
input, textarea, select {
|
|
66
|
+
margin-bottom: 20px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.blog-post {
|
|
71
|
+
@include baseline();
|
|
72
|
+
@include vertical-rhythm();
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
[data-page="triangle"] {
|
|
76
|
+
.triangle1 {
|
|
77
|
+
@include triangle($color:$main-color, $width:100px, $direction:right);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// [data-page="typography"] {
|
|
82
|
+
// @mixin adjust-image-leading-to($lines, $font-size: $base-font-size) {
|
|
83
|
+
// height: rhythm($lines, $font-size);
|
|
84
|
+
// }
|
|
85
|
+
|
|
86
|
+
// h1 {
|
|
87
|
+
// @include adjust-leading-to(2, $h1-font-size);
|
|
88
|
+
// }
|
|
89
|
+
|
|
90
|
+
// blockquote {
|
|
91
|
+
// padding-left: 20px;
|
|
92
|
+
// background: #eee;
|
|
93
|
+
// @include trailer(1);
|
|
94
|
+
// @include leader(1);
|
|
95
|
+
// @include padding-trailer(0.5);
|
|
96
|
+
// @include padding-leader(0.5);
|
|
97
|
+
// }
|
|
98
|
+
|
|
99
|
+
// table {
|
|
100
|
+
// @include trailer(1);
|
|
101
|
+
// }
|
|
102
|
+
|
|
103
|
+
// td, th {
|
|
104
|
+
// @include adjust-leading-to(1);
|
|
105
|
+
|
|
106
|
+
// padding-left: 20px;
|
|
107
|
+
// padding-right: 20px;
|
|
108
|
+
|
|
109
|
+
// // @include box-shadow(inset 1px 1px black);
|
|
110
|
+
|
|
111
|
+
// // &:last-child {
|
|
112
|
+
// // @include box-shadow(
|
|
113
|
+
// // inset 1px 1px black,
|
|
114
|
+
// // inset -1px 0 black
|
|
115
|
+
// // );
|
|
116
|
+
// // }
|
|
117
|
+
// }
|
|
118
|
+
|
|
119
|
+
// // tr:last-child {
|
|
120
|
+
// // td {
|
|
121
|
+
// // @include box-shadow(
|
|
122
|
+
// // inset 1px 1px black,
|
|
123
|
+
// // inset 0 -1px black
|
|
124
|
+
// // );
|
|
125
|
+
|
|
126
|
+
// // &:last-child {
|
|
127
|
+
// // @include box-shadow(
|
|
128
|
+
// // inset 1px 1px black,
|
|
129
|
+
// // inset -1px -1px black
|
|
130
|
+
// // );
|
|
131
|
+
// // }
|
|
132
|
+
// // }
|
|
133
|
+
// // }
|
|
134
|
+
|
|
135
|
+
// .sidebar {
|
|
136
|
+
// h2 {
|
|
137
|
+
// @include trailing-border(5px, 1, $h2-font-size);
|
|
138
|
+
// @include trailer(1, $h2-font-size);
|
|
139
|
+
// }
|
|
140
|
+
|
|
141
|
+
// h3 {
|
|
142
|
+
// @include trailer(1, $h3-font-size);
|
|
143
|
+
// }
|
|
144
|
+
// li {
|
|
145
|
+
// cursor: pointer;
|
|
146
|
+
|
|
147
|
+
// &:hover {
|
|
148
|
+
// color: tomato;
|
|
149
|
+
// }
|
|
150
|
+
// }
|
|
151
|
+
// }
|
|
152
|
+
// }
|
data/assets/test.html
CHANGED
|
@@ -1,74 +1,452 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
.hide-for-large {
|
|
26
|
-
color: blue;
|
|
27
|
-
}
|
|
28
|
-
</style>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width" />
|
|
6
|
+
<title>Edge Framework</title>
|
|
7
|
+
|
|
8
|
+
<!-- VENDOR -->
|
|
9
|
+
<link rel="stylesheet" href="css/edge.css">
|
|
10
|
+
|
|
11
|
+
<!-- APP Specific -->
|
|
12
|
+
<link rel="stylesheet" href="css/for-test.css">
|
|
13
|
+
<!-- <link rel="stylesheet" href="css/prism.css"> -->
|
|
14
|
+
|
|
15
|
+
<style>
|
|
16
|
+
.bar1140 {
|
|
17
|
+
width:1140px; margin:0 auto; background: #333; color: white; position:fixed; top:0;
|
|
18
|
+
right:0; left:0; z-index: 2; padding: 10px 0;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
<!--SYNTAX HIGHLIGHTER-->
|
|
24
|
+
<script type="text/javascript" src="js/edge/edge.prism.js"></script>
|
|
29
25
|
</head>
|
|
30
26
|
<body>
|
|
31
27
|
<div id="main-wrapper">
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
28
|
+
<header class="top-bar">
|
|
29
|
+
</header>
|
|
30
|
+
|
|
31
|
+
<!-- <div class="row" data-page="typography">
|
|
32
|
+
<div class="large-12 columns">
|
|
33
|
+
<article class="blog-post baseline">
|
|
34
|
+
<div class="row">
|
|
35
|
+
<div class="large-6 columns">
|
|
36
|
+
<div class="typo-wrapper">
|
|
37
|
+
<h1>Unordered List</h1>
|
|
38
|
+
<ul class="bullet-list">
|
|
39
|
+
<li>Lorem ipsum dolor sit</li>
|
|
40
|
+
<li>
|
|
41
|
+
Consectetur adipisicing elit
|
|
42
|
+
<ul class="bullet-list">
|
|
43
|
+
<li>Necessitatibus, ex assumenda veniam ullam</li>
|
|
44
|
+
<li>Ametharum labore deserunt quidem</li>
|
|
45
|
+
</ul>
|
|
46
|
+
</li>
|
|
47
|
+
<li>Consequatur ipsum a aut iusto tempore</li>
|
|
48
|
+
<li>Impedit sint nulla nobis suscipit rem aspernatur</li>
|
|
49
|
+
</ul>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="large-6 columns">
|
|
53
|
+
<div class="typo-wrapper">
|
|
54
|
+
<h1>Ordered List</h1>
|
|
55
|
+
<ol>
|
|
56
|
+
<li>Lorem ipsum dolor sit.</li>
|
|
57
|
+
<li> Eligendi, eos, voluptates, ducimus fugit
|
|
58
|
+
<ol>
|
|
59
|
+
<li>Tempora minus iusto veniam veritatis ea</li>
|
|
60
|
+
<li>Perspiciatis sequi et incidunt</li>
|
|
61
|
+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
|
|
62
|
+
</ol>
|
|
63
|
+
</li>
|
|
64
|
+
<li>Consequuntur assumenda nesciunt</li>
|
|
65
|
+
<li>Consectetur adipisicing elit</li>
|
|
66
|
+
</ol>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="row">
|
|
71
|
+
<div class="large-6 small-9 columns">
|
|
72
|
+
<h1>Lorem ipsum dolor sit amet.</h1>
|
|
73
|
+
<p>
|
|
74
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eaque illum tempora mollitia magni omnis debitis quidem culpa dolores praesentium at veniam nobis! Iusto, excepturi, accusamus autem iure ab magnam!
|
|
75
|
+
</p>
|
|
76
|
+
<p>
|
|
77
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quos hic praesentium sint impedit voluptate aliquid minus consequuntur assumenda quaerat voluptas vel corrupti ullam accusantium quo optio necessitatibus inventore molestias.
|
|
78
|
+
</p>
|
|
79
|
+
<blockquote>
|
|
80
|
+
Lorem ipsum dolor sit amet
|
|
81
|
+
</blockquote>
|
|
82
|
+
<p>
|
|
83
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, quidem repellendus at soluta vitae fuga ratione ad ullam? Placeat accusamus quam facere eveniet laboriosam praesentium accusantium. Fuga eum soluta molestiae?
|
|
84
|
+
</p>
|
|
85
|
+
<table>
|
|
86
|
+
<thead>
|
|
87
|
+
<tr>
|
|
88
|
+
<th>No</th>
|
|
89
|
+
<th>Product</th>
|
|
90
|
+
<th>Price</th>
|
|
91
|
+
</tr>
|
|
92
|
+
</thead>
|
|
93
|
+
<tbody>
|
|
94
|
+
<tr>
|
|
95
|
+
<td>1</td>
|
|
96
|
+
<td>Fried Rice</td>
|
|
97
|
+
<td>5.00</td>
|
|
98
|
+
</tr>
|
|
99
|
+
<tr>
|
|
100
|
+
<td>2</td>
|
|
101
|
+
<td>Ayam Penyet</td>
|
|
102
|
+
<td>7.0</td>
|
|
103
|
+
</tr>
|
|
104
|
+
<tr>
|
|
105
|
+
<td>3</td>
|
|
106
|
+
<td>Something random</td>
|
|
107
|
+
<td>9.0</td>
|
|
108
|
+
</tr>
|
|
109
|
+
</tbody>
|
|
110
|
+
</table>
|
|
111
|
+
<p>
|
|
112
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, maxime, soluta, perspiciatis ratione suscipit voluptate numquam dicta facere reiciendis saepe laboriosam molestias facilis officiis impedit sunt quo enim quaerat cum.
|
|
113
|
+
</p>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="large-3 small-3 columns">
|
|
116
|
+
<div class="sidebar">
|
|
117
|
+
<h2>SIDEBAR</h2>
|
|
118
|
+
<p>
|
|
119
|
+
<em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, autem.</em>
|
|
120
|
+
</p>
|
|
121
|
+
<h3>MENU</h3>
|
|
122
|
+
<p>Select your dishes</p>
|
|
123
|
+
<ul class="bullet-list">
|
|
124
|
+
<li>Dolorum, rerum, minima</li>
|
|
125
|
+
<li>Laboriosam in atque</li>
|
|
126
|
+
<li>Quo, provident</li>
|
|
127
|
+
<li>Consectetur adipisicing</li>
|
|
128
|
+
<li>Architecto excepturi</li>
|
|
129
|
+
</ul>
|
|
130
|
+
<p>
|
|
131
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, pariatur sunt ea adipisci eius dolorum aspernatur asperiores alias laudantium optio.
|
|
132
|
+
</p>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</article>
|
|
138
|
+
</div>
|
|
139
|
+
</div> -->
|
|
140
|
+
|
|
141
|
+
<!-- <div class="row">
|
|
142
|
+
<div class="large-12 columns">
|
|
143
|
+
<h1>EDGE Code</h1>
|
|
144
|
+
<h3>Markup</h3>
|
|
145
|
+
<pre class="line-numbers" data-lang="markup" data-line="7"><code>
|
|
146
|
+
<pre class="line-numbers" data-lang="markup" data-line="7"><code>
|
|
147
|
+
Unlike other code-highlighter, you don't need to escape < into &lt;
|
|
148
|
+
<div> ... </div>
|
|
149
|
+
|
|
150
|
+
Add class ".line-numbers" to include numbering
|
|
151
|
+
|
|
152
|
+
Add attribute data-line to highlight specific lines
|
|
153
|
+
The value can be a range like "5-7"
|
|
154
|
+
</code></pre>
|
|
155
|
+
</code></pre>
|
|
156
|
+
|
|
157
|
+
<h3>Python</h3>
|
|
158
|
+
<pre data-lang="python"><code>
|
|
159
|
+
def do_something():
|
|
160
|
+
print("Hello World")
|
|
161
|
+
</code></pre>
|
|
162
|
+
|
|
163
|
+
<h3>CSS</h3>
|
|
164
|
+
<pre data-lang="css" class="line-numbers" data-line="1-3"><code>
|
|
165
|
+
*,
|
|
166
|
+
*:before,
|
|
167
|
+
*:after {
|
|
168
|
+
-webkit-box-sizing: border-box;
|
|
169
|
+
-moz-box-sizing: border-box;
|
|
170
|
+
box-sizing: border-box; }
|
|
171
|
+
</code></pre>
|
|
172
|
+
|
|
173
|
+
<h3>Javascript</h3>
|
|
174
|
+
<pre class="line-numbers" data-lang="javascript" data-line="2"><code>
|
|
175
|
+
$(document).ready(function() {
|
|
176
|
+
var text = "Hello World";
|
|
177
|
+
var num = 5 + 10;
|
|
178
|
+
});
|
|
179
|
+
</code></pre>
|
|
180
|
+
|
|
181
|
+
<h3>Ruby</h3>
|
|
182
|
+
<pre data-lang="ruby"><code>
|
|
183
|
+
def do_something():
|
|
184
|
+
puts "Hello World"
|
|
185
|
+
end
|
|
186
|
+
</code></pre>
|
|
187
|
+
</div>
|
|
188
|
+
</div> -->
|
|
189
|
+
|
|
190
|
+
<div class="row" data-page="block-grid">
|
|
191
|
+
<div class="large-12 columns">
|
|
192
|
+
<div class="demo-block-grid">
|
|
193
|
+
<h1>Block Grid</h1>
|
|
194
|
+
<ul class="large-tile-7 small-tile-5">
|
|
195
|
+
<li><p>1</p></li>
|
|
196
|
+
<li><p>1</p></li>
|
|
197
|
+
<li><p>1</p></li>
|
|
198
|
+
<li><p>1</p></li>
|
|
199
|
+
<li><p>1</p></li>
|
|
200
|
+
<li><p>1</p></li>
|
|
201
|
+
<li><p>1</p></li>
|
|
202
|
+
<li><p>1</p></li>
|
|
203
|
+
<li><p>1</p></li>
|
|
204
|
+
<li><p>1</p></li>
|
|
205
|
+
<li><p>1</p></li>
|
|
206
|
+
<li><p>1</p></li>
|
|
207
|
+
</ul>
|
|
208
|
+
<h2>Block Grid Collapsed</h2>
|
|
209
|
+
<ul class="large-tile-7 small-tile-5 collapse">
|
|
210
|
+
<li><p>1</p></li>
|
|
211
|
+
<li><p>1</p></li>
|
|
212
|
+
<li><p>1</p></li>
|
|
213
|
+
<li><p>1</p></li>
|
|
214
|
+
<li><p>1</p></li>
|
|
215
|
+
<li><p>1</p></li>
|
|
216
|
+
<li><p>1</p></li>
|
|
217
|
+
<li><p>1</p></li>
|
|
218
|
+
<li><p>1</p></li>
|
|
219
|
+
<li><p>1</p></li>
|
|
220
|
+
<li><p>1</p></li>
|
|
221
|
+
<li><p>1</p></li>
|
|
222
|
+
</ul>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
<!-- <div class="row" data-page="grid">
|
|
229
|
+
<div class="large-12 columns">
|
|
230
|
+
<div class="demo-grid">
|
|
231
|
+
<h1>Grid</h1>
|
|
232
|
+
<div class="row">
|
|
233
|
+
<div class="large-6 columns"><p>6</p></div>
|
|
234
|
+
<div class="large-6 columns"><p>6</p></div>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="row">
|
|
237
|
+
<div class="large-8 columns"><p>8</p></div>
|
|
238
|
+
<div class="large-4 columns"><p>4</p></div>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<h1>Collapsed Grid</h1>
|
|
242
|
+
<div class="row collapse">
|
|
243
|
+
<div class="large-6 columns"><p>6</p></div>
|
|
244
|
+
<div class="large-6 columns"><p>6</p></div>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="row collapse">
|
|
247
|
+
<div class="large-8 columns"><p>8</p></div>
|
|
248
|
+
<div class="large-4 columns"><p>4</p></div>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<h1>Responsive Grid</h1>
|
|
252
|
+
<div class="row">
|
|
253
|
+
<div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
|
|
254
|
+
<div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
|
|
255
|
+
<div class="large-4 small-4 columns"><p>large-4 small-4</p></div>
|
|
256
|
+
</div>
|
|
257
|
+
<div class="row">
|
|
258
|
+
<div class="large-6 small-9 columns"><p>large-6 small-9</p></div>
|
|
259
|
+
<div class="large-6 small-3 columns"><p>large-6 small-3</p></div>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<h1>Offset and Source Ordering</h1>
|
|
263
|
+
<div class="row">
|
|
264
|
+
<div class="large-3 small-5 columns">
|
|
265
|
+
<p>
|
|
266
|
+
<span class="hide-for-small">large-3</span><span class="hide-for-large">small-5</span>
|
|
267
|
+
</p>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="large-6 large-offset-3 small-5 columns">
|
|
270
|
+
<p>
|
|
271
|
+
<span class="hide-for-small">large-6 offset-3</span><span class="hide-for-large">small-5</span>
|
|
272
|
+
</p>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
<p>collapsed</p>
|
|
276
|
+
<div class="row collapse">
|
|
277
|
+
<div class="large-3 large-offset-3 small-5 columns">
|
|
278
|
+
<p>
|
|
279
|
+
<span class="hide-for-small">large-3 offset-3</span><span class="hide-for-large">small-5</span>
|
|
280
|
+
</p>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="large-6 small-5 small-offset-2 columns">
|
|
283
|
+
<p>
|
|
284
|
+
<span class="hide-for-small">large-6</span><span class="hide-for-large">small-5 offset-2</span>
|
|
285
|
+
</p>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
<div class="row">
|
|
289
|
+
<div class="large-3 push-9 columns"><p>push-9</p></div>
|
|
290
|
+
<div class="large-9 pull-3 columns"><p>pull-3, last-child</p></div>
|
|
291
|
+
</div>
|
|
292
|
+
<div class="row collapse">
|
|
293
|
+
<p>collapsed</p>
|
|
294
|
+
<div class="large-3 push-9 columns"><p>push-9</p></div>
|
|
295
|
+
<div class="large-9 pull-3 columns"><p>pull-3, last-child</p></div>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
<h1>Nested Grid</h1>
|
|
299
|
+
<div class="row">
|
|
300
|
+
<div class="large-12 columns">
|
|
301
|
+
<p>12</p>
|
|
302
|
+
<div class="row">
|
|
303
|
+
<div class="large-8 columns">
|
|
304
|
+
<p>8</p>
|
|
305
|
+
<div class="row">
|
|
306
|
+
<div class="large-6 columns"><p>6</p></div>
|
|
307
|
+
<div class="large-6 columns"><p>6</p></div>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
</div>
|
|
311
|
+
<div class="large-4 columns">
|
|
312
|
+
<p>4</p>
|
|
313
|
+
<div class="row">
|
|
314
|
+
<div class="large-7 columns"><p>7</p></div>
|
|
315
|
+
<div class="large-5 columns"><p>5</p></div>
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
<h1>Responsive Nested Grid</h1>
|
|
323
|
+
<div class="row">
|
|
324
|
+
<div class="large-12 small-12 columns">
|
|
325
|
+
<p>12-12</p>
|
|
326
|
+
<div class="row">
|
|
327
|
+
<div class="large-8 small-8 columns">
|
|
328
|
+
<p>8-8</p>
|
|
329
|
+
<div class="row">
|
|
330
|
+
<div class="large-6 small-9 columns"><p>6-9</p></div>
|
|
331
|
+
<div class="large-6 small-3 columns"><p>6-3</p></div>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
<div class="large-4 small-4 columns">
|
|
335
|
+
<p>4-4</p>
|
|
336
|
+
<div class="row">
|
|
337
|
+
<div class="large-7 small-7 columns"><p>7-7</p></div>
|
|
338
|
+
<div class="large-5 small-5 columns"><p>5-5</p></div>
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
|
|
345
|
+
<h1>Responsive offset and Centering</h1>
|
|
346
|
+
<div class="row">
|
|
347
|
+
<div class="large-8 large-offset-2 small-5 small-offset-3 columns">
|
|
348
|
+
<p>large-8 large-offset-2 small-5 off-3</p>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
<div class="row">
|
|
352
|
+
<div class="large-6 large-centered small-8 columns">
|
|
353
|
+
<p>large-6 large-centered small-8 small-centered</p>
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
356
|
+
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</div> -->
|
|
360
|
+
|
|
361
|
+
<!-- <div class="row" data-page="form">
|
|
362
|
+
<div class="large-6 columns">
|
|
363
|
+
<h1>Form Grid</h1>
|
|
364
|
+
<div class="form-row">
|
|
365
|
+
<label for="" class="large-4 small-12 form-columns">Label</label>
|
|
366
|
+
<input type="text" class="large-8 small-12 form-columns" placeholder="Normal input text">
|
|
367
|
+
</div>
|
|
368
|
+
|
|
369
|
+
<pre class="brush:xhtml;">
|
|
370
|
+
<div class="form-row">
|
|
371
|
+
<label class="large-4 small-12 form-columns"></label>
|
|
372
|
+
<input type="text" class="large-8 small-12 form-columns">
|
|
373
|
+
</div>
|
|
374
|
+
</pre>
|
|
375
|
+
|
|
376
|
+
<h1>Form Grid with Offset and Centered</h1>
|
|
377
|
+
<div class="form-row">
|
|
378
|
+
<input type="text" class="large-8 large-offset-4 form-columns" placeholder="Input with offset">
|
|
379
|
+
</div>
|
|
380
|
+
<div class="form-row">
|
|
381
|
+
<input type="text" class="large-8 large-centered form-columns" placeholder="Centered Input">
|
|
382
|
+
</div>
|
|
383
|
+
|
|
384
|
+
<pre class="brush:xhtml;">
|
|
385
|
+
<div class="form-row">
|
|
386
|
+
<input type="text" class="large-8 large-offset-4 form-columns" placeholder="Input with offset">
|
|
387
|
+
</div>
|
|
388
|
+
<div class="form-row">
|
|
389
|
+
<input type="text" class="large-8 large-centered form-columns" placeholder="Centered Input">
|
|
390
|
+
</div>
|
|
391
|
+
</pre>
|
|
392
|
+
|
|
393
|
+
<h1>Prefix and Postfix</h1>
|
|
394
|
+
|
|
395
|
+
<div class="form-row">
|
|
396
|
+
<label for="" class="prefix large-4 small-6 form-columns">Prefix Label</label>
|
|
397
|
+
<input type="text" class="large-8 small-6 form-columns" placeholder="Normal Input text">
|
|
398
|
+
<div class="form-row">
|
|
399
|
+
<input type="text" class="large-8 form-columns" placeholder="Your Blog name">
|
|
400
|
+
<label for="" class="postfix large-4 form-columns">.blogspot.com</label>
|
|
401
|
+
</div>
|
|
402
|
+
|
|
403
|
+
<pre class="brush:xhtml;">
|
|
404
|
+
<div class="form-row">
|
|
405
|
+
<label class="prefix large-4 small-6 form-columns"></label>
|
|
406
|
+
<input type="text" class="large-8 small-6 form-columns">
|
|
407
|
+
<div class="form-row">
|
|
408
|
+
<input type="text" class="large-8 form-columns">
|
|
409
|
+
<label class="postfix large-4 form-columns"></label>
|
|
410
|
+
</div>
|
|
411
|
+
</pre>
|
|
412
|
+
|
|
413
|
+
<h1>Textarea and Select</h1>
|
|
414
|
+
<div class="form-row">
|
|
415
|
+
<label for="" class="large-4 form-columns">Label</label>
|
|
416
|
+
<textarea placeholder="Normal Input text" class="large-8 form-columns" rows="5"></textarea>
|
|
417
|
+
</div>
|
|
418
|
+
<div class="form-row">
|
|
419
|
+
<label for="" class="large-4 form-columns">Select Dropdown</label>
|
|
420
|
+
<select name="" id="" class="large-8 form-columns">
|
|
421
|
+
<option value="">Asia</option>
|
|
422
|
+
<option value="">America</option>
|
|
423
|
+
<option value="">Europe</option>
|
|
424
|
+
<option value="">Australia</option>
|
|
425
|
+
<option value="">Africa</option>
|
|
426
|
+
<option value="">Antartica</option>
|
|
427
|
+
</select>
|
|
428
|
+
</div>
|
|
429
|
+
|
|
430
|
+
<pre>
|
|
431
|
+
<div class="form-row">
|
|
432
|
+
<label class="large-4 form-columns">Label</label>
|
|
433
|
+
<textarea class="large-8 form-columns"></textarea>
|
|
434
|
+
</div>
|
|
435
|
+
<div class="form-row">
|
|
436
|
+
<label class="large-4 form-columns">Select Dropdown</label>
|
|
437
|
+
<select class="large-8 form-columns">
|
|
438
|
+
<option>...</option>
|
|
439
|
+
</select>
|
|
440
|
+
</div>
|
|
441
|
+
</pre>
|
|
442
|
+
|
|
443
|
+
<input type="submit" value="Submit">
|
|
444
|
+
</div>
|
|
445
|
+
</div> -->
|
|
446
|
+
|
|
447
|
+
<div id="footer-push"></div>
|
|
49
448
|
</div>
|
|
50
449
|
<footer id="footer">
|
|
51
450
|
</footer>
|
|
52
|
-
|
|
53
|
-
<script src="js-docs/jquery.min.js"></script>
|
|
54
|
-
<script>
|
|
55
|
-
(function () {
|
|
56
|
-
var htmlText = $("pre > code").html();
|
|
57
|
-
// remove trailing and following line break
|
|
58
|
-
var filteredText = htmlText.replace(/</g, "<").replace(/^\n/, "").replace(/\n\s+$/, "");
|
|
59
|
-
|
|
60
|
-
// split the lines and count the offset
|
|
61
|
-
var lines = filteredText.split("\n");
|
|
62
|
-
var offset = lines[0].match(/^\s*/)[ 0 ].length;
|
|
63
|
-
|
|
64
|
-
// remove excess whitespace from each line
|
|
65
|
-
lines = lines.map(function(line) {
|
|
66
|
-
return line.slice(offset);
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
//.replace(/(\n)\s+/g, "$1").replace(/^\n/, "");
|
|
70
|
-
$("pre > code").html(lines.join("\n") );
|
|
71
|
-
}() );
|
|
72
|
-
</script>
|
|
73
451
|
</body>
|
|
74
452
|
</html>
|