Permalink
Browse files

Initial import

  • Loading branch information...
0 parents commit 357e5cd71eee4c596a38693d6126fbc4377166f0 @mixu committed Jun 8, 2015
Showing with 5,269 additions and 0 deletions.
  1. +6 −0 .gitignore
  2. +44 −0 Makefile
  3. +15 −0 bin/remove-meta.js
  4. +861 −0 input/1-positioning.md
  5. +293 −0 input/2-box-model.md
  6. +507 −0 input/3-additional.md
  7. +811 −0 input/4-flexbox.md
  8. +465 −0 input/5-tricks.md
  9. BIN input/img/anon-block.png
  10. BIN input/img/cat.jpg
  11. +54 −0 input/img/flex-direction.svg
  12. BIN input/img/format_html.png
  13. BIN input/img/git-icon.png
  14. +77 −0 input/img/rel-vs-abs-flex.svg
  15. +67 −0 input/index.md
  16. +86 −0 input/reference.md
  17. BIN layout/assets/DroidSans.woff
  18. +10 −0 layout/assets/assert.css
  19. +93 −0 layout/assets/fonts/OFL.txt
  20. BIN layout/assets/fonts/pt_sans-web-regular-webfont.eot
  21. +699 −0 layout/assets/fonts/pt_sans-web-regular-webfont.svg
  22. BIN layout/assets/fonts/pt_sans-web-regular-webfont.ttf
  23. BIN layout/assets/fonts/pt_sans-web-regular-webfont.woff
  24. BIN layout/assets/fonts/pt_sans-web-regular-webfont.woff2
  25. +124 −0 layout/assets/hljs-github.min.css
  26. +18 −0 layout/assets/jquery-1.6.1.min.js
  27. +25 −0 layout/assets/snippet.css
  28. +500 −0 layout/assets/style.css
  29. +53 −0 layout/assets/sunburst.css
  30. +77 −0 layout/highlighters/inline-snippet.js
  31. +22 −0 layout/highlighters/lib/get-each-rule-declaration-values.js
  32. +15 −0 layout/highlighters/lib/get-first-rule-dimensions.js
  33. +11 −0 layout/highlighters/lib/hl.js
  34. +31 −0 layout/highlighters/lib/rename-css-classes.js
  35. +10 −0 layout/highlighters/lib/rename-html-classes.js
  36. +53 −0 layout/highlighters/lib/row-scale.js
  37. +10 −0 layout/highlighters/problem.js
  38. +65 −0 layout/highlighters/snippet-matrix.js
  39. +39 −0 layout/highlighters/snippet.js
  40. +11 −0 layout/highlighters/spoiler.js
  41. +98 −0 layout/page.html
  42. +18 −0 package.json
  43. +1 −0 readme.md
@@ -0,0 +1,6 @@
+node_modules/
+output/
+tmp/
+output-single/
+.DS_Store
+
@@ -0,0 +1,44 @@
+
+book: concat
+ generate-md \
+ --layout ./layout \
+ --input ./input \
+ --highlight-problem ./layout/highlighters/problem.js \
+ --highlight-snippet ./layout/highlighters/snippet.js \
+ --highlight-inline-snippet ./layout/highlighters/inline-snippet.js \
+ --highlight-snippet-matrix ./layout/highlighters/snippet-matrix.js \
+ --highlight-spoiler ./layout/highlighters/spoiler.js
+
+.PHONY: book
+
+concat:
+ mkdir -p ./output-single || true
+ rm -rf ./tmp || true
+ mkdir ./tmp
+ cat input/index.md > ./tmp/single-page.md
+ cat input/1-positioning.md | bin/remove-meta.js >> ./tmp/single-page.md
+ cat input/2-box-model.md | bin/remove-meta.js>> ./tmp/single-page.md
+ cat input/3-additional.md | bin/remove-meta.js >> ./tmp/single-page.md
+ cat input/4-flexbox.md | bin/remove-meta.js >> ./tmp/single-page.md
+ cat input/5-tricks.md | bin/remove-meta.js >> ./tmp/single-page.md
+ cat input/reference.md | bin/remove-meta.js >> ./tmp/single-page.md
+ generate-md \
+ --input ./tmp/single-page.md \
+ --layout ./layout \
+ --output ./output \
+ --highlight-problem ./layout/highlighters/problem.js \
+ --highlight-snippet ./layout/highlighters/snippet.js \
+ --highlight-inline-snippet ./layout/highlighters/inline-snippet.js \
+ --highlight-snippet-matrix ./layout/highlighters/snippet-matrix.js \
+ --highlight-spoiler ./layout/highlighters/spoiler.js
+
+.PHONY: concat
+
+upload:
+ aws s3 sync ./output/ s3://book.mixu.net/css/ \
+ --region us-west-1 \
+ --delete \
+ --exclude "node_modules/*" \
+ --exclude ".git"
+
+.PHONY: upload
@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+var md = require('markdown-stream-utils'),
+ pi = require('pipe-iterators');
+
+process.stdin.setEncoding('utf8');
+
+process.stdin
+ .pipe(pi.reduce(function(obj, current) {
+ obj.contents += current;
+ return obj;
+ }, { content: '' }))
+ .pipe(md.parseHeader())
+ .pipe(pi.map(function(obj) { return obj.contents; }))
+ .pipe(process.stdout);
+
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="665" height="277" viewBox="0 0 665 277" data-ember-extension="1">
+ <style>
+ :root { fill: transparent; }
+ text,tspan { font-family: sans-serif; text-anchor: middle; font-size: 18px; fill: currentColor; }
+ .container { fill: #888; }
+ .item &gt; rect { fill: #ddd; }
+ .item &gt; text { font-size: 40px; font-weight: bold; fill: #f8f8f8; }
+ .arrow { color: hsl(0,80%,40%); stroke: currentColor; stroke-width: 3; }
+ .arrow &gt; path + path { stroke: transparent; fill: currentColor; }
+ .bracket { color: hsl(120,80%,30%); }
+ .bracket &gt; path { stroke: currentColor; stroke-width: 2; }
+ .side { color: hsl(240,80%,50%); }
+ .side &gt; path { stroke-width: 3; stroke: currentColor; }
+ .display, .item &gt; .display { font-size: 16px; font-weight: normal; font-style: italic; fill: #444; }
+ </style>
+ <g transform="translate(40,40)">
+
+
+
+
+ <rect class="container" x="0" y="0" width="500" height="120" rx="10" ry="10"/>
+ <text x="157.5" y="136" class="display">flex container</text>
+ <g class="item" transform="translate(5,5)">
+ <rect x="0" y="0" width="150" height="110" rx="5" ry="5"/>
+ <text x="75" y="70">1</text>
+ <text x="146" y="106" class="display" style="text-anchor: end;">flex item</text>
+ </g>
+ <g class="item" transform="translate(160,5)">
+ <rect x="0" y="0" width="335" height="110" rx="5" ry="5"/>
+ <text x="168" y="70">2</text>
+ <text x="3" y="106" class="display" style="text-anchor: start;">flex item</text>
+ </g>
+ <g class="arrow" transform="translate(-1,60)">
+ <circle cx="3.5" cy="0" r="5"/>
+ <path d="M 8 0 h 600"/>
+ <path d="M 608 0 v -5 l 10 5 l -10 5 v -5"/>
+ <text x="550" y="-4" stroke="transparent" fill="black">main axis</text>
+ </g>
+ <g class="arrow" transform="translate(250,222.5) rotate(-90)">
+ <circle cx="220" cy="0" r="5"/>
+ <path d="M 215 0 h -220"/>
+ <path d="M -5 0 v -5 l -10 5 l 10 5 v -5"/>
+ <text x="50" y="-4" stroke="transparent" fill="black">cross axis</text>
+ </g>
+ <g class="bracket" transform="translate(1,-15)">
+ <path d="M 0 10 v -10 h 498 v 10"/>
+ <text x="249" y="-4">main axis size</text>
+ </g>
+ <g class="bracket" transform="translate(-15,119) rotate(-90)">
+ <path d="M 0 10 v -10 h 118 v 10"/>
+ <text x="59" y="-4">cross size</text>
+ </g>
+ </g>
+</svg>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,77 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="504" height="240" viewbox="-2 -2 504 238">
+ <style>
+ text { font-family: sans-serif; font-size: 16px; text-anchor: middle; }
+ tspan.css { font-family: monospace; }
+ .bracket > path { stroke-width: 2; fill: transparent; }
+ .bracket > text { font-weight: bold; }
+ .red > path { stroke: hsl(0,80%,40%); }
+ .red > text { fill: hsl(0,80%,40%); }
+ .green > path { stroke: hsl(120,80%,30%); }
+ .green > text { fill: hsl(120,80%,30%); }
+ .blue > path { stroke: hsl(240,80%,50%); }
+ .blue > text { fill: hsl(240,80%,50%); }
+
+ .flexbox > rect { fill: #ddd; }
+ .flexbox > rect:first-of-type { fill: #888; }
+ </style>
+ <g transform="translate(50,35)">
+ <text x='200' y='-5' font-weight='bold'>All Space Distributed</text>
+ <text x='200' y='10'>(<tspan class='css'>flex-basis:0</tspan>)</text>
+ <g transform="translate(1,40)">
+ <g class='red bracket'>
+ <path d="M 1 8 v 10 h 97 v -10" />
+ <text x='50' y='33'>1</text>
+ </g>
+ <g class='green bracket'>
+ <path d="M 103 8 v 10 h 97 v -10" />
+ <text x='152.5' y='33'>1</text>
+ </g>
+ <g class='blue bracket'>
+ <path d="M 205 8 v 10 h 197 v -10" />
+ <text x='304.5' y='33'>2</text>
+ </g>
+ </g>
+ <g transform="translate(0,20)" class='flexbox'>
+ <rect x='-2' y='-2' width='409' height='27' rx='6' ry='6' />
+ <rect x='1' y='1' width='99' height='21' rx='3' ry='3' />
+ <text x='50' y='17'>short</text>
+ <rect x='103' y='1' width='99' height='21' rx='3' ry='3' />
+ <text x='152.5' y='17'>looooooong</text>
+ <rect x='205' y='1' width='199' height='21' rx='3' ry='3' />
+ <text x='304.5' y='17'>short</text>
+ </g>
+ </g>
+ <g transform="translate(50,130)">
+ <text x='200' y='10' font-weight='bold'>Extra Space Distributed</text>
+ <text x='200' y='25'>(<tspan class='css'>flex-basis:auto</tspan>)</text>
+ <g transform="translate(0,35)" class='flexbox'>
+ <rect x='-2' y='-2' width='409' height='27' rx='6' ry='6' />
+ <rect x='1' y='1' width='96' height='21' rx='3' ry='3' />
+ <text x='49' y='17'>short</text>
+ <rect x='100' y='1' width='146' height='21' rx='3' ry='3' />
+ <text x='173' y='17'>looooooong</text>
+ <rect x='249' y='1' width='155' height='21' rx='3' ry='3' />
+ <text x='326.5' y='17'>short</text>
+ </g>
+ <g transform="translate(0,78)">
+ <g class='red bracket'>
+ <path d="M 2 -15 v 10 h 29 v -10" />
+ <text x='16.5' y='10'>1</text>
+ <path d="M 68 -15 v 10 h 28 v -10" />
+ <text x='82.5' y='10'>1</text>
+ </g>
+ <g class='green bracket'>
+ <path d="M 101 -15 v 10 h 29 v -10" />
+ <text x='115.5' y='10'>1</text>
+ <path d="M 216 -15 v 10 h 29 v -10" />
+ <text x='230.5' y='10'>1</text>
+ </g>
+ <g class='blue bracket'>
+ <path d="M 250 -15 v 10 h 58 v -10" />
+ <text x='279' y='10'>2</text>
+ <path d="M 346 -15 v 10 h 57 v -10" />
+ <text x='374.5' y='10'>2</text>
+ </g>
+ </g>
+ </g>
+</svg>
@@ -0,0 +1,67 @@
+home: index.html
+next: 1-positioning.html
+title: Learn CSS Layout The Pedantic Way
+isIndex: true
+---
+
+> Bureaucrat Conrad, you are technically correct - the best kind of correct. I hereby promote you to grade 37. - Number 1.0 (Futurama, [S2E15](http://en.wikipedia.org/wiki/How_Hermes_Requisitioned_His_Groove_Back))
+
+> I won't lie to you, Neo. Every single man or woman who has fought an agent has died. But where they have failed, you will succeed.
+>
+> Why?
+>
+> I've seen an agent punch through a concrete wall; men have emptied entire clips at them and hit nothing but air; yet, their strength, and their speed, are still based in a world that is built on rules. Because of that, they will never be as strong, or as fast, as *you* can be.
+>
+> What are you trying to tell me? That I can dodge bullets?
+>
+> No, Neo. I'm trying to tell you that when you're ready ... you won't have to.
+> - Morpheus (The Matrix, 1999)
+
+CSS, like the Matrix, is a system based on rules.
+
+I wrote this set of chapters to describe those rules. It's long-form writing, but not book-length. I don't think I'd want to write a full book about CSS, but writing about CSS layout has been useful. My approach is pedantic:
+
+> *pedantic*: adjective. (2): overly concerned with minute details or formalisms, especially in teaching.
+
+I mean it in a good way, though obviously the word has a negative connotation. Is technically correct the best kind of correct? No, it's not. But for this topic, there are enough resources that aren't technically correct.
+
+You may have heard that there are `inline` and `block` elements in CSS normal flow. But did you know that in CSS, the relative positioning of block and inline elements is not actually determined by the element's `display` property? It's actually determined by the formatting context, which is influenced by the siblings of the element.
+
+You may have used `z-index` to "fix" the relative stacking order of content. But did you know that `z-index` is not absolute across the document, but rather relative to a stacking context?
+
+You may have heard about the box model. But did you know that there are in fact at least five different box models, with subtle differences in how content dimensions and `margin: auto` are treated? You will, if you read this.
+
+This is a set of chapters about CSS layout for people who already know CSS. Which seems like a small market, I admit. I took a look around for good resources for learning CSS layout, but I found that most of them weren't pedantic enough.
+
+CSS layout can be difficult to learn, because websites usually evolve incrementally. This means that you end up learning small tips and tricks here and there, and never learn the underlying layout algorithm.
+
+This set of chapters walks you through every major concept in CSS layout, and includes dozens of applied examples that illustrate the various concepts.
+
+[Chapter 1: Box positioning in CSS](./1-positioning.html) covers how the boxes that HTML elements generate are positioned relative to each other:
+
+- the three main positioning schemes in CSS: normal flow, floats and absolute positioning
+- normal flow concepts, such as anonymous box generation, formatting context, line boxes and alignment within line boxes
+- float concepts, such as float order, clearfix and float interactions with parent height
+
+[Chapter 2: Box sizing in CSS](./2-box-model.html) discusses the box model, but more importantly how the box model varies across the different positioning schemes in CSS. Concretely, height, width and margins are calculated using completely different mechanisms, and you can only understand these calculations by knowing the positioning scheme and calculation mechanism in use.
+
+[Chapter 3: Additional properties that influence positioning](./3-additional.html) covers additional mechanisms that influence box positioning, such as:
+
+- margin collapsing
+- negative margins
+- overflow
+- max-width, max-height, min-width, min-height
+- stacking contexts and the z-index property
+- how pseudo elements impact layout
+- the CSS3 box-sizing property
+
+[Chapter 4: Flexbox](./4-flexbox.html) discusses the CSS 3 flexbox layout mode.
+
+[Chapter 5: CSS layout - tricks and layout techniques](./5-tricks.html) takes what we have learned and applies it to several practical problems. It also contains small quiz-like questions to test you understanding of layout in contexts such as:
+
+- horizontal and vertical centering
+- how CSS grid frameworks work
+- multicolumn layout
+- common gotchas and layout tricks.
+
+[If you need to lookup a specific concept or property, take a look at the reference index](./reference.html) which provides an easy way to find the right chapter and section across the set of chapters.
@@ -0,0 +1,86 @@
+home: index.html
+prev: 5-tricks.html
+---
+
+# Reference index for various properties and concepts
+
+- anonymous box generation
+ - [anonymous box generation, CSS 2.1](1-positioning.html#anonymous-box-generation)
+ - [anonymous box generation, flexbox](4-flexbox.html#display-flex-and-anonymous-box-generation)
+- [positioning scheme](1-positioning.html#positioning-schemes)
+ - normal flow formatting context
+ - [block formatting context](1-positioning.html#normal-flow-block-formatting)
+ - [display: block](1-positioning.html#normal-flow-block-formatting)
+ - [height, for block-level boxes](2-box-model.html#-content-based-height-for-blocks-floats-and-inline-blocks)
+ - [width, for block-level boxes](2-box-model.html#width-calculations-block-level-elements-constraint-based-)
+ - [margin, for block-level boxes](2-box-model.html#width-calculations-block-level-elements-constraint-based-)
+ - [inline formatting context](/1-positioning.html#normal-flow-inline-formatting)
+ - [display: inline](/1-positioning.html#normal-flow-inline-formatting)
+ - [width, for inline-level boxes](2-box-model.html#box-model-calculations-for-inline-elements)
+ - [height, for inline-level boxes](2-box-model.html#box-model-calculations-for-inline-elements)
+ - [margin, for inline-level boxes](2-box-model.html#box-model-calculations-for-inline-elements)
+ - [line-height](1-positioning.html#vertical-alignment-within-line-boxes-vertical-align-)
+ - [text-align](1-positioning.html#horizontal-alignment-within-line-boxes-text-align-)
+ - [vertical-align](1-positioning.html#vertical-alignment-within-line-boxes-vertical-align-)
+ - [vertical-align: middle](1-positioning.html#vertical-align-middle-doesn-t-quite-do-what-you-d-expect)
+ - display: inline-block
+ - [height, for inline-block boxes](2-box-model.html#-content-based-height-for-blocks-floats-and-inline-blocks)
+ - [width, for inline-block boxes](2-box-model.html#width-calculations-floating-blocks-and-inline-block-elements-shrink-to-fit-)
+ - [margin, for inline-block boxes](2-box-model.html#margins-for-floating-blocks-and-inline-block-elements)
+ - [relative positioning](1-positioning.html#normal-flow-relative-positioning)
+ - [position: relative](1-positioning.html#normal-flow-relative-positioning)
+ - [float positioning](1-positioning.html#float-positioning-scheme)
+ - [float](1-positioning.html#float-positioning-scheme)
+ - [height, for floats](2-box-model.html#-content-based-height-for-blocks-floats-and-inline-blocks)
+ - [width, for floats](2-box-model.html#width-calculations-floating-blocks-and-inline-block-elements-shrink-to-fit-)
+ - [margin, for floats](2-box-model.html#margins-for-floating-blocks-and-inline-block-elements)
+ - [clear](1-positioning.html#float-clearing)
+ - [clearfix](1-positioning.html#the-clearfix)
+ - [absolute positioning](1-positioning.html#absolute-fixed-positioning-scheme)
+ - [fixed positioning](1-positioning.html#absolute-fixed-positioning-scheme)
+ - [position: absolute, position: fixed](1-positioning.html#absolute-fixed-positioning-scheme)
+ - [width, for absolutely positioned boxes](2-box-model.html#absolutely-positioned-non-replaced-elements)
+ - [height, for absolutely positioned boxes](2-box-model.html#absolutely-positioned-non-replaced-elements)
+ - [margin, for absolutely positioned boxes](2-box-model.html#absolutely-positioned-non-replaced-elements)
+- [box model](2-box-model.html)
+ - [padding](2-box-model.html#content-dimensions-and-margins)
+ - [border](2-box-model.html#content-dimensions-and-margins)
+ - [box-sizing](3-additional.html#-box-sizing-css3-)
+- miscellaneous
+ - margins
+ - [margin collapsing](3-additional.html#margin-collapsing)
+ - [negative margins](3-additional.html#negative-margins)
+ - [overflow](3-additional.html#overflow)
+ - [pseudo-elements](3-additional.html#pseudo-elements)
+ - [:before](3-additional.html#pseudo-elements)
+ - [:after](3-additional.html#pseudo-elements)
+ - `min-*`, `max-*`
+ - [min-width](3-additional.html#max-width-max-height-min-width-and-min-height)
+ - [max-width](3-additional.html#max-width-max-height-min-width-and-min-height)
+ - [min-height](3-additional.html#max-width-max-height-min-width-and-min-height)
+ - [max-height](3-additional.html#max-width-max-height-min-width-and-min-height)
+ - z-axis order
+ - [stacking context](3-additional.html#stacking-and-rendering-order)
+ - [rendering order](3-additional.html#rendering-order)
+ - [z-index](3-additional.html#stacking-contexts-and-z-index)
+- [flexbox](4-flexbox.html)
+ - [flexbox main axis](4-flexbox.html#flex-container-properties-main-and-cross-axis)
+ - [flexbox cross axis](4-flexbox.html#flex-container-properties-main-and-cross-axis)
+ - [flex lines](4-flexbox.html#flex-container-properties-flex-lines)
+ - [flex item sizing](4-flexbox.html#flex-items-flex-item-sizing)
+ - [dividing flex items across flex lines](4-flexbox.html#dividing-flex-items-onto-flex-lines)
+ - [alignment for flex lines and items](4-flexbox.html#flex-line-alignment-and-flex-item-alignment)
+ - [display: flex](4-flexbox.html#display-flex-and-anonymous-box-generation)
+ - [flex-direction](4-flexbox.html#flex-container-properties-main-and-cross-axis)
+ - [flex-wrap](4-flexbox.html#flex-container-properties-flex-lines)
+ - [flex-basis](4-flexbox.html#flex-basis)
+ - [flex-grow](4-flexbox.html#calculations-for-flex-grow-)
+ - [flex-shrink](4-flexbox.html#calculations-for-flex-shrink-)
+ - [justify-content](4-flexbox.html#main-axis-alignment-justify-content-)
+ - [align-content](4-flexbox.html#cross-axis-alignment-for-flex-lines-align-content-)
+ - [align-items](4-flexbox.html#cross-axis-alignment-for-flex-items-align-items-align-self-)
+ - [align-self](4-flexbox.html#cross-axis-alignment-for-flex-items-align-items-align-self-)
+ - [order](4-flexbox.html#the-order-property)
+
+
+
Binary file not shown.
@@ -0,0 +1,10 @@
+.FAIL b, .ERROR b { color: red; /* #990066 */ }
+.PASS b { color: #73C836; }
+input.runner {
+ margin-top: 0.1em;
+ margin-bottom: 1em;
+ font-size: large;
+ padding: 0.3em;
+}
+ol.runner { margin-bottom: 0.2em; }
+pre.run { margin-bottom: 0.2em;}
Oops, something went wrong.

0 comments on commit 357e5cd

Please sign in to comment.