Skip to content

Instantly share code, notes, and snippets.

@oksushi

oksushi/dabblet.css

Forked from LeaVerou/dabblet.css
Created May 30, 2013 11:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save oksushi/5677171 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save oksushi/5677171 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @LeaVerou LeaVerou revised this gist Apr 24, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  2. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    <div contentEditable>OMG, I’m centered!</div>
    <div>OMG, I’m centered!</div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
  3. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,8 @@ html, body { height: 100%; }
    body {
    width: 100%; /* needed for FF */
    margin: 0;

    /* Flexbox hawtness */
    display: box; display: flexbox;
    box-align: center; flex-align: center;
    box-pack: center; flex-pack: center;
  4. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@ div {
    padding: 1em 1.5em;

    /* Fallback to look decent w/out Flexbox */
    width: 10em;
    max-width: 10em;
    margin: 1em auto;

    /* Make it pretty */
  5. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,7 @@ div {
    padding: 1em 1.5em;

    /* Fallback to look decent w/out Flexbox */
    width: 10em;
    margin: 1em auto;

    /* Make it pretty */
  6. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,8 @@ body {

    div {
    padding: 1em 1.5em;

    /* Fallback to look decent w/out Flexbox */
    margin: 1em auto;

    /* Make it pretty */
  7. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -21,5 +21,7 @@ div {
    background: slategray;
    text-align: center;
    border-radius: .3em;
    font: bold 100% sans-serif;
    color: #405060;
    font: bold 150% sans-serif;
    text-shadow: 0 2px 1px hsla(0,0%,100%,.2);
    }
  8. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -20,4 +20,6 @@ div {
    /* Make it pretty */
    background: slategray;
    text-align: center;
    border-radius: .3em;
    font: bold 100% sans-serif;
    }
  9. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ body {
    }

    div {
    padding: 1em;
    padding: 1em 1.5em;
    margin: 1em auto;

    /* Make it pretty */
  10. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -14,9 +14,10 @@ body {
    }

    div {
    width: 10em;
    padding: 1em;
    margin: 1em auto;

    /* Make it pretty */
    background: slategray;
    text-align: center;
    }
  11. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,7 @@
    */

    html, body { height: 100%; }

    body {
    width: 100%; /* needed for FF */
    margin: 0;
  12. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,10 +3,9 @@
    * Lea Verou & David Storey
    */

    html { height: 100%; }
    html, body { height: 100%; }
    body {
    width: 100%; /* needed for FF */
    height: 100%;
    margin: 0;
    display: box; display: flexbox;
    box-align: center; flex-align: center;
  13. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 2 changed files with 2 additions and 1 deletion.
    1 change: 1 addition & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@

    html { height: 100%; }
    body {
    width: 100%; /* needed for FF */
    height: 100%;
    margin: 0;
    display: box; display: flexbox;
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  14. @LeaVerou LeaVerou revised this gist Apr 17, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    <div contentEditable>Look, I’m centered!</div>
    <div contentEditable>OMG, I’m centered!</div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
  15. @LeaVerou LeaVerou created this gist Apr 17, 2012.
    21 changes: 21 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    /**
    * Vertical centering with Flexbox + margin fallback
    * Lea Verou & David Storey
    */

    html { height: 100%; }
    body {
    height: 100%;
    margin: 0;
    display: box; display: flexbox;
    box-align: center; flex-align: center;
    box-pack: center; flex-pack: center;
    }

    div {
    width: 10em;
    padding: 1em;
    margin: 1em auto;
    background: slategray;
    text-align: center;
    }
    1 change: 1 addition & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div contentEditable>Look, I’m centered!</div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}