compass-52-plugin 0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/Gemfile.lock +18 -0
- data/README.mkdn +42 -0
- data/Rakefile +2 -0
- data/compass-52-plugin.gemspec +22 -0
- data/lib/fiftytwo.rb +2 -0
- data/stylesheets/52/_general.scss +218 -0
- data/stylesheets/52/_grid.scss +59 -0
- data/stylesheets/52/_reset.scss +96 -0
- data/templates/project/html5.js +2 -0
- data/templates/project/index.html.haml +221 -0
- data/templates/project/manifest.rb +17 -0
- data/templates/project/styles.scss +37 -0
- metadata +80 -0
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
data/README.mkdn
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
52 Framework Compass Plugin
|
|
2
|
+
=============================
|
|
3
|
+
|
|
4
|
+
This plugin adds 52 Framework to [Compass](http://compass-style.org/).
|
|
5
|
+
|
|
6
|
+
For more information, visit the official site at [http://www.52framework.com/](http://www.52framework.com/)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
Installation
|
|
10
|
+
============
|
|
11
|
+
|
|
12
|
+
gem install compass-52-plugin
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
Getting Started
|
|
16
|
+
===============
|
|
17
|
+
|
|
18
|
+
To create a Compass project using 52 Framework, enter:
|
|
19
|
+
|
|
20
|
+
compass create -r fiftytwo my_project --using 52
|
|
21
|
+
|
|
22
|
+
The above command will generate a `styles.sass` file with the reset, general and grid stylesheets included.
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
Populating the Grid
|
|
26
|
+
====================
|
|
27
|
+
|
|
28
|
+
To set an element as a row, use the `row` mixin:
|
|
29
|
+
|
|
30
|
+
header
|
|
31
|
+
@include row
|
|
32
|
+
|
|
33
|
+
If the row is an inner row (a row inside another row), use `row(true)`:
|
|
34
|
+
|
|
35
|
+
header
|
|
36
|
+
.left-block
|
|
37
|
+
@include row(true)
|
|
38
|
+
|
|
39
|
+
To calculate column widths, use the `column(n)` mixin:
|
|
40
|
+
|
|
41
|
+
article
|
|
42
|
+
@include column(5)
|
data/Rakefile
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
|
3
|
+
|
|
4
|
+
Gem::Specification.new do |s|
|
|
5
|
+
s.name = "compass-52-plugin"
|
|
6
|
+
s.version = "0.1"
|
|
7
|
+
s.platform = Gem::Platform::RUBY
|
|
8
|
+
s.authors = ["Fabio Kreusch"]
|
|
9
|
+
s.email = ["fabio@kreusch.com.br"]
|
|
10
|
+
s.homepage = "http://github.com/fabiokr/compass-52-framework"
|
|
11
|
+
s.summary = %q{Compass compatible port of 52 Framework}
|
|
12
|
+
s.description = %q{52 is an HTML5 and CSS3 grid cross-browser framework.}
|
|
13
|
+
|
|
14
|
+
s.rubyforge_project = "compass-52-plugin"
|
|
15
|
+
|
|
16
|
+
s.add_dependency "compass", ">= 0.10"
|
|
17
|
+
|
|
18
|
+
s.files = `git ls-files`.split("\n")
|
|
19
|
+
|
|
20
|
+
s.has_rdoc = false
|
|
21
|
+
s.require_paths = ["lib"]
|
|
22
|
+
end
|
data/lib/fiftytwo.rb
ADDED
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
/* 52framework General StyleSheet - contains styles for all the HTML elements this framework supports */
|
|
2
|
+
|
|
3
|
+
body {
|
|
4
|
+
font-family: Arial, Helvetica, sans-serif;
|
|
5
|
+
font-size: 52% / 1.52em;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* ** ** Common Addative Classes ** ** */
|
|
9
|
+
|
|
10
|
+
.left {
|
|
11
|
+
float: left;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.right {
|
|
15
|
+
float: right;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.clear {
|
|
19
|
+
clear: both;
|
|
20
|
+
display: block;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
visibility: hidden;
|
|
23
|
+
width: 0px;
|
|
24
|
+
height: 0px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.hide {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.align_right {
|
|
32
|
+
text-align: right;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.align_left {
|
|
36
|
+
text-align: left;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.align_center {
|
|
40
|
+
text-align: center;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.align_justify {
|
|
44
|
+
text-align: justify;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
a {
|
|
48
|
+
color: #525252;
|
|
49
|
+
&:hover, &:focus {
|
|
50
|
+
text-decoration: underline; }
|
|
51
|
+
&:active, &:visited {}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
blockquote {
|
|
55
|
+
font-family: Georgia,"Times New Roman", Times, serif;
|
|
56
|
+
margin: 5px;
|
|
57
|
+
padding: 10px;
|
|
58
|
+
font-size: 1.52em;
|
|
59
|
+
color: #999;
|
|
60
|
+
font-style: italic;
|
|
61
|
+
line-height: 1.3em;
|
|
62
|
+
width: 100%;
|
|
63
|
+
quotes: none;
|
|
64
|
+
&.left {
|
|
65
|
+
border-right: 1px dashed #ccc;
|
|
66
|
+
width: 35%;
|
|
67
|
+
}
|
|
68
|
+
&.right {
|
|
69
|
+
border-left: 1px dashed #ccc;
|
|
70
|
+
width: 35%;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* ** ** Header Styles ** ** */
|
|
75
|
+
|
|
76
|
+
h1, h2, h3, h4, h5 {
|
|
77
|
+
margin: 0 0 0.5em;
|
|
78
|
+
line-height: 1.1em;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
h1 {
|
|
82
|
+
font-size: 2.52em;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
h2 {
|
|
86
|
+
font-size: 1.952em;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
h3 {
|
|
90
|
+
font-size: 1.652em;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
h4 {
|
|
94
|
+
font-size: 1.452em;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
h5 {
|
|
98
|
+
font-size: 1.252em;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
h6 {
|
|
102
|
+
font-size: 1.52em;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* ** ** ul li's ** ** */
|
|
106
|
+
|
|
107
|
+
ul li {
|
|
108
|
+
margin-left: 25px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* ** ** custom select color ** ** */
|
|
112
|
+
|
|
113
|
+
::selection {
|
|
114
|
+
background: #525252; /* Safari */
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
::-moz-selection {
|
|
118
|
+
background: #525252; /* Firefox */
|
|
119
|
+
color: #fff;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* ** ** paragraph styling ** ** */
|
|
123
|
+
|
|
124
|
+
p {
|
|
125
|
+
margin: 0 0 1.52em;
|
|
126
|
+
img {
|
|
127
|
+
&.left {
|
|
128
|
+
float: left;
|
|
129
|
+
margin: 1.52em 1.52em 1.52em 0;
|
|
130
|
+
padding: 0;
|
|
131
|
+
}
|
|
132
|
+
&.right {
|
|
133
|
+
float: right;
|
|
134
|
+
margin: 1.52em 0 1.52em 1.52em;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* ** ** forms ** ** */
|
|
140
|
+
|
|
141
|
+
form {
|
|
142
|
+
fieldset {
|
|
143
|
+
-webkit-border-radius: 5px;
|
|
144
|
+
-moz-border-radius: 5px;
|
|
145
|
+
border-radius: 5px;
|
|
146
|
+
padding-top: 5px;
|
|
147
|
+
padding-left: 5px;
|
|
148
|
+
border: 1px solid #ccc;
|
|
149
|
+
legend {
|
|
150
|
+
font-size: 1.4em;
|
|
151
|
+
padding: 0 5px;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
input {
|
|
155
|
+
&[type=text], &[type=email], &[type=url] {
|
|
156
|
+
-moz-border-radius: 4px;
|
|
157
|
+
-webkit-border-radius: 4px;
|
|
158
|
+
border-radius: 4px;
|
|
159
|
+
height: 20px;
|
|
160
|
+
margin-bottom: 5px;
|
|
161
|
+
border: 1px solid #ccc;
|
|
162
|
+
padding: 4px 0 1px 5px;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
label {
|
|
166
|
+
display: block;
|
|
167
|
+
height: 20px;
|
|
168
|
+
font-size: 1.2em;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
strong {
|
|
173
|
+
font-weight: 600;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
em {
|
|
177
|
+
font-style: italic;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
dfn {
|
|
181
|
+
font-style: italic;
|
|
182
|
+
font-weight: 600;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
sup, sub {
|
|
186
|
+
line-height: 0;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
abbr, acronym {
|
|
190
|
+
border-bottom: 1px dashed #ccc;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
address {
|
|
194
|
+
margin: 0 0 1.5em;
|
|
195
|
+
font-style: italic;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
del {
|
|
199
|
+
color: #666;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
pre, code, tt {
|
|
203
|
+
font: 1em 'andale mono', 'lucida console', monospace;
|
|
204
|
+
line-height: 1.5;
|
|
205
|
+
display: block;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
code {
|
|
209
|
+
background-color: #d5d2d8;
|
|
210
|
+
display: block;
|
|
211
|
+
padding: 0px 2px 4px 26px;
|
|
212
|
+
line-height: 1.67em;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
pre {
|
|
216
|
+
margin: 1.5em 0;
|
|
217
|
+
white-space: pre;
|
|
218
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/* 52 framework grid */
|
|
2
|
+
|
|
3
|
+
$max-columns: 16 !default;
|
|
4
|
+
$column-width: 40px !default;
|
|
5
|
+
$gutter-width: 10px !default;
|
|
6
|
+
|
|
7
|
+
@mixin width($columns, $side_gutters: false) {
|
|
8
|
+
@if $side_gutters == true {
|
|
9
|
+
width: ($column-width + ($gutter-width * 2)) * ($columns);
|
|
10
|
+
} @else {
|
|
11
|
+
width: ($column-width + ($gutter-width * 2)) * ($columns - 1) + $column-width;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.col {
|
|
16
|
+
margin-left: $gutter-width;
|
|
17
|
+
margin-right: $gutter-width;
|
|
18
|
+
display: inline;
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
float: left;
|
|
21
|
+
position: relative;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.row {
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
margin: 0 auto;
|
|
27
|
+
@include width($max-columns, true);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.inner_row {
|
|
31
|
+
margin: 0 -$gutter-width;
|
|
32
|
+
display: inline-block;
|
|
33
|
+
width: auto;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.row .row {
|
|
37
|
+
@extend .inner_row;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@mixin column($columns) {
|
|
41
|
+
@extend .col;
|
|
42
|
+
@include width($columns);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@mixin row($inner: false) {
|
|
46
|
+
@extend .row;
|
|
47
|
+
@if $inner == true {
|
|
48
|
+
@extend .inner_row;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@for $i from 1 through $max-columns {
|
|
53
|
+
.col_#{$i} {
|
|
54
|
+
@include column($i)
|
|
55
|
+
}
|
|
56
|
+
.width_#{$i} {
|
|
57
|
+
@include width($i)
|
|
58
|
+
}
|
|
59
|
+
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
/*
|
|
2
|
+
html5doctor.com Reset Stylesheet
|
|
3
|
+
v1.4
|
|
4
|
+
2009-07-27
|
|
5
|
+
Author: Richard Clark - http://richclarkdesign.com
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
border: 0;
|
|
12
|
+
outline: 0;
|
|
13
|
+
font-size: 100%;
|
|
14
|
+
vertical-align: baseline;
|
|
15
|
+
background: transparent;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
body {
|
|
19
|
+
line-height: 1;
|
|
20
|
+
font: 75% / 1.5em Arial, Helvetica, "Liberation sans", "Bitstream Vera Sans", sans-serif;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
article, aside, dialog, figure, footer, header, hgroup, nav, section {
|
|
24
|
+
display: block;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
nav ul {
|
|
28
|
+
list-style: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
blockquote, q {
|
|
32
|
+
quotes: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
blockquote {
|
|
36
|
+
&:before, &:after {
|
|
37
|
+
content: '';
|
|
38
|
+
content: none;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
q {
|
|
43
|
+
&:before, &:after {
|
|
44
|
+
content: '';
|
|
45
|
+
content: none;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
a {
|
|
50
|
+
margin: 0;
|
|
51
|
+
padding: 0;
|
|
52
|
+
border: 0;
|
|
53
|
+
font-size: 100%;
|
|
54
|
+
vertical-align: baseline;
|
|
55
|
+
background: transparent;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
ins {
|
|
59
|
+
background-color: #ff9;
|
|
60
|
+
color: #000;
|
|
61
|
+
text-decoration: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
mark {
|
|
65
|
+
background-color: #ff9;
|
|
66
|
+
color: #000;
|
|
67
|
+
font-style: italic;
|
|
68
|
+
font-weight: bold;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
del {
|
|
72
|
+
text-decoration: line-through;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
abbr[title], dfn[title] {
|
|
76
|
+
border-bottom: 1px dotted #000;
|
|
77
|
+
cursor: help;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
table {
|
|
81
|
+
border-collapse: collapse;
|
|
82
|
+
border-spacing: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
hr {
|
|
86
|
+
display: block;
|
|
87
|
+
height: 1px;
|
|
88
|
+
border: 0;
|
|
89
|
+
border-top: 1px solid #cccccc;
|
|
90
|
+
margin: 1em 0;
|
|
91
|
+
padding: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
input, select {
|
|
95
|
+
vertical-align: middle;
|
|
96
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
|
|
2
|
+
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
!!! 5
|
|
2
|
+
%html{:lang => "en"}
|
|
3
|
+
%head
|
|
4
|
+
%meta{:charset => "utf-8"}
|
|
5
|
+
%title 52Framework -- brought to you by the enavu network
|
|
6
|
+
%meta{:content => "", :name => "keywords"}/
|
|
7
|
+
%meta{:content => "", :name => "description"}/
|
|
8
|
+
/ this is the javascript allowing html5 to run in older browsers
|
|
9
|
+
%script{:src => "javascripts/html5.js"}
|
|
10
|
+
%link{:href => "stylesheets/styles.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}/
|
|
11
|
+
:css
|
|
12
|
+
/* Feel free to remove these styles, they are for demo page */
|
|
13
|
+
|
|
14
|
+
header {height:112px; position:relative; margin-bottom:5px;}
|
|
15
|
+
header .logo {font-size:2.5em; height:52px; padding-top:28px; font-weight:700; text-shadow:1px 1px 2px #000; color:#fff; filter: Shadow(Color=#666666, Direction=135, Strength=3);}
|
|
16
|
+
header .statement {width:20%; text-align:right; padding-top:30px;}
|
|
17
|
+
header nav { background-color:#525252; color:#fff; height:30px;}
|
|
18
|
+
nav ul {list-style:none;}
|
|
19
|
+
nav ul li {float:left; margin-left:5px;}
|
|
20
|
+
nav ul li a {display:block; color:#fff; text-decoration:none; padding:2px 8px; margin-top:8px;
|
|
21
|
+
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;}
|
|
22
|
+
nav ul li a:hover, nav ul li.active a {background-color:#fff; color:#000;}
|
|
23
|
+
aside {min-height:525px;}
|
|
24
|
+
|
|
25
|
+
.submit, .submit:visited {
|
|
26
|
+
background: #525252;
|
|
27
|
+
display: inline-block;
|
|
28
|
+
padding: 5px 10px 6px;
|
|
29
|
+
color: #fff;
|
|
30
|
+
-moz-border-radius: 5px;
|
|
31
|
+
-webkit-border-radius: 5px;
|
|
32
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
|
33
|
+
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
|
34
|
+
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
|
35
|
+
border:none;
|
|
36
|
+
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
|
|
37
|
+
position: relative;
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
margin-bottom:5px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
footer { font-size:.8em; }
|
|
43
|
+
.grid p {
|
|
44
|
+
font:6em "Trebuchet MS", Arial, Helvetica, sans-serif;
|
|
45
|
+
color: #000;
|
|
46
|
+
text-align: center;
|
|
47
|
+
border: 1px solid #000;
|
|
48
|
+
margin: 0 0 20px 0;
|
|
49
|
+
}
|
|
50
|
+
%body
|
|
51
|
+
.container
|
|
52
|
+
%header
|
|
53
|
+
.logo.left 52framework
|
|
54
|
+
.statement.right The framework from the future!
|
|
55
|
+
.clear
|
|
56
|
+
%nav
|
|
57
|
+
%ul
|
|
58
|
+
%li.active
|
|
59
|
+
%a{:href => "http://52framework.com/demo"} Home
|
|
60
|
+
%li
|
|
61
|
+
%a{:href => "http://52framework.com/documentation"} Documentation
|
|
62
|
+
%li
|
|
63
|
+
%a{:href => "http://52framework.com/about"} About
|
|
64
|
+
%li
|
|
65
|
+
%a{:href => "http://enavu.com"} enavu
|
|
66
|
+
.clear
|
|
67
|
+
%aside
|
|
68
|
+
%h2 Form Elements
|
|
69
|
+
%form
|
|
70
|
+
%fieldset
|
|
71
|
+
%legend Fieldset
|
|
72
|
+
%label{:for => "normalText"} Normal Text
|
|
73
|
+
%input#normalText{:name => "normalText", :type => "text", :value => "normal text field"}/
|
|
74
|
+
%label{:for => "email"} Email
|
|
75
|
+
%input#email{:name => "email", :type => "email", :value => "email@field.com"}/
|
|
76
|
+
%label{:for => "url"} URL
|
|
77
|
+
%input#url{:name => "url", :type => "url", :value => "url.com"}/
|
|
78
|
+
%label{:for => "required"} Required
|
|
79
|
+
%input#required{:name => "required", :required => "", :type => "text", :value => "required"}/
|
|
80
|
+
.clear
|
|
81
|
+
%button.submit submit »
|
|
82
|
+
%section.content
|
|
83
|
+
%article
|
|
84
|
+
%h1 This is a title h1
|
|
85
|
+
%blockquote.right
|
|
86
|
+
This is what a blockquote will look like, floated right.
|
|
87
|
+
%br/
|
|
88
|
+
Testing a second line inside the blockquote.
|
|
89
|
+
%p
|
|
90
|
+
Lorem ipsum
|
|
91
|
+
%a{:href => "#"} link one
|
|
92
|
+
dolor sit amet, consectetur adipiscing elit. Nullam a purus ac est dapibus feugiat eu eget nulla. Sed molestie feugiat viverra. Pellentesque consectetur, leo in faucibus congue, elit purus bibendum tellus, non tincidunt tortor mauris in sem. Suspendisse sodales metus eget sem suscipit eleifend. Proin porttitor, ante vel egestas pretium, nulla eros mollis eros, dapibus molestie lacus mi at sapien. Fusce risus risus, vulputate vel bibendum nec, accumsan non lacus.Fusce viverra mollis sapien non mattis. Suspendisse id est sapien. Aliquam quis tellus sed lorem fermentum rutrum in eget urna. Mauris ac dolor sit amet tellus tristique eleifend. Morbi venenatis ultricies eleifend. Nunc arcu lorem, feugiat pulvinar laoreet convallis, consequat sed elit. Suspendisse potenti.Vivamus a turpis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi blandit erat eget purus gravida nec aliquam lectus sollicitudin. Aenean semper tortor nunc, dignissim malesuada arcu. Nunc nec massa a erat consectetur porta vitae eu mauris. Donec a orci dolor. Sed ac erat sed ipsum imperdiet accumsan.
|
|
93
|
+
%article
|
|
94
|
+
%h2 This is an h2
|
|
95
|
+
%p
|
|
96
|
+
Nulla facilisi. Etiam eget laoreet turpis. Duis magna odio, volutpat eu varius vitae, interdum eu felis. Pellentesque luctus tincidunt urna vel dictum. Etiam facilisis purus ut lorem aliquet eleifend. Sed porttitor semper turpis mattis iaculis. Vivamus a turpis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi blandit erat eget purus gravida nec aliquam lectus sollicitudin.
|
|
97
|
+
%code
|
|
98
|
+
css {
|
|
99
|
+
%br/
|
|
100
|
+
\-moz-border-radius: 5px;
|
|
101
|
+
%br/
|
|
102
|
+
\-webkit-border-radius: 5px;
|
|
103
|
+
%br/
|
|
104
|
+
\-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
|
105
|
+
%br/
|
|
106
|
+
\-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
|
107
|
+
%br/
|
|
108
|
+
\}
|
|
109
|
+
%p
|
|
110
|
+
Aenean semper tortor nunc, dignissim malesuada arcu. Nunc nec massa a erat consectetur porta vitae eu mauris. Donec a orci dolor. Sed ac erat sed ipsum imperdiet accumsan. Nullam commodo neque adipiscing lacus sagittis sit amet dictum urna vestibulum. Nulla sapien turpis, laoreet in lacinia sed, malesuada sit amet odio. Maecenas cursus mauris vel nunc adipiscing id bibendum ipsum faucibus.
|
|
111
|
+
%article
|
|
112
|
+
%h3 This is an h3
|
|
113
|
+
%p
|
|
114
|
+
Duis ac arcu ante, at lacinia dui. Ut eget justo in nulla rutrum mollis. Mauris euismod justo et quam bibendum laoreet volutpat lorem mollis. In hac habitasse platea dictumst.
|
|
115
|
+
%pre This is a pre tag
|
|
116
|
+
Mauris ut eleifend neque. Duis nulla metus, tempus nec varius quis, tincidunt consectetur nisi. Donec rhoncus quam vel quam bibendum rutrum. Mauris et commodo felis. Nam varius eleifend nulla quis sagittis. Quisque id tortor at dolor dictum interdum.
|
|
117
|
+
%article
|
|
118
|
+
%h2 List Elements
|
|
119
|
+
%ul
|
|
120
|
+
%li List item 1
|
|
121
|
+
%li List item 2
|
|
122
|
+
.clear{:style => "height:20px;"}
|
|
123
|
+
%h2 Other Elements Styling
|
|
124
|
+
%p
|
|
125
|
+
This is <abbr title="title">abbreviation</abbr>
|
|
126
|
+
%br/
|
|
127
|
+
This is <strong>strong</strong>
|
|
128
|
+
%br/
|
|
129
|
+
This is <em>emphasis</em>
|
|
130
|
+
%br/
|
|
131
|
+
This is <b>bold text</b>
|
|
132
|
+
%br/
|
|
133
|
+
This is <i>italic text</i>
|
|
134
|
+
%br/
|
|
135
|
+
This is <cite>cite</cite>
|
|
136
|
+
%br/
|
|
137
|
+
This is <small>small text</small>
|
|
138
|
+
%br/
|
|
139
|
+
This is <big>big text</big>
|
|
140
|
+
%br/
|
|
141
|
+
This is <del>deleted text</del>
|
|
142
|
+
%br/
|
|
143
|
+
This is <ins>inserted text</ins>
|
|
144
|
+
%br/
|
|
145
|
+
This is <dfn>defining instance</dfn>
|
|
146
|
+
%br/
|
|
147
|
+
This is <kbd>user input</kbd>
|
|
148
|
+
%br/
|
|
149
|
+
This is <samp>sample output</samp>
|
|
150
|
+
%br/
|
|
151
|
+
This is <q>inline quotation</q>
|
|
152
|
+
%br/
|
|
153
|
+
These are <sub>subscript</sub> and <sup>superscript</sub
|
|
154
|
+
%br/
|
|
155
|
+
This is <var>a variable</var>
|
|
156
|
+
.clear{:style => "height:10px; border-bottom:1px solid #ccc;"}
|
|
157
|
+
.grid
|
|
158
|
+
.row
|
|
159
|
+
.col_16
|
|
160
|
+
%p 16
|
|
161
|
+
|
|
162
|
+
.row
|
|
163
|
+
.col_8
|
|
164
|
+
%p 8
|
|
165
|
+
.row
|
|
166
|
+
.col_4
|
|
167
|
+
%p 4
|
|
168
|
+
.col_4
|
|
169
|
+
%p 4
|
|
170
|
+
.col_8
|
|
171
|
+
%p 8
|
|
172
|
+
.clear
|
|
173
|
+
|
|
174
|
+
.row
|
|
175
|
+
- (1..16).each do |i|
|
|
176
|
+
%div{:class => "col_1"}
|
|
177
|
+
%p 1
|
|
178
|
+
|
|
179
|
+
.row
|
|
180
|
+
.col_10
|
|
181
|
+
%p 10
|
|
182
|
+
.col_6
|
|
183
|
+
%p 6
|
|
184
|
+
.row
|
|
185
|
+
.col_3
|
|
186
|
+
%p 3
|
|
187
|
+
.col_3
|
|
188
|
+
%p 3
|
|
189
|
+
|
|
190
|
+
.row
|
|
191
|
+
.col_4
|
|
192
|
+
%p 4
|
|
193
|
+
.col_12
|
|
194
|
+
%p 12
|
|
195
|
+
.col_5
|
|
196
|
+
%p 5
|
|
197
|
+
.col_11
|
|
198
|
+
%p 11
|
|
199
|
+
.col_6
|
|
200
|
+
%p 6
|
|
201
|
+
.col_10
|
|
202
|
+
%p 10
|
|
203
|
+
.col_7
|
|
204
|
+
%p 7
|
|
205
|
+
.col_9
|
|
206
|
+
%p 9
|
|
207
|
+
.col_4
|
|
208
|
+
%p 4
|
|
209
|
+
.col_4
|
|
210
|
+
%p 4
|
|
211
|
+
.col_4
|
|
212
|
+
%p 4
|
|
213
|
+
.col_4
|
|
214
|
+
%p 4
|
|
215
|
+
|
|
216
|
+
%footer
|
|
217
|
+
%p.align_left
|
|
218
|
+
All rights reserved 52framework owned by
|
|
219
|
+
%a{:href => "http://enavu.com"} enavu network
|
|
220
|
+
%p.align_right
|
|
221
|
+
Have questions? Contact me at angel@enavu.com | Even if it's just to say thanks!
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
stylesheet "styles.scss", :media => "all"
|
|
2
|
+
javascript 'html5.js'
|
|
3
|
+
html 'index.html.haml'
|
|
4
|
+
|
|
5
|
+
description "52 Framework"
|
|
6
|
+
|
|
7
|
+
help %Q{
|
|
8
|
+
Please see the 52 Framework website for documentation:
|
|
9
|
+
|
|
10
|
+
http://www.52framework.com/
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
welcome_message %Q{
|
|
14
|
+
Please see the 52 Framework website for documentation:
|
|
15
|
+
|
|
16
|
+
http://www.52framework.com/
|
|
17
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/* 52 framework http://www.52framework.com/ */
|
|
2
|
+
|
|
3
|
+
//$max-columns: 16;
|
|
4
|
+
//$column-width: 40px;
|
|
5
|
+
//$gutter-width: 10px;
|
|
6
|
+
|
|
7
|
+
@import "52/reset";
|
|
8
|
+
@import "52/general";
|
|
9
|
+
@import "52/grid";
|
|
10
|
+
|
|
11
|
+
//Your css goes here; Feel free to remove this demo styles!
|
|
12
|
+
|
|
13
|
+
.container, footer {
|
|
14
|
+
@include row;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
aside {
|
|
18
|
+
@include column(4);
|
|
19
|
+
input {
|
|
20
|
+
@include width(3);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
section {
|
|
25
|
+
@include column(12);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
footer {
|
|
29
|
+
p {
|
|
30
|
+
&.align_left {
|
|
31
|
+
@include column(8);
|
|
32
|
+
}
|
|
33
|
+
&.align_right {
|
|
34
|
+
@include column(8);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
metadata
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: compass-52-plugin
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
prerelease:
|
|
5
|
+
version: "0.1"
|
|
6
|
+
platform: ruby
|
|
7
|
+
authors:
|
|
8
|
+
- Fabio Kreusch
|
|
9
|
+
autorequire:
|
|
10
|
+
bindir: bin
|
|
11
|
+
cert_chain: []
|
|
12
|
+
|
|
13
|
+
date: 2011-02-06 00:00:00 -02:00
|
|
14
|
+
default_executable:
|
|
15
|
+
dependencies:
|
|
16
|
+
- !ruby/object:Gem::Dependency
|
|
17
|
+
name: compass
|
|
18
|
+
prerelease: false
|
|
19
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
|
20
|
+
none: false
|
|
21
|
+
requirements:
|
|
22
|
+
- - ">="
|
|
23
|
+
- !ruby/object:Gem::Version
|
|
24
|
+
version: "0.10"
|
|
25
|
+
type: :runtime
|
|
26
|
+
version_requirements: *id001
|
|
27
|
+
description: 52 is an HTML5 and CSS3 grid cross-browser framework.
|
|
28
|
+
email:
|
|
29
|
+
- fabio@kreusch.com.br
|
|
30
|
+
executables: []
|
|
31
|
+
|
|
32
|
+
extensions: []
|
|
33
|
+
|
|
34
|
+
extra_rdoc_files: []
|
|
35
|
+
|
|
36
|
+
files:
|
|
37
|
+
- .gitignore
|
|
38
|
+
- Gemfile
|
|
39
|
+
- Gemfile.lock
|
|
40
|
+
- README.mkdn
|
|
41
|
+
- Rakefile
|
|
42
|
+
- compass-52-plugin.gemspec
|
|
43
|
+
- lib/fiftytwo.rb
|
|
44
|
+
- stylesheets/52/_general.scss
|
|
45
|
+
- stylesheets/52/_grid.scss
|
|
46
|
+
- stylesheets/52/_reset.scss
|
|
47
|
+
- templates/project/html5.js
|
|
48
|
+
- templates/project/index.html.haml
|
|
49
|
+
- templates/project/manifest.rb
|
|
50
|
+
- templates/project/styles.scss
|
|
51
|
+
has_rdoc: false
|
|
52
|
+
homepage: http://github.com/fabiokr/compass-52-framework
|
|
53
|
+
licenses: []
|
|
54
|
+
|
|
55
|
+
post_install_message:
|
|
56
|
+
rdoc_options: []
|
|
57
|
+
|
|
58
|
+
require_paths:
|
|
59
|
+
- lib
|
|
60
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
61
|
+
none: false
|
|
62
|
+
requirements:
|
|
63
|
+
- - ">="
|
|
64
|
+
- !ruby/object:Gem::Version
|
|
65
|
+
version: "0"
|
|
66
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
67
|
+
none: false
|
|
68
|
+
requirements:
|
|
69
|
+
- - ">="
|
|
70
|
+
- !ruby/object:Gem::Version
|
|
71
|
+
version: "0"
|
|
72
|
+
requirements: []
|
|
73
|
+
|
|
74
|
+
rubyforge_project: compass-52-plugin
|
|
75
|
+
rubygems_version: 1.5.0
|
|
76
|
+
signing_key:
|
|
77
|
+
specification_version: 3
|
|
78
|
+
summary: Compass compatible port of 52 Framework
|
|
79
|
+
test_files: []
|
|
80
|
+
|