csswizardry/CSS-Guidelines HTML5 For Web Designers, Chapter 1 Home HTML is the unifying language of the World Wide Web. Using just the simple tags it contains, the human race has created an astoundingly diverse network of hyperlinked documents, from Amazon, eBay, and Wikipedia, to personal blogs and websites dedicated to cats that look like Hitler. HTML5 is the latest iteration of this lingua franca. As with the web itself, the HyperText Markup Language was the brainchild of Sir Tim Berners-Lee. Sir Tim didn’t come up with the idea of using tags consisting of words between angle brackets; those kinds of tags already existed in the SGML (Standard Generalized Markup Language) format. From IETF To W3C: The Road To HTML 4 There was never any such thing as HTML 1. their documents using an <img> tag. The role of the IETF was superceded by the W3C, the World Wide Web Consortium, where subsequent iterations of the HTML standard have been published at At that time, HTML faced its first major turning point. XHTML 1: HTML As XML Reunification
Base The Foundation All modules in Pure build on top of Normalize.css. It's our foundational layer to maintain some degree of cross-browser consistency. We use Normalize v1.x because it supports older versions of Internet Explorer. We like Normalize so much that we put it on our CDN. A bit about Normalize.css Normalize.css is an open-source project by Nicolas Gallagher and Jonathan Neal. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. Normalize.css comes with great documentation and a thorough guide explaining how it differs from a traditional reset. Extras In addition to Normalize.css rules, Pure's Base module contains some common styles that are used by most websites. Hiding Elements Add the hidden attribute to an HTML element to hide it from the screen via display: none ! Responsive Images Add the .pure-img class name to an <img> element to make it scale with the viewport. Moving beyond Normalize
Pragmatic, practical font sizing in CSS One thing I’ve been thinking a lot about lately is how to build sites properly. Not what we have been told is proper, but what actually makes sense for us as developers. I recently spoke at The Digital Barn on exactly this; my talk—Breaking Good Habits—dealt with how we as developers need to solve problems not only for our users and clients, but for ourselves as well. Nicole Sullivan has laid a lot of new foundations for us in her work on OOCSS and her ‘unconventional’ but absolutely spot-on approach to building websites. Double-stranded heading hierarchy Another absolutely stellar nugget of wisdom she’s given us is what I call double-stranded heading hierarchy. For example, if—for whatever reason—we want our h2s in our sidebar to be the same size as a h1, and the h4s in our footer to be the same size as a h3, we might have had some code like this: But now we’d have: Which now gives us: Neat, huh? Extending this? Repetition of font-size, line-height etc declarations. Preset font sizes Addendum
Dive into HTML5: In memory of Mark Pilgrim Mark Pilgrim is gone and with him all of his sites and work. I more than enjoyed his book “Dive into HTML5”. It was a bible of transitioning and progressive enhancement back when nobody was certain about the direction of HTML working groups and browser support. It helped me learn about the semantics of new elements, playing video without Flash, local storage, offline apps, manipulating browser history, and more. It helped me appreciate feature-detection with JavaScript instead of browser sniffing. Mark Pilgrim left, but this book still lives on. Long ago, when Why the Lucky Stiff disappeared in a similar fashion, I saved his Poignant Guide to Ruby and re-published it online. Today, I’m republishing Mark Pilgrim’s Dive into HTML5. The eBook has an embedded table of contents, working cross-references, well-placed page breaks and tons of others tiny tweaks and enhancements.
designyourway I used to ignore CSS generators because I thought that there isn’t any use for them. This happened before CSS3 when I didn’t need a generator to create something, however with the gaining popularity that CSS3 had, I had to move towards it and start learning it to adapt to the new standards as most web designers did. These are very interesting tools which can help you a lot when wanting to learn CSS3 faster. Although most people don’t use them like that, instead they use it just to… well, generate CSS code. It’s not a crime to generate CSS code, a lot of people are also using CSS generators because time is really important and these tools save a lot of time. Imagine that there’s a CSS generator for almost everything: border generator, background generator, box generator, gradient generator, shadow generator and the most popular buttons or menu generators. CSS3 generator CSS3 Click Chart css3.me css3maker.com spritebox.net css3pie.com css3menu.com Ultimate CSS Gradient Generator Button Maker
CSS3 technology in action: Design examples Ryan Boudreaux highlights some beautiful examples of CSS3 design projects by some individuals who are at the forefront in tinkering with the new code possibilities. While CSS3 and HTML5 technologies are still fresh for most organizations, there are many trend-setting web developers who are taking the new tools by storm. This post will highlight several examples which utilize the full potential of CSS3 in delivering excellence in design, look, and feel. The first group includes several projects and experiments by individuals tinkering with CSS3. CSS3 Analog Clock by Paul Hayes is his quick project and experiment that works in Safari and Google Chrome. Figure A Snow Flakes by Natalie Downe utilizes examples of CSS3 animation, text-shadow, transform, and keyframes to create a page of gently falling snow flakes. Figure B Figure C Figure D Figure E Polaroid's with CSS3 by Zurb is a gallery display using CSS3 transform and rotate to turn images into a set of randomly selected Polaroid pictures.
CSS examples CSS Gradients for IE9 « CSS3 Wizardry This works with Desktop IE9, Desktop Firefox, Desktop Chrome, Desktop Safari, Desktop Opera, iOS, and Android. Attention! IE9 will not destroy the world, kill babies, or take away your home or job. Simply put, IE9 is the best browser Microsoft has ever released. Shortly after the initial launch of the beta of IE9, I began testing to see what kind of support it had for all the rich and exciting features CSS3 offers for Web layout and interaction. So what didn’t make it into IE9? When I look at IE9′s support for CSS3, it appears they decided to pick the low hanging fruit: border radius, drop shadow, multiple backgrounds, etc. I have no experience working with Adobe Flash. Presently my main area of focus is the mobile Web on Android, Blackberry 6, iOS and WebOS. I’m going to take one example of an HTML/CSS3 implementation of iOS’s popup dialog box which I originally created for use on iOS devices and show how I got it to render equally in Chrome, Firefox, IE9, Opera and Safari. That’s it.