Skip to content

Commit b1626ea

Browse files
author
James Abbott
committed
rapidui initial commit
0 parents  commit b1626ea

File tree

5 files changed

+292
-0
lines changed

5 files changed

+292
-0
lines changed

‎README

Whitespace-only changes.

‎css/master.css

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/*
2+
THE RAPIDUI GRID FRAMEWORK
3+
http://jamesabbottdd.com/rapidui
4+
RAPIDUI IS LICENCED UNDER THE MIT LICENSE.
5+
*/
6+
7+
/* body, baseline font size, links
8+
--------------------------------------------- */
9+
body {
10+
font-family: Helvetica, Arial, sans-serif;
11+
font-size: 62.5%;
12+
}
13+
14+
a {text-decoration: none;}
15+
16+
/* grid
17+
--------------------------------------------- */
18+
.rowContainer>*[class$="Col"] {
19+
/*
20+
for visual testing, uncomment: */
21+
height: 100px;
22+
background: #fcc;
23+
24+
float: left;
25+
margin: 0 10px 13px 10px; /*use this for fixed layouts*/
26+
margin-left: .9259259259259258%;
27+
margin-right: .9259259259259258%;
28+
margin-bottom: 13px;
29+
}
30+
31+
/*FIXED WIDTHS:*/
32+
.oneCol {width: 70px;}
33+
/*70*2+20*/
34+
.twoCol {width: 160px;}
35+
/*70*3+20*2*/
36+
.threeCol {width: 250px;}
37+
/*70*4+20*3*/
38+
.fourCol {width: 340px;}
39+
/*70*5+20*4*/
40+
.fiveCol {width: 430px;}
41+
/*70*6+20*5*/
42+
.sixCol {width: 520px;}
43+
/*70*7+20*6*/
44+
.sevenCol {width: 610px;}
45+
/*70*8+20*7*/
46+
.eightCol {width: 700px;}
47+
/*70*9+20*8*/
48+
.nineCol {width: 790px;}
49+
/*70*10+20*9*/
50+
.tenCol {width: 880px;}
51+
/*70*11+20*10*/
52+
.elevenCol {width: 970px;}
53+
/*70*12+20*11*/
54+
.twelveCol {width: 1060px;}
55+
/*1080*.382-20*/
56+
.narrowCol {width: 392.56px;}
57+
/*1080*.618-20*/
58+
.wideCol {width: 647.44px;}
59+
/*END OF FIXED WIDTHS*/
60+
61+
/*70px*/
62+
.oneCol {width: 6.48148148%;}
63+
/*160px*/
64+
.twoCol {width: 14.8148148%;}
65+
/*250px*/
66+
.threeCol {width: 23.1481481%;}
67+
/*340px*/
68+
.fourCol {width: 31.4814815%;}
69+
/*430px*/
70+
.fiveCol {width: 39.8148148%;}
71+
/*520px*/
72+
.sixCol {width: 48.1481481%;}
73+
/*610px*/
74+
.sevenCol {width: 56.4814815%;}
75+
/*700px*/
76+
.eightCol {width: 64.8148148%;}
77+
/*790px*/
78+
.nineCol {width: 73.1481481%;}
79+
/*880px*/
80+
.tenCol {width: 81.4814815%;}
81+
/*970px*/
82+
.elevenCol {width: 89.8148148%;}
83+
/*1060px*/
84+
.twelveCol {width: 98.1481481%;}
85+
/*392.56px*/
86+
.narrowCol {width: 36.3481481%;}
87+
/*647.44px*/
88+
.wideCol {width: 59.9481481%;}
89+
90+
91+
/* groups with self-clearing floats
92+
--------------------------------------------- */
93+
.group:after {
94+
content: ".";
95+
display: block;
96+
height: 0;
97+
clear: both;
98+
visibility: hidden;
99+
}
100+
101+
/* non-textual elements in the fluid grid:
102+
--------------------------------------------- */
103+
img, video, object {max-width: 100%;}
104+
105+
/* page structure
106+
--------------------------------------------- */
107+
.wrapper {
108+
width: 80%;
109+
max-width: 1080px;
110+
min-width: 700px;
111+
margin: 0 auto;
112+
font-size: 1.3em;
113+
margin-bottom: 30px;
114+
}
115+
116+
footer {
117+
clear: both;
118+
margin: 0 auto;
119+
padding: 10px 0 30px 0;
120+
font-size: 1.3em;
121+
font-family: Georgia;
122+
color: #fff;
123+
border-top: 2px solid #e2e1d4;
124+
background: #333;
125+
background: rgba(0,0,0, .6);
126+
text-align: center;
127+
}

‎css/reset.css

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*
2+
Last version of Eric Meyer's reset stylesheet, see
3+
http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
4+
for details.
5+
*/
6+
7+
/* http://meyerweb.com/eric/tools/css/reset/
8+
v2.0b1 | 201101
9+
NOTE: WORK IN PROGRESS
10+
USE WITH CAUTION AND TEST WITH ABANDON */
11+
12+
html, body, div, span, applet, object, iframe,
13+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
14+
a, abbr, acronym, address, big, cite, code,
15+
del, dfn, em, img, ins, kbd, q, s, samp,
16+
small, strike, strong, sub, sup, tt, var,
17+
b, u, i, center,
18+
dl, dt, dd, ol, ul, li,
19+
fieldset, form, label, legend,
20+
table, caption, tbody, tfoot, thead, tr, th, td,
21+
article, aside, canvas, details, figcaption, figure,
22+
footer, header, hgroup, menu, nav, section, summary,
23+
time, mark, audio, video {
24+
margin: 0;
25+
padding: 0;
26+
border: 0;
27+
outline: 0;
28+
font-size: 100%;
29+
font: inherit;
30+
vertical-align: baseline;
31+
}
32+
/* HTML5 display-role reset for older browsers */
33+
article, aside, details, figcaption, figure,
34+
footer, header, hgroup, menu, nav, section {
35+
display: block;
36+
}
37+
body {
38+
line-height: 1;
39+
}
40+
ol, ul {
41+
list-style: none;
42+
}
43+
blockquote, q {
44+
quotes: none;
45+
}
46+
blockquote:before, blockquote:after,
47+
q:before, q:after {
48+
content: '';
49+
content: none;
50+
}
51+
52+
/* remember to define visible focus styles!
53+
:focus {
54+
outline: ?????;
55+
} */
56+
57+
/* remember to highlight inserts somehow! */
58+
ins {
59+
text-decoration: none;
60+
}
61+
del {
62+
text-decoration: line-through;
63+
}
64+
65+
table {
66+
border-collapse: collapse;
67+
border-spacing: 0;
68+
}

‎css/screen.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import url("reset.css");
2+
@import url("master.css");
3+
@import url("enriched.css");
4+
@import url("ie.css");

‎index.html

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset=utf-8">
4+
<title>The rapidui CSS Grid</title>
5+
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
6+
</head>
7+
<body>
8+
9+
<header class="group">
10+
11+
</header>
12+
13+
<div class="wrapper" class="group">
14+
15+
<div class="rowContainer group">
16+
<div class="oneCol"></div>
17+
<div class="oneCol"></div>
18+
<div class="oneCol"></div>
19+
<div class="oneCol"></div>
20+
<div class="oneCol"></div>
21+
<div class="oneCol"></div>
22+
<div class="oneCol"></div>
23+
<div class="oneCol"></div>
24+
<div class="oneCol"></div>
25+
<div class="oneCol"></div>
26+
<div class="oneCol"></div>
27+
<div class="oneCol"></div>
28+
</div>
29+
30+
<div class="rowContainer group">
31+
<div class="twoCol"></div>
32+
<div class="twoCol"></div>
33+
<div class="twoCol"></div>
34+
<div class="twoCol"></div>
35+
<div class="twoCol"></div>
36+
<div class="twoCol"></div>
37+
</div>
38+
39+
<div class="rowContainer group">
40+
<div class="threeCol"></div>
41+
<div class="threeCol"></div>
42+
<div class="threeCol"></div>
43+
<div class="threeCol"></div>
44+
</div>
45+
46+
<div class="rowContainer group">
47+
<div class="fourCol"></div>
48+
<div class="fourCol"></div>
49+
<div class="fourCol"></div>
50+
</div>
51+
52+
<div class="rowContainer group">
53+
<div class="fiveCol"></div>
54+
<div class="sevenCol"></div>
55+
</div>
56+
57+
<div class="rowContainer group">
58+
<div class="sixCol"></div>
59+
<div class="sixCol"></div>
60+
</div>
61+
62+
<div class="rowContainer group">
63+
<div class="eightCol"></div>
64+
<div class="fourCol"></div>
65+
</div>
66+
67+
<div class="rowContainer group">
68+
<div class="nineCol"></div>
69+
<div class="threeCol"></div>
70+
</div>
71+
72+
<div class="rowContainer group">
73+
<div class="tenCol"></div>
74+
<div class="twoCol"></div>
75+
</div>
76+
77+
<div class="rowContainer group">
78+
<div class="elevenCol"></div>
79+
<div class="oneCol"></div>
80+
</div>
81+
82+
<div class="rowContainer group">
83+
<div class="twelveCol"></div>
84+
</div>
85+
86+
<div class="rowContainer group">
87+
<div class="golden-left"></div>
88+
<div class="golden-right"></div>
89+
</div>
90+
91+
</div>
92+
93+
<footer></footer>

0 commit comments

Comments
 (0)