├── .gitignore ├── 404.html ├── LICENSE.md ├── README.md ├── chapters ├── 1-the-box │ ├── images │ │ ├── box-model.sketch │ │ │ ├── Data │ │ │ ├── QuickLook │ │ │ │ ├── Preview.png │ │ │ │ └── Thumbnail.png │ │ │ ├── metadata │ │ │ └── version │ │ └── box-model.svg │ └── index.html ├── 2-layout │ └── index.html ├── 3-tables │ └── index.html ├── 4-color │ ├── images │ │ └── all-rgb.png │ └── index.html ├── 5-typography │ └── index.html ├── 6-transitions │ └── index.html ├── _template.html └── preface │ └── index.html ├── config.rb ├── css ├── base.css ├── chapter.css ├── eager.css ├── home.css ├── logo.css ├── potions.css └── social.css ├── favicon.ico ├── fool-github ├── css.css └── more-css.css ├── index.html ├── js ├── chapters.coffee ├── chapters.js ├── footer.coffee ├── footer.js ├── home.coffee └── home.js ├── logo.png ├── magician-helpers └── blackboard │ └── index.html ├── media ├── ebook-cover-large.png └── ebook-cover.png ├── planning ├── css-selectors.png └── planning.md ├── potions ├── buttons │ └── index.html ├── content-reordering │ └── index.html ├── letter-spacing │ └── index.html ├── overflow-ellipsis │ ├── config.rb │ ├── css │ │ └── overflow-ellipsis.css │ ├── index.html │ └── sass │ │ └── overflow-ellipsis.sass ├── potpourri │ └── index.html ├── table-styling │ ├── config.rb │ ├── css │ │ └── table-styling.css │ ├── index.html │ └── sass │ │ └── table-styling.sass ├── three-pane-app-with-color │ ├── config.rb │ ├── css │ │ └── three-pane-app-with-color.css │ ├── index.html │ └── sass │ │ └── three-pane-app-with-color.sass ├── three-pane-app │ ├── config.rb │ ├── css │ │ └── three-pane-app.css │ ├── index.html │ └── sass │ │ └── three-pane-app.sass └── two-pane-app │ ├── config.rb │ ├── css │ └── two-pane-app.css │ ├── index.html │ └── sass │ └── two-pane-app.sass └── sass ├── _colors.sass ├── _rainbow.sass ├── _variables.sass ├── base.sass ├── chapter.sass ├── eager.sass ├── home.sass ├── logo.sass ├── potions.sass └── social.sass /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/404.html -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/LICENSE.md -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/README.md -------------------------------------------------------------------------------- /chapters/1-the-box/images/box-model.sketch/Data: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/1-the-box/images/box-model.sketch/Data -------------------------------------------------------------------------------- /chapters/1-the-box/images/box-model.sketch/QuickLook/Preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/1-the-box/images/box-model.sketch/QuickLook/Preview.png -------------------------------------------------------------------------------- /chapters/1-the-box/images/box-model.sketch/QuickLook/Thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/1-the-box/images/box-model.sketch/QuickLook/Thumbnail.png -------------------------------------------------------------------------------- /chapters/1-the-box/images/box-model.sketch/metadata: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/1-the-box/images/box-model.sketch/metadata -------------------------------------------------------------------------------- /chapters/1-the-box/images/box-model.sketch/version: -------------------------------------------------------------------------------- 1 | 18 -------------------------------------------------------------------------------- /chapters/1-the-box/images/box-model.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/1-the-box/images/box-model.svg -------------------------------------------------------------------------------- /chapters/1-the-box/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/1-the-box/index.html -------------------------------------------------------------------------------- /chapters/2-layout/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/2-layout/index.html -------------------------------------------------------------------------------- /chapters/3-tables/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/3-tables/index.html -------------------------------------------------------------------------------- /chapters/4-color/images/all-rgb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/4-color/images/all-rgb.png -------------------------------------------------------------------------------- /chapters/4-color/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/4-color/index.html -------------------------------------------------------------------------------- /chapters/5-typography/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/5-typography/index.html -------------------------------------------------------------------------------- /chapters/6-transitions/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/6-transitions/index.html -------------------------------------------------------------------------------- /chapters/_template.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/_template.html -------------------------------------------------------------------------------- /chapters/preface/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/chapters/preface/index.html -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/config.rb -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/css/base.css -------------------------------------------------------------------------------- /css/chapter.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/css/chapter.css -------------------------------------------------------------------------------- /css/eager.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/css/eager.css -------------------------------------------------------------------------------- /css/home.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/css/home.css -------------------------------------------------------------------------------- /css/logo.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/css/logo.css -------------------------------------------------------------------------------- /css/potions.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/css/potions.css -------------------------------------------------------------------------------- /css/social.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/css/social.css -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/favicon.ico -------------------------------------------------------------------------------- /fool-github/css.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/fool-github/css.css -------------------------------------------------------------------------------- /fool-github/more-css.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/fool-github/more-css.css -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/index.html -------------------------------------------------------------------------------- /js/chapters.coffee: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/js/chapters.coffee -------------------------------------------------------------------------------- /js/chapters.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/js/chapters.js -------------------------------------------------------------------------------- /js/footer.coffee: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/js/footer.coffee -------------------------------------------------------------------------------- /js/footer.js: -------------------------------------------------------------------------------- 1 | // footer.js 2 | -------------------------------------------------------------------------------- /js/home.coffee: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/js/home.coffee -------------------------------------------------------------------------------- /js/home.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/js/home.js -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/logo.png -------------------------------------------------------------------------------- /magician-helpers/blackboard/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/magician-helpers/blackboard/index.html -------------------------------------------------------------------------------- /media/ebook-cover-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/media/ebook-cover-large.png -------------------------------------------------------------------------------- /media/ebook-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/media/ebook-cover.png -------------------------------------------------------------------------------- /planning/css-selectors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/planning/css-selectors.png -------------------------------------------------------------------------------- /planning/planning.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/planning/planning.md -------------------------------------------------------------------------------- /potions/buttons/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/buttons/index.html -------------------------------------------------------------------------------- /potions/content-reordering/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/content-reordering/index.html -------------------------------------------------------------------------------- /potions/letter-spacing/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/letter-spacing/index.html -------------------------------------------------------------------------------- /potions/overflow-ellipsis/config.rb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/overflow-ellipsis/config.rb -------------------------------------------------------------------------------- /potions/overflow-ellipsis/css/overflow-ellipsis.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/overflow-ellipsis/css/overflow-ellipsis.css -------------------------------------------------------------------------------- /potions/overflow-ellipsis/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/overflow-ellipsis/index.html -------------------------------------------------------------------------------- /potions/overflow-ellipsis/sass/overflow-ellipsis.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/overflow-ellipsis/sass/overflow-ellipsis.sass -------------------------------------------------------------------------------- /potions/potpourri/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/potpourri/index.html -------------------------------------------------------------------------------- /potions/table-styling/config.rb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/table-styling/config.rb -------------------------------------------------------------------------------- /potions/table-styling/css/table-styling.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/table-styling/css/table-styling.css -------------------------------------------------------------------------------- /potions/table-styling/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/table-styling/index.html -------------------------------------------------------------------------------- /potions/table-styling/sass/table-styling.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/table-styling/sass/table-styling.sass -------------------------------------------------------------------------------- /potions/three-pane-app-with-color/config.rb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/three-pane-app-with-color/config.rb -------------------------------------------------------------------------------- /potions/three-pane-app-with-color/css/three-pane-app-with-color.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/three-pane-app-with-color/css/three-pane-app-with-color.css -------------------------------------------------------------------------------- /potions/three-pane-app-with-color/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/three-pane-app-with-color/index.html -------------------------------------------------------------------------------- /potions/three-pane-app-with-color/sass/three-pane-app-with-color.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/three-pane-app-with-color/sass/three-pane-app-with-color.sass -------------------------------------------------------------------------------- /potions/three-pane-app/config.rb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/three-pane-app/config.rb -------------------------------------------------------------------------------- /potions/three-pane-app/css/three-pane-app.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/three-pane-app/css/three-pane-app.css -------------------------------------------------------------------------------- /potions/three-pane-app/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/three-pane-app/index.html -------------------------------------------------------------------------------- /potions/three-pane-app/sass/three-pane-app.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/three-pane-app/sass/three-pane-app.sass -------------------------------------------------------------------------------- /potions/two-pane-app/config.rb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/two-pane-app/config.rb -------------------------------------------------------------------------------- /potions/two-pane-app/css/two-pane-app.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/two-pane-app/css/two-pane-app.css -------------------------------------------------------------------------------- /potions/two-pane-app/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/two-pane-app/index.html -------------------------------------------------------------------------------- /potions/two-pane-app/sass/two-pane-app.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/potions/two-pane-app/sass/two-pane-app.sass -------------------------------------------------------------------------------- /sass/_colors.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/_colors.sass -------------------------------------------------------------------------------- /sass/_rainbow.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/_rainbow.sass -------------------------------------------------------------------------------- /sass/_variables.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/_variables.sass -------------------------------------------------------------------------------- /sass/base.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/base.sass -------------------------------------------------------------------------------- /sass/chapter.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/chapter.sass -------------------------------------------------------------------------------- /sass/eager.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/eager.sass -------------------------------------------------------------------------------- /sass/home.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/home.sass -------------------------------------------------------------------------------- /sass/logo.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/logo.sass -------------------------------------------------------------------------------- /sass/potions.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/potions.sass -------------------------------------------------------------------------------- /sass/social.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adamschwartz/magic-of-css/HEAD/sass/social.sass --------------------------------------------------------------------------------