Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

some bug fix

  • Loading branch information...
commit 66d03530cedf5390182f90958f34930028b66ac8 1 parent 9151221
@kenhty authored
Showing with 106 additions and 572 deletions.
  1. +56 −539 demo.htm
  2. +42 −17 lib/grid.css
  3. +0 −12 lib/misc.css
  4. +8 −4 lib/typography.css
View
595 demo.htm
@@ -1,65 +1,66 @@
<!doctype html>
<head>
- <meta charset='utf-8'>
- <title>Example</title>
- <meta name='description' content=''>
- <!-- Mobile viewport optimized: h5bp.com/viewport -->
- <meta name='viewport' content='width=device-width'>
- <link rel='stylesheet' type='text/css' href='natural.css'>
- <style type='text/css'>
- .text-centering {
- text-align: center;
- }
- ol {
- list-style-type: upper-roman;
- }
-
- .container {
- background-color: #fff;
- }
-
- .grid-example h5 {
- color: #fff;
- background-color: #222;
- text-align: center;
- }
-
- .grid-example .line {
- margin-bottom: 2.2709%;
- }
-
- .grid-example {
- background-color: #fff;
- }
-
- .grid-example header h2, .typography-example header h2, .form-example header h2 {
- margin: 0.809em 0;
- }
-
- .typography-example {
- background-color: #222;
- color: #fff;
- }
-
- .form-example {
- background-color: #fff;
- }
-
- body {
- background-color: #222;
- }
-
- </style>
+ <meta charset='utf-8'>
+ <title>Natural: A state-of-the-art front-end framework</title>
+ <meta name="keywords" content='framework, css framework, html5, css3, responsive'>
+ <meta name='description' content='A state-of-the-art front-end framework'>
+ <meta name="author" content='Tat-Yuen Hui'>
+ <meta name='viewport' content='width=device-width'>
+ <link rel='stylesheet' type='text/css' href='natural.css'>
+ <style type='text/css'>
+ .text-centering {
+ text-align: center;
+ }
+
+ ol {
+ list-style-type: upper-roman;
+ }
+
+ .container {
+ background-color: #fff;
+ }
+
+ .grid-example h5 {
+ color: #fff;
+ background-color: #222;
+ text-align: center;
+ }
+
+ .grid-example .line {
+ margin-bottom: 2.2709%;
+ }
+
+ .grid-example {
+ background-color: #fff;
+ }
+
+ .grid-example header h2, .typography-example header h2, .form-example header h2 {
+ margin: 1.13545% 0 1.13545% 2.2709%;
+ }
+
+ .typography-example {
+ background-color: #222;
+ color: #fff;
+ }
+
+ .form-example {
+ background-color: #fff;
+ }
+
+ body {
+ background-color: #222;
+ }
+ </style>
</head>
<body>
-<div class='container container-padding'>
+<div class='container'>
<div class='line'>
<header class='unit size1of1'>
- <h1 class='text-centering'>Natural CSS framework</h1>
+ <h1 class='text-centering'>Natural</h1>
<h5 class='text-centering'>A cutting-edge CSS framework</h5>
</header>
</div>
- <div class='line'>
+ <div class='line padding'>
<div class='unit size1of3 gutter'>
<h4>Mighty Flexible</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor lacinia turpis nec pulvinar. Duis consequat tincidunt odio, non molestie purus tempus eget. Aliquam nec nisi non lacus auctor semper nec ac felis. Suspendisse potenti. Phasellus nisl tellus, commodo ut pretium eu, commodo eget elit. Vivamus sed tellus vel libero varius commodo in in libero. Maecenas commodo nulla vitae velit tincidunt eu dictum lectus mattis. Mauris eros nisi, mattis ac rhoncus non, pretium et est. In tincidunt dolor et lacus porta ut congue urna fringilla. Nunc pellentesque, massa ac vestibulum placerat, felis purus aliquam nisi, a mattis lacus risus vel neque.</p>
@@ -68,497 +69,13 @@ <h5 class='text-centering'>A cutting-edge CSS framework</h5>
<h4>Aesthetic Elegance</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor lacinia turpis nec pulvinar. Duis consequat tincidunt odio, non molestie purus tempus eget. Aliquam nec nisi non lacus auctor semper nec ac felis. Suspendisse potenti. Phasellus nisl tellus, commodo ut pretium eu, commodo eget elit. Vivamus sed tellus vel libero varius commodo in in libero. Maecenas commodo nulla vitae velit tincidunt eu dictum lectus mattis. Mauris eros nisi, mattis ac rhoncus non, pretium et est. In tincidunt dolor et lacus porta ut congue urna fringilla. Nunc pellentesque, massa ac vestibulum placerat, felis purus aliquam nisi, a mattis lacus risus vel neque.</p>
</div>
- <div class='unit size1of3'>
+ <div class='unit size1of3 gutter'>
<h4>Placeholder</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor lacinia turpis nec pulvinar. Duis consequat tincidunt odio, non molestie purus tempus eget. Aliquam nec nisi non lacus auctor semper nec ac felis. Suspendisse potenti. Phasellus nisl tellus, commodo ut pretium eu, commodo eget elit. Vivamus sed tellus vel libero varius commodo in in libero. Maecenas commodo nulla vitae velit tincidunt eu dictum lectus mattis. Mauris eros nisi, mattis ac rhoncus non, pretium et est. In tincidunt dolor et lacus porta ut congue urna fringilla. Nunc pellentesque, massa ac vestibulum placerat, felis purus aliquam nisi, a mattis lacus risus vel neque.</p>
</div>
</div>
</div>
-<div class='line grid-example '>
- <div class='container container-padding'>
- <div class='line'>
- <header class='unit size1of1'>
- <h2>Grid</h2>
- </header>
- </div>
- <div class='line'>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5'>
- <h5>1/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size2of5 gutter'>
- <h5>2/5</h5>
-
- </div>
- <div class='unit size1of5'>
- <h5>1/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size2of5 gutter'>
- <h5>2/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5'>
- <h5>1/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size2of5'>
- <h5>2/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size2of5 gutter'>
- <h5>2/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5'>
- <h5>1/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size2of5 gutter'>
- <h5>2/5</h5>
-
- </div>
- <div class='unit size2of5 gutter'>
- <h5>2/5</h5>
-
- </div>
- <div class='unit size1of5'>
- <h5>1/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size2of5 gutter'>
- <h5>2/5</h5>
-
- </div>
- <div class='unit size2of5'>
- <h5>2/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size2of5 gutter'>
- <h5>2/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size2of5'>
- <h5>2/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size3of5 gutter'>
- <h5>3/5</h5>
-
- </div>
- <div class='unit size1of5'>
- <h5>1/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size3of5'>
- <h5>3/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size3of5 gutter'>
- <h5>3/5</h5>
-
- </div>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size1of5'>
- <h5>1/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size2of5 gutter'>
- <h5>2/5</h5>
-
- </div>
- <div class='unit size3of5'>
- <h5>3/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size3of5 gutter'>
- <h5>3/5</h5>
-
- </div>
- <div class='unit size2of5'>
- <h5>2/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of5 gutter'>
- <h5>1/5</h5>
-
- </div>
- <div class='unit size4of5'>
- <h5>4/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size4of5 gutter'>
- <h5>4/5</h5>
-
- </div>
- <div class='unit size1of5'>
- <h5>1/5</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of4 gutter'>
- <h5>1/4</h5>
-
- </div>
- <div class='unit size1of4 gutter'>
- <h5>1/4</h5>
-
- </div>
- <div class='unit size1of4 gutter'>
- <h5>1/4</h5>
-
- </div>
- <div class='unit size1of4'>
- <h5>1/4</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of4 gutter'>
- <h5>1/4</h5>
-
- </div>
- <div class='unit size1of2 gutter'>
- <h5>1/2</h5>
-
- </div>
- <div class='unit size1of4'>
- <h5>1/4</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of4 gutter'>
- <h5>1/4</h5>
-
- </div>
- <div class='unit size1of4 gutter'>
- <h5>1/4</h5>
-
- </div>
- <div class='unit size1of2'>
- <h5>1/2</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of2 gutter'>
- <h5>1/2</h5>
-
- </div>
- <div class='unit size1of4 gutter'>
- <h5>1/4</h5>
-
- </div>
- <div class='unit size1of4'>
- <h5>1/4</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of4 gutter'>
- <h5>1/4</h5>
-
- </div>
- <div class='unit size3of4'>
- <h5>3/4</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size3of4 gutter'>
- <h5>3/4</h5>
-
- </div>
- <div class='unit size1of4'>
- <h5>1/4</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of3 gutter'>
- <h5>1/3</h5>
-
- </div>
- <div class='unit size1of3 gutter'>
- <h5>1/3</h5>
-
- </div>
- <div class='unit size1of3'>
- <h5>1/3</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of3 gutter'>
- <h5>1/3</h5>
-
- </div>
- <div class='unit size2of3'>
- <h5>2/3</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size2of3 gutter'>
- <h5>2/3</h5>
-
- </div>
- <div class='unit size1of3'>
- <h5>1/3</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of2 gutter'>
- <h5>1/2</h5>
-
- </div>
- <div class='unit size1of2'>
- <h5>1/2</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of1'>
- <h5>1/1</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of6 gutter'>
- <h5>1/6</h5>
-
- </div>
- <div class='unit size1of6 gutter'>
- <h5>1/6</h5>
-
- </div>
- <div class='unit size1of6 gutter'>
- <h5>1/6</h5>
-
- </div>
- <div class='unit size1of6 gutter'>
- <h5>1/6</h5>
-
- </div>
- <div class='unit size1of6 gutter'>
- <h5>1/6</h5>
-
- </div>
- <div class='unit size1of6'>
- <h5>1/6</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of6 gutter'>
- <h5>1/6</h5>
-
- </div>
- <div class='unit size5of6'>
- <h5>5/6</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of6 gutter'>
- <h5>1/6</h5>
-
- </div>
- <div class='unit size1of3 gutter'>
- <h5>2/6</h5>
-
- </div>
- <div class='unit size1of2'>
- <h5>3/6</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of7 gutter'>
- <h5>1/7</h5>
-
- </div>
- <div class='unit size1of7 gutter'>
- <h5>1/7</h5>
-
- </div>
- <div class='unit size1of7 gutter'>
- <h5>1/7</h5>
-
- </div>
- <div class='unit size1of7 gutter'>
- <h5>1/7</h5>
-
- </div>
- <div class='unit size1of7 gutter'>
- <h5>1/7</h5>
-
- </div>
- <div class='unit size1of7 gutter'>
- <h5>1/7</h5>
-
- </div>
- <div class='unit size1of7'>
- <h5>1/7</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size1of7 gutter'>
- <h5>1/7</h5>
-
- </div>
- <div class='unit size2of7 gutter'>
- <h5>2/7</h5>
-
- </div>
- <div class='unit size3of7 gutter'>
- <h5>3/7</h5>
-
- </div>
- <div class='unit size1of7'>
- <h5>1/7</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size4of7 gutter'>
- <h5>4/7</h5>
-
- </div>
- <div class='unit size3of7'>
- <h5>3/7</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size5of7 gutter'>
- <h5>5/7</h5>
-
- </div>
- <div class='unit size2of7'>
- <h5>2/7</h5>
-
- </div>
- </div>
- <div class='line'>
- <div class='unit size6of7 gutter'>
- <h5>6/7</h5>
-
- </div>
- <div class='unit size1of7'>
- <h5>1/7</h5>
-
- </div>
- </div>
-</div></div>
- <div class='container container-padding typography-example '>
+ <div class='container typography-example '>
<div class='line'>
<header class='unit size1of1'>
<h2>Typography</h2>
View
59 lib/grid.css
@@ -1,30 +1,24 @@
+* {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
.container, .line {
- overflow:hidden;
+ overflow: hidden;
}
.container {
width: 18.75em; /* 300px = 18.75em, 1024px = 64em */
margin: 0 auto;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.container-padding {
- padding: 1.618em;
+ display: -webkit-flex;
+ display: flex;
}
.unit {
float: left;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
}
-.gutter {
- padding-right: 1.618em;
-}
-
.size1of2 {width: 50%;}
.size1of3 {width: 33.3333%;}
@@ -48,6 +42,37 @@
.size5of7 {width: 71.4286%;}
.size6of7 {width: 85.7143%;}
-.size1of1 {width:100%;}
+.size1of8 {width: 12.5%;}
+.size3of8 {width: 37.5%;}
+.size5of8 {width: 62.5%;}
+.size7of8 {width: 87.5%;}
+
+.size1of9 {width: 11.1111%;}
+.size2of9 {width: 22.2222%;}
+.size4of9 {width: 44.4444%;}
+.size5of9 {width: 55.5556%;}
+.size7of9 {width: 77.7778%;}
+.size8of9 {width: 88.8889%;}
+
+.size1of10 {width: 10%;}
+.size3of10 {width: 30%;}
+.size7of10 {width: 70%;}
+.size9of10 {width: 90%;}
+
+.size1of11 {width: 9.0909%;}
+.size2of11 {width: 18.1818%;}
+.size3of11 {width: 27.2727%;}
+.size4of11 {width: 36.3636%;}
+.size5of11 {width: 45.4545%;}
+.size6of11 {width: 54.5455%;}
+.size7of11 {width: 63.6364%;}
+.size8of11 {width: 72.7273%;}
+.size9of11 {width: 81.8182%;}
+.size10of11 {width: 90.9091%;}
+
+.size1of12 {width: 8.3333%;}
+.size5of12 {width: 41.6667%;}
+.size7of12 {width: 58.3333%;}
+.size11of12 {width: 91.6667%;}
-.h-gutter {margin-bottom: 1.618em;}
+.size1of1 {width:100%;}
View
12 lib/misc.css
@@ -1,15 +1,3 @@
-a {
- padding: 0;
-}
-
-a:link {
- text-decoration: none;
-}
-
-a:hover {
- text-decoration: underline;
-}
-
a:active, a:focus {
position: relative;
top:1px;
View
12 lib/typography.css
@@ -3,7 +3,7 @@ html {
}
body {
- font: 16px/1.618 'OpenSans', Corbel, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, sans-serif;
+ font: 16px/1.618 'OpenSans', sans-serif;
font-size: 1.6rem;
color: #222;
}
@@ -16,14 +16,18 @@ p:nth-of-type(1) {
margin: 0 0 1.618em 0;
}
+p:last-child {
+ margin-bottom: 0;
+}
+
small {
- font-size: 12px
+ font-size: 12px;
font-size: 1.2rem;
}
h1, h2, h3, h4, h5, h6 {
- font-family: 'Palatino Linotype', Palatino, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', Garamond, 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', Georgia, serif;
- font-weight: bold;
+ font-family: Georgia, 'Palatino Linotype', Palatino, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', Garamond, 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', serif;
+ font-weight: normal;
margin: 0;
}
Please sign in to comment.
Something went wrong with that request. Please try again.