adamschwartz / magic-of-css

A CSS course to turn you into a magician.

The Magic of CSS

A CSS course for web developers who want to be magicians.

• The Magic of CSS
  • Preface
  • Chapter 1: The Box
  • Chapter 2: Layout
  • Chapter 3: Tables
  • Chapter 4: Color
  • Chapter 5: Typography
  • Chapter 6: Transitions
  • See planning.md for what’s next...

magic-of-css's Issues

'Button' potion - focus states

Given best practices in accessibility, it's probably a good idea to have keyboard focus states for your buttons. Pretty commonly forgotten by newbies, but makes a great deal of difference to those who rely on them.

Background color

One thing I learned the hard way: Do not assume the user has its background set to white.
So please set a background-color.

Experiment with fixed background attachment for active contextual code blocks

HTML validation error in Chapter 2

_site/chapters/2-layout/index.html:

• "Element <div> not allowed as child of element <code> in this context. (Suppressing further errors from this subtree.)" Line no: 136
• "Element <div> not allowed as child of element <code> in this context. (Suppressing further errors from this subtree.)" Line no: 137
• "Element <div> not allowed as child of element <code> in this context. (Suppressing further errors from this subtree.)" Line no: 138
• "Element <div> not allowed as child of element <code> in this context. (Suppressing further errors from this subtree.)" Line no: 154

Content Reordering potion doesn’t work in Firefox

Reported by https://twitter.com/MattTams/status/753619416223457280

The New CSS Layout

With the rise of Flexboxes and Grids. This resource is quickly being outdated, unfortunately.
I think it's worth forking, maintaining or reinventing.

For example, reliable center alignment with two lines:

display: grid;
place-items: center;

Likewise, lots more potions with css grids would be amazing.
CSS Framework-style abuse of inline-blocks for grid layout becomes unnecessary.

Rachel Andrew wrote an excellent book on the topic: https://abookapart.com/products/the-new-css-layout

I think an updated magic of css online resource that distils the same teachings would be invaluable.

"Site temporarily disabled"

This page has been temporarily disabled due to a misconfigured custom domain.

http://adamschwartz.co/magic-of-css

non webkit support?

The transitions in http://adamschwartz.co/magic-of-css/chapters/6-transitions/ seem to be web kit only.

Do you have plans to add ff support?

Better `float`/`inline-block` usage recomendations

Based on woxorz's thoughtful comments on Reddit.

HTML5 validity error in potions/content-reordering

Error: Element section (<section class="b">) not allowed as child of element rt in this context.
Contexts in which element section may be used: Where flow content is expected.
Content model for element rt: Phrasing content.

(Also, tangentially, just FYI, <rb> isn't currently part of HTML5; see also http://www.w3.org/html/wg/tracker/issues/172 )

Typo on Chapter 4 (Colors): 'skeumorophism' used instead of 'skeuomorphism' [Minor]

In the '...and not the human eye' section, skeuomorphism is misspelled.

Even more minor, the last sentence of the 'color tools' has a typo: 'you app' was used instead of 'your app'.

—

Accident...

when next chapters?

Sorry for making an issue for this, but I've read the "magic of css" and I love it, for the first time I've read something about css that had sense.. and humour, yet I see that since several months there was no updates, so I was wondering if you will find time to write next chapters, or this project is RIP?..

If not and you are planning adding new chapters soon, I would love to translate the whole text into polish , with your permission, because I think that it is worth to spread the magic of css around the globe ;)

thank you for excellent work so far and good luck with eager.io!

3 Pane App

While playing around with the 3 Pane App, depending on the size of my browser window / if I added too much content to the middle section, the content would get cut off and become unreadable beyond the bottom of the browser window.

I found adding the following css to the .middle selector fixed the issue.

.three-pane-app .bottom .middle {
height: 100%;
overflow: auto;
}

however, if the point of the middle column was to not vertically scroll, then never mind :)

Thanks

CSS Triggers

http://csstriggers.com

Elements on homepage constantly resize in Chrome

I'm using a 13" rMBP running OSX 10.9.2, and used Chrome 29.0.1547.57 to view the page. It works just fine on Firefox and Safari, though.

Animation chapter

I think it needs a chapter about animations / keyframes to be more magic ...

...brilliant

a quick note to say thank you. Your chapter 2, Layout: "Grid with text-align justify" has clearly and succinctly just solved an issue I was grappling with... I look forward to any new chapters

Footers

Great project! One request:

Over the years, footers have really given people a heck of a time, myself included. Would you mind adding idiomatic footers to your app potions? I'm hoping there's an opportunity for some applied magic. :)

Thanks!