A CSS course for web developers who want to be magicians.
adamschwartz / magic-of-css Goto Github PK
View Code? Open in Web Editor NEWA CSS course to turn you into a magician.
Home Page: https://adamschwartz.co/magic-of-css
License: MIT License
A CSS course to turn you into a magician.
Home Page: https://adamschwartz.co/magic-of-css
License: MIT License
A CSS course for web developers who want to be magicians.
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.
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
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'.
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.
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!
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
_site/chapters/2-layout/index.html
:
<div>
not allowed as child of element <code>
in this context. (Suppressing further errors from this subtree.)" Line no: 136<div>
not allowed as child of element <code>
in this context. (Suppressing further errors from this subtree.)" Line no: 137<div>
not allowed as child of element <code>
in this context. (Suppressing further errors from this subtree.)" Line no: 138<div>
not allowed as child of element <code>
in this context. (Suppressing further errors from this subtree.)" Line no: 154I think it needs a chapter about animations / keyframes to be more magic ...
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!
Accident...
Based on woxorz's thoughtful comments on Reddit.
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?
This page has been temporarily disabled due to a misconfigured custom domain.
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 )
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.