-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 4efaab0
Showing
12 changed files
with
298 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
| <html xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | ||
|
|
||
|
|
||
| <title>Box</title> | ||
| <style> | ||
|
|
||
| .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12, | ||
| .gp10,.gp12,.gp17,.gp20,.gp25,.gp33,.gp50,.gp67,.gp75,.gp80,.gp83,.gp100 | ||
| { | ||
|
|
||
| padding-left:10px; | ||
| border-left: 15px solid #FFFBEA !important; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| body {background-color:#FFFBEA; font:1em/1.6 Georgia,serif;} | ||
| h1{ | ||
| color:#BA3B0D; text-align: center; | ||
| } | ||
| .main{width:975px; margin:0 auto;} | ||
| .g2,.g3,.g4,.g6,.g12{background-color:transparent; } | ||
|
|
||
| .clear{border-bottom:15px solid #FFFBEA} | ||
|
|
||
| @media handheld, only screen and (max-width: 480px) { | ||
| .main{ | ||
|
|
||
| width: 100%; | ||
| border: 0; | ||
| img { | ||
| max-width:100%; | ||
| height:auto; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| </style> | ||
| <link href="box.css" media="screen, projection" rel="stylesheet" type="text/css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="main"> | ||
| <div class="clear"></div> | ||
|
|
||
| <div class="g12"><h1>BOX</h1></div> | ||
|
|
||
| <div class="clear"></div> | ||
|
|
||
| <div class="g6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nibh magna, tincidunt vitae scelerisque a, tincidunt a risus. Ut placerat, libero id tempus mollis, neque enim volutpat quam, vitae eleifend orci magna nec nisl. Phasellus non odio nisl, a sodales mi. Nunc eget nibh mi. Vivamus nec magna eros. Proin in arcu felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse volutpat vestibulum magna et lobortis.</div> | ||
| <div class="g6">Quisque lectus purus, pellentesque et vestibulum sit amet, sollicitudin nec nisi. Integer at risus dui, et sodales nisi. Nulla iaculis imperdiet magna et malesuada. Morbi accumsan lectus et velit porta vel aliquam dolor egestas. Curabitur tincidunt, sapien a elementum aliquam, metus arcu bibendum justo, at blandit tellus sapien vel turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus suscipit orci eget mi volutpat euismod.</div> | ||
|
|
||
| <div class="clear"></div> | ||
| <div class="g3"><img src="images/cat1.jpg"></div> | ||
| <div class="g3"><img src="images/cat2.jpg"></div> | ||
| <div class="g3"><img src="images/cat3.jpg"></div> | ||
| <div class="g3"><img src="images/cat4.jpg"></div> | ||
| <div class="clear"></div> | ||
|
|
||
| <div class="g4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="clear"> </div> | ||
|
|
||
| <div class="g8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi. Quisque lectus purus, pellentesque et vestibulum sit amet, sollicitudin nec nisi. Integer at risus dui, et sodales nisi. Nulla iaculis imperdiet magna et malesuada. Morbi accumsan lectus et velit porta vel aliquam dolor egestas. Curabitur tincidunt, sapien a elementum aliquam, metus arcu bibendum justo, at blandit tellus sapien vel turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus suscipit orci eget mi volutpat euismod. Suspendisse volutpat vestibulum magna et lobortis.</div> | ||
| <div class="g4"><img src="images/cat5.jpg"></div> | ||
| <div class="clear"></div> | ||
|
|
||
| <div class="g12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi. Morbi accumsan lectus et velit porta vel aliquam dolor egestas. Curabitur tincidunt, sapien a elementum aliquam, metus arcu bibendum justo, at blandit tellus sapien vel turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div> | ||
| <div class="clear"> </div> | ||
|
|
||
| <div class="g6"><img src="images/cat6.jpg"></div> | ||
| <div class="g6"><img src="images/cat7.jpg"></div> | ||
|
|
||
| <div class="clear"> </div> | ||
|
|
||
|
|
||
|
|
||
| <div class="gp33">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="gp33">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="gp33">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
|
|
||
| <div class="clear"> </div> | ||
| <div class="gp100" style="text-align:center; font-weight:bold">The End</div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
| <html xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | ||
| <link href="box.css" media="screen, projection" rel="stylesheet" type="text/css" /> | ||
|
|
||
| <title>Box - Grid</title> | ||
| <style> | ||
|
|
||
| body {background-color:#333;} | ||
| .main{background-color:#eee;width:975px; margin:0 auto;} | ||
| .g2,.g3,.g4,.g6,.g12{background-color:#fac0c0; } | ||
|
|
||
| .clear{clear:both; border-bottom:15px solid #eee} | ||
|
|
||
| @media handheld, only screen and (max-width: 480px) { | ||
| .main{ | ||
|
|
||
| width: 100%; | ||
| border: 0; | ||
| img { | ||
| max-width:100%; | ||
| height:auto; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="main"> | ||
| <div class="clear"></div> | ||
|
|
||
| <div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="clear"></div> | ||
|
|
||
| <div class="g3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="clear"></div> | ||
|
|
||
| <div class="g4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="clear"></div> | ||
|
|
||
| <div class="g6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="g6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="clear"></div> | ||
|
|
||
| <div class="g12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis lacus in metus tempor fringilla id eu nisi.</div> | ||
| <div class="clear"></div> | ||
|
|
||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
| <html xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> | ||
| <link href="box.css" media="screen, projection" rel="stylesheet" type="text/css" /> | ||
|
|
||
| <title>Box - Grid1</title> | ||
| <style> | ||
|
|
||
|
|
||
| .gp10,.gp12,.gp17,.gp20,.gp25,.gp33,.gp50,.gp67,.gp75,.gp80,.gp83,.gp100 | ||
| { | ||
|
|
||
| border:0;} | ||
|
|
||
|
|
||
|
|
||
| body {background-color:#333;} | ||
| .main{background-color:#eee;width:960px; margin:0 auto;} | ||
|
|
||
| @media handheld, only screen and (max-width: 480px) { | ||
| .main{ | ||
|
|
||
| width: 100%; | ||
| border: 0; | ||
| img { | ||
| max-width:100%; | ||
| height:auto; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="main"> | ||
|
|
||
| <div class="clear"> </div> | ||
| <div class="gp20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="gp20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="gp20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="gp20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="gp20">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
|
|
||
| <div class="clear"> </div> | ||
|
|
||
| <div class="gp33">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="gp33">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="gp33">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
|
|
||
| <div class="clear"> </div> | ||
|
|
||
| <div class="gp50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="gp50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nulla eu justo porttitor molestie eu sit amet arcu. Sed feugiat molestie ipsum et faucibus.</div> | ||
| <div class="clear"> </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| Box - CSS Framework | ||
| ----- | ||
| This solution is based on box-sizing: border-box and display:inline-block building principles. | ||
|
|
||
| Box - CSS Framework: | ||
| --------------------- | ||
|
|
||
| * All CSS is about 1 kb | ||
| * px and % Grid System | ||
| * Super easy to use and to personalize | ||
| * The gutter size can be easily personalized | ||
| * Responsive Grid optimized for mobile devices. | ||
| * Works in IE8 and later | ||
|
|
||
| ###### [Grid px](http://dl.dropbox.com/u/2111778/Box-CSS-Framework/Grid.html) | ||
|
|
||
| ###### [Grid %](http://dl.dropbox.com/u/2111778/Box-CSS-Framework/Grid1.html) | ||
|
|
||
| ###### [Demo](http://dl.dropbox.com/u/2111778/Box-CSS-Framework/Demo.html) | ||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12, | ||
| .gp10,.gp12,.gp17,.gp20,.gp25,.gp33,.gp50,.gp67,.gp75,.gp80,.gp83,.gp100 | ||
| { | ||
| -moz-box-sizing: border-box; | ||
| -webkit-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| display:inline-block; | ||
| margin-right: -4px; /* inline-block hack*/ | ||
|
|
||
| /* You could and you should change these settings */ | ||
| padding-left:10px; | ||
| border-left: 15px solid #fff; /* the border becomes gutter */ | ||
| vertical-align:top; | ||
| } | ||
|
|
||
| .g1 {width:80px; } | ||
| .g2 {width:160px;} | ||
| .g3 {width:240px;} | ||
| .g4 {width:320px;} | ||
| .g5 {width:400px;} | ||
| .g6 {width:480px;} | ||
| .g7 {width:560px;} | ||
| .g8 {width:640px;} | ||
| .g9 {width:720px;} | ||
| .g10 {width:800px;} | ||
| .g11 {width:880px;} | ||
| .g12 {width:960px;} | ||
|
|
||
| .gp10 {width:10%} | ||
| .gp12 {width:12.5%} | ||
| .gp17 {width:16.66%} | ||
| .gp20 {width:20%} | ||
| .gp25 {width:25%} | ||
| .gp33 {width:33.33%} | ||
| .gp50 {width:50%} | ||
| .gp67 {width:66.67%} | ||
| .gp75 {width:75%} | ||
| .gp80 {width:80%} | ||
| .gp83 {width:83.34%} | ||
| .gp100 {width:100%} | ||
|
|
||
| .inside{padding: 0; border:0;} | ||
| .clear{clear:both; } | ||
|
|
||
| @media handheld, only screen and (max-width: 480px) { | ||
| .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12, | ||
| .gp10,.gp12,.gp17,.gp20,.gp25,.gp33,.gp50,.gp67,.gp75,.gp80,.gp83,.gp100{ | ||
|
|
||
| width: 100%; | ||
| border: 0 !important; | ||
| padding:10px 0 10px 0 !important; | ||
| img { | ||
| max-width:100%; | ||
| height:auto; | ||
| } | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.