This repository has been archived by the owner on Jan 19, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 496
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #276 from akaustav/master
Hosting examples on GitHub pages
- Loading branch information
Showing
50 changed files
with
2,602 additions
and
76 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,44 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Flexbug 1.1.a (bug)</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> | ||
| <style> | ||
| /** | ||
| * Flexbug demo 1.1.a (bug) | ||
| */ | ||
|
|
||
| .FlexContainer { | ||
| display: -webkit-box; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| margin: 1em; | ||
| width: 200px; | ||
| } | ||
|
|
||
| /* Presentational styles */ | ||
| /* not demo related */ | ||
|
|
||
| .FlexItem { | ||
| background: hsla(0, 0%, 0%, 0.1); | ||
| margin: 1em; | ||
| padding: 1em; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body translate="no"> | ||
| <div class="FlexContainer"> | ||
| <div class="FlexItem"> | ||
| ReallyLongWord | ||
| </div> | ||
| <div class="FlexItem"> | ||
| AnotherReallyLongWord | ||
| </div> | ||
| <div class="FlexItem"> | ||
| YetAnotherReallyLongWord | ||
| </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,55 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Flexbug 1.1.b (workaround)</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> | ||
| <style> | ||
| /** | ||
| * Flexbug demo 1.1.b (workaround) | ||
| * | ||
| * 1. Set an explicit `flex-shrink` of 0 | ||
| * to prevent browsers from letting | ||
| * elements shink to smaller than | ||
| * their default minimum content | ||
| * size. | ||
| */ | ||
|
|
||
| .FlexContainer { | ||
| display: -webkit-box; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| margin: 1em; | ||
| width: 200px; | ||
| } | ||
|
|
||
| .FlexItem { | ||
| -ms-flex-negative: 0; | ||
| flex-shrink: 0; /* 1 */ | ||
| } | ||
|
|
||
| /* Presentational styles */ | ||
| /* not demo related */ | ||
|
|
||
| .FlexItem { | ||
| background: hsla(0, 0%, 0%, 0.1); | ||
| margin: 1em; | ||
| padding: 1em; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body translate="no"> | ||
| <div class="FlexContainer"> | ||
| <div class="FlexItem"> | ||
| ReallyLongWord | ||
| </div> | ||
| <div class="FlexItem"> | ||
| AnotherReallyLongWord | ||
| </div> | ||
| <div class="FlexItem"> | ||
| YetAnotherReallyLongWord | ||
| </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,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Flexbug 1.2.a (bug)</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> | ||
| <style> | ||
| /** | ||
| * Flexbug demo 1.2.a (bug) | ||
| */ | ||
|
|
||
| .FlexContainer { | ||
| display: -webkit-box; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-box-direction: normal; | ||
| -ms-flex-direction: column; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| /* Presentational styles */ | ||
| /* not demo related */ | ||
|
|
||
| .FlexContainer, | ||
| .FlexItem { | ||
| background: hsla(0, 0%, 0%, 0.1); | ||
| } | ||
|
|
||
| .FlexContainer { | ||
| margin: 1em; | ||
| padding: 0.5em; | ||
| } | ||
|
|
||
| .FlexItem { | ||
| margin: 0.5em; | ||
| padding: 1em; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body translate="no"> | ||
| <div class="FlexContainer"> | ||
| <div class="FlexItem"> | ||
| Flex item<br> | ||
| with multiple</br> | ||
| lines of text | ||
| </div> | ||
| <div class="FlexItem"> | ||
| Another flex item<br> | ||
| with multiple</br> | ||
| lines of text | ||
| </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,67 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Flexbug 1.2.b (workaround)</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> | ||
| <style> | ||
| /** | ||
| * Flexbug demo 1.2.b (workaround) | ||
| * | ||
| * 1. Set an explicit `flex-shrink` of 0 | ||
| * to prevent browsers from letting | ||
| * elements shink to smaller than | ||
| * their default minimum content | ||
| * size. | ||
| */ | ||
|
|
||
| .FlexContainer { | ||
| display: -webkit-box; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -webkit-box-orient: vertical; | ||
| -webkit-box-direction: normal; | ||
| -ms-flex-direction: column; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .FlexItem { | ||
| -ms-flex-negative: 0; | ||
| flex-shrink: 0; /* 1 */ | ||
| } | ||
|
|
||
| /* Presentational styles */ | ||
| /* not demo related */ | ||
|
|
||
| .FlexContainer, | ||
| .FlexItem { | ||
| background: hsla(0, 0%, 0%, 0.1); | ||
| } | ||
|
|
||
| .FlexContainer { | ||
| margin: 1em; | ||
| padding: 0.5em; | ||
| } | ||
|
|
||
| .FlexItem { | ||
| margin: 0.5em; | ||
| padding: 1em; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body translate="no"> | ||
| <div class="FlexContainer"> | ||
| <div class="FlexItem"> | ||
| Flex item<br> | ||
| with multiple</br> | ||
| lines of text | ||
| </div> | ||
| <div class="FlexItem"> | ||
| Another flex item<br> | ||
| with multiple</br> | ||
| lines of text | ||
| </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,50 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Flexbug 10.1.a (bug)</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> | ||
| <style> | ||
| /** | ||
| * Flexbug demo 10.1.a (bug) | ||
| */ | ||
|
|
||
| .OuterFlexContainer { | ||
| -webkit-box-align: baseline; | ||
| -ms-flex-align: baseline; | ||
| align-items: baseline; | ||
| background: hsla(0, 0%, 0%, 0.1); | ||
| display: -webkit-box; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| line-height: 1.4; | ||
| margin: 1em; | ||
| padding: 1em; | ||
| } | ||
|
|
||
| .FlexItem { | ||
| margin-right: 1em; | ||
| } | ||
|
|
||
| .InnerFlexContainer { | ||
| display: -webkit-box; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body translate="no"> | ||
| <div class="OuterFlexContainer"> | ||
| <div class="FlexItem">I should be aligned with the first line of text.</div> | ||
| <div class="FlexItem"> | ||
| <div class="InnerFlexContainer"> | ||
| First line of text. | ||
| </div> | ||
| Second line of text.<br /> | ||
| Third line of text.<br /> | ||
| Fourth line of text. | ||
| </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,51 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Flexbug 10.1.b (workaround)</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> | ||
| <style> | ||
| /** | ||
| * Flexbug demo 10.1.b (workaround) | ||
| */ | ||
|
|
||
| .OuterFlexContainer { | ||
| -webkit-box-align: baseline; | ||
| -ms-flex-align: baseline; | ||
| align-items: baseline; | ||
| background: hsla(0, 0%, 0%, 0.1); | ||
| display: -webkit-box; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| line-height: 1.4; | ||
| margin: 1em; | ||
| padding: 1em; | ||
| } | ||
|
|
||
| .FlexItem { | ||
| margin-right: 1em; | ||
| } | ||
|
|
||
| .InnerFlexContainer { | ||
| display: -webkit-inline-box; | ||
| display: -ms-inline-flexbox; | ||
| display: inline-flex; | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body translate="no"> | ||
| <div class="OuterFlexContainer"> | ||
| <div class="FlexItem">I should be aligned with the first line of text.</div> | ||
| <div class="FlexItem"> | ||
| <div class="InnerFlexContainer"> | ||
| First line of text. | ||
| </div> | ||
| Second line of text.<br /> | ||
| Third line of text.<br /> | ||
| Fourth line of text. | ||
| </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,46 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Flexbug 11.1.a (bug)</title> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" /> | ||
| <style> | ||
| /** | ||
| * Flexbug demo 11.1.a (bug) | ||
| */ | ||
|
|
||
| .FlexContainer { | ||
| background: hsla(0, 0%, 0%, 0.1); | ||
| display: -webkit-box; | ||
| display: -ms-flexbox; | ||
| display: flex; | ||
| -ms-flex-wrap: wrap; | ||
| flex-wrap: wrap; | ||
| margin: 1em; | ||
| padding: 1em; | ||
| width: 600px; | ||
| } | ||
|
|
||
| .FlexItem { | ||
| background: hsla(0, 0%, 0%, 0.1); | ||
| -webkit-box-flex: 1; | ||
| -ms-flex: 1; | ||
| flex: 1; | ||
| margin: 1em; | ||
| min-width: 200px; | ||
| padding: 1em; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body translate="no"> | ||
| <div class="FlexContainer"> | ||
| <div class="FlexItem">Item 1</div> | ||
| <div class="FlexItem">Item 2</div> | ||
| <div class="FlexItem">Item 3</div> | ||
| <div class="FlexItem">Item 4</div> | ||
| <div class="FlexItem">Item 5</div> | ||
| <div class="FlexItem">Item 6</div> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.