Permalink
Browse files

Adding a basic demo. More robust examples found on the website.

  • Loading branch information...
1 parent 848688f commit 4f35b9e8d8b50eef35449e222cfc9a5d750f66f1 @doctyper committed Jan 20, 2011
Showing with 103 additions and 510 deletions.
  1. +30 −0 demo/css/box-flex.css
  2. +0 −51 demo/css/demo.css
  3. +0 −234 demo/css/real.css
  4. +0 −132 demo/css/test.css
  5. +73 −13 demo/index.html
  6. +0 −80 demo/real-world.html
View
@@ -0,0 +1,30 @@
+#box-parent {
+ width: 100%; /* Firefox needs this */
+ height: 100%;
+}
+
+#box-parent, #box-child-2, #nested-child-2 {
+ display: -webkit-box;
+ display: -moz-box;
+ display: box;
+
+ -webkit-box-orient: vertical;
+ -moz-box-orient: vertical;
+ box-orient: vertical;
+
+ -webkit-box-direction: reverse;
+ -moz-box-direction: reverse;
+ box-direction: reverse;
+}
+
+#box-parent div {
+ -webkit-box-flex: 1;
+ -moz-box-flex: 1;
+ box-flex: 1;
+}
+
+#box-child-2 {
+ -webkit-box-ordinal-group: 2;
+ -moz-box-ordinal-group: 2;
+ box-ordinal-group: 2;
+}
View
@@ -1,51 +0,0 @@
-/* Demo Styling. Pay no attention to the CSS behind the box */
-/* (See what I did there?) */
-
-body, html {
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
-}
-
-/* First, we create a box with header and footer, content area in between. */
-#doc {
- height: 100%;
- width: 100%;
-}
-
-#header, #footer {
- background-color: gray;
- height: 100px;
- width: 100%;
- margin: 0;
-}
-
-p {
- width: 200px;
-}
-
-#products {
- background-color: silver;
- width: 100%;
- height: 400px;
- margin: 0;
-}
-
-#phones {
- background-color: orange;
- padding: 1em;
- margin: 0;
-}
-
-#computers {
- background-color: lightgreen;
- padding: 1em;
- margin: 0;
-}
-
-#fast-cars {
- background-color: lightblue;
- padding: 1em;
- margin: 0;
-}
View
@@ -1,234 +0,0 @@
-html, body{
- padding : 0;
- margin : 0;
- height : 100%;
- width : 100%
-}
-
-body{
- font : 0.8em Arial, Helvetica, sans-serif;
- line-height : 1.4em;
-
- display : -moz-box;
- display : -webkit-box;
- display : box;
-
- -moz-box-orient : horizontal;
- -moz-box-pack : center;
-
- -webkit-box-orient : horizontal;
- -webkit-box-pack : center;
-
- box-orient : horizontal;
- box-pack : center;
-}
-
-section{
- display : block;
-}
-
-#page{
- height : 100%;
- max-width : 800px;
-
- display : -moz-box;
- display : -webkit-box;
- display : box;
-
- -moz-box-orient : vertical;
- -moz-box-flex : 1;
-
- -webkit-box-orient : vertical;
- -webkit-box-flex : 1;
-
- box-orient : vertical;
- box-flex : 1;
-}
-
-header{
- display : block;
- padding : 10px;
- background : #EFEFEF;
- margin-bottom : 20px;
-
- -moz-border-radius : 0 0 10px 10px;
- -webkit-border-radius : 0 0 10px 10px;
- border-radius : 0 0 10px 10px;
-}
-
-footer{
- display : block;
- padding : 10px;
- background : #EFEFEF;
- text-align : center;
- margin-top : 20px;
-
- -moz-border-radius : 10px 10px 0 0 ;
- -webkit-border-radius : 10px 10px 0 0 ;
- border-radius : 10px 10px 0 0 ;
-}
-
-footer p{
- margin-top : 0;
-}
-
-#main{
- display : -moz-box;
- display : -webkit-box;
- display : box;
-
- -moz-box-flex : 1;
- -moz-box-orient : horizontal;
- -moz-box-direction : reverse;
-
- -webkit-box-flex : 1;
- -webkit-box-orient : horizontal;
- -webkit-box-direction : reverse;
-
- box-flex : 1;
- box-orient : horizontal;
- box-direction : reverse;
-}
-
-#content{
- padding : 0 20px 10px 10px;
-
- display : -moz-box;
- display : -webkit-box;
- display : box;
-
- -moz-box-flex : 1;
- -moz-box-orient : vertical;
- -moz-box-direction : normal;
-
- -webkit-box-flex : 1;
- -webkit-box-orient : vertical;
- -webkit-box-direction : normal;
-
- box-flex : 1;
- box-orient : vertical;
- box-direction : normal;
-}
-
-#content article{
- display : block;
- margin : 0.5em 0;
-
- -moz-box-ordinal-group : 2;
- -webkit-box-ordinal-group : 2;
- box-ordinal-group : 2;
-}
-
-#content article h2{
- margin-top : 0;
-}
-
-#content nav{
- border-top : 1px solid #CCC;
- padding-top : 10px;
- margin-top : 10px;
-
- display : -moz-box;
- display : -webkit-box;
- display : box;
-
- -moz-box-orient : horizontal;
- -moz-box-ordinal-group : 2;
-
- -webkit-box-orient : horizontal;
- -webkit-box-ordinal-group : 2;
-
- box-orient : horizontal;
- box-ordinal-group : 2;
-}
-
-#content nav a{
- display : block;
-
- -moz-box-flex : 1;
- -webkit-box-flex : 1;
- box-flex : 1;
-}
-
-#content nav a:last-child{
- text-align : right;
-}
-
-#content .topgroup{
- -moz-box-ordinal-group : 1;
- -webkit-box-ordinal-group : 1;
- box-ordinal-group : 1;
-
- -moz-border-radius : 5px;
- -moz-box-shadow : 0 0 5px #ECC;
-
- -webkit-border-radius : 5px;
- -webkit-box-shadow : 0 0 5px #ECC;
-
- border-radius : 5px;
- box-shadow : 0 0 5px #ECC;
-
- border : 1px solid #FCC;
- padding : 10px;
-}
-
-#content .topgroup h2{
- margin-top : 0;
-}
-
-#sidebar{
- width : 180px;
- padding : 10px;
- border-right : 1px solid #CCC;
-}
-
-#sidebar div:first-of-type h2:first-of-type{
- margin-top : 0;
-}
-
-#sidebar ul{
- display : -moz-box;
- display : -webkit-box;
- display : box;
-
- -moz-box-orient : vertical;
- -moz-box-direction : normal;
-
- -webkit-box-orient : vertical;
- -webkit-box-direction : normal;
-
- box-orient : vertical;
- box-direction : normal;
-}
-
-#sidebar .topgroup{
- -moz-box-ordinal-group : 1;
- -webkit-box-ordinal-group : 1;
- box-ordinal-group : 1;
-
- font-weight : bold;
-}
-
-#sidebar li{
- -moz-box-ordinal-group : 2;
- -webkit-box-ordinal-group : 2;
- box-ordinal-group : 2;
-}
-
-#sidebar form{
- display : -moz-box;
- display : -webkit-box;
- display : box;
-
- -moz-box-orient : horizontal;
-
- -webkit-box-orient : horizontal;
-
- box-orient : horizontal;
-}
-
-#sidebar form input[type="text"]{
- -moz-box-flex : 1;
- -webkit-box-flex : 1;
- box-flex : 1;
-}
Oops, something went wrong.

0 comments on commit 4f35b9e

Please sign in to comment.