Webdesigninformer.com

Eric Meyer Go to the source

Hey, any interest in spending a few days in a luxury lodge in the Great Smoky Mountains this coming spring with me and Aaron Gustafson, learning about and working with HTML5 and CSS3? Then you might want to sign up for Retreats 4 Geeks: HTML5 & CSS3 in the very near future, because it was announced late yesterday and as of now there are only six spots still available. It’ll be a very focused two days of training and a day of hands-on project work with a very small group of people, and it’ll be a ton of fun! Personally I’m looking forward to this for many reasons, but two stand out: this sort of very-small-group training and team project work setup is a new thing for me, and it’s the sort of thing I’ve thought about doing on and off for more than a decade but never quite found the time to do. Aaron, thankfully, did find the time and I’m honored that he asked me to take part. I hope I’ll see some of you this April in Tennessee! … Read the rest here

Adactio Go to the source

One of the many form enhancements provided by HTML5 is the datalist element . It allows you to turn a regular input field into a combo-box . Using the list attribute on an input , you can connect it to a datalist with the corresponding ID. The datalist itself contains a series of option elements. <input list=”suggestions”> <datalist id=”suggestions”> <option value=”foo”></option> <option value=”bar”></option> <option value=”baz”></option> </datalist> I can imagine a number of use cases for this: “Share this” forms, like the one on Last.fm, that allow you to either select from your contacts on the site, or enter email addresses, separated by commas. … Read the rest here

Adactio Go to the source

One of the many form enhancements provided by HTML5 is the datalist element . It allows you to turn a regular input field into a combo-box . Using the list attribute on an input , you can connect it to a datalist with the corresponding ID. The datalist itself contains a series of option elements. <input list=”suggestions”> <datalist id=”suggestions”> <option value=”foo”></option> <option value=”bar”></option> <option value=”baz”></option> </datalist> I can imagine a number of use cases for this: “Share this” forms, like the one on Last.fm, that allow you to either select from your contacts on the site, or enter email addresses, separated by commas. Using input type=”email” with a multiple attribute, in combination with a datalist would work nicely… Read the rest here

Eric Meyer Go to the source

A few changes for beta 2 of the updated reset, presented here: /* http://meyerweb.com/eric/tools/css/reset/ v2.0b2 | 201101 NOTE: THIS IS A BETA VERSION (see previous line) USE WITH CAUTION AND TEST WITH ABANDON */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ”; content: none; } table { border-collapse: collapse; border-spacing: 0; } First, the small changes: adding embed , output , and ruby to the first rule. I went back and forth on these quite a bit, which is why they weren’t in the first cut. However, none of them seem to be replaced so they’re in. Others, such as command , are replaced and so stay out for the same reason that form inputs are left out. ( img is a special case.) The HTML5 element I’m still stuck on is datalist , which seems sort of replaced but then again maybe not. I’m really close to including it on the same grounds that I include canvas , but it’s hard to know if that’s a good idea… Read the rest here

Adactio Go to the source

David made a comment on Twitter about some markup he was working on: Feels dirty setting id’s on main HTML5 page header and footer, but overriding inheritance they cause seems needlessly laborious. I know the feeling. I don’t like using IDs at all, unless I want part of a document to be addressable through the fragment identifier portion of the URL. While I think it’s desirable to use the id attribute to create in-document permalinks, I don’t think it’s desirable to use the id attribute just as a styling hook. Its high specificity may seem a blessing but, in my experience, it quickly leads to duplicated CSS… Read the rest here

Adactio Go to the source

David made a comment on Twitter about some markup he was working on: Feels dirty setting id’s on main HTML5 page header and footer, but overriding inheritance they cause seems needlessly laborious. I know the feeling. I don’t like using IDs at all, unless I want part of a document to be addressable through the fragment identifier portion of the URL. While I think it’s desirable to use the id attribute to create in-document permalinks, I don’t think it’s desirable to use the id attribute just as a styling hook. … Read the rest here

Eric Meyer Go to the source

In the reset revision draft I posted Monday , I got tripped up by some last-minute changes and I’m going to think out loud (so to speak, as it were) about possible solutions. The problem is that the presence of a in the first rule means that focus outlines on hyperlinks are removed. Thus in commenting out the :focus rule I restored default focus styles to form elements, but not hyperlinks. This wasn’t a problem up until roughly a day before I published, but last-minute tinkering brought it back. I’d say that’ll teach me not to tinker, but I hate to lie. I’ve come up with the following solutions. … Read the rest here

Eric Meyer Go to the source

It was close to four years ago now that I first floated (ha!), publicly refined , and then published at its own home what’s become known as the “Eric Meyer Reset”. At the time, I expected it would be of interest to a small portion of the standards community, provoke some thought among fellow craftspeople, and get used occasionally when it seemed handy. Instead, it’s ended up almost everywhere. (This occasionally backfires on me when people use it in the CSS of e-mail campaigns, it’s exposed by older mail clients, and people then mail me to demand that I unsubscribe them from the mailing list. But that’s not the worst backfire—I’ll get to that in just a minute.) Four years is long enough for a revisit, I’d say… Read the rest here

Adactio Go to the source

Because I was so busy, the two-year anniversary of Huffduffer passed unnoticed back in October. Two years! It’s hard to believe. It seems like just yesterday that I launched it. It’s been ticking along nicely for all that time and I’ve been tweaking it whenever I get the chance. … Read the rest here

Cameron Moll Go to the source

24 ways: An Introduction to CSS 3-D Transforms : Really thorough and fairly technical. If you

SimpleBits Go to the source

Back in 2004, Christopher Schmitt asked me to share a CSS panel at SXSW alongside

Eric Meyer Go to the source

It’s well past time for me to spend a few minutes reflecting on An Event Apart in 2010. In two words: absocrazifreakiperfluously staggerblasticating . [I totally stole those .

Cameron Moll Go to the source

24 ways: Golden Spirals : While the tutorial has no real practical application, the closing paragraph sums up why you should give it a read nonetheless: [This] has been a good excuse to play with proportions, positioning and the immediate child selector, as well as new CSS3 features such as border-radius and RGBA colours. If you are not already designing with golden proportions, then perhaps this will inspire you to begin. … Read the rest here

SimpleBits Go to the source

Not sure what the app will actually do, but scrolling through this site is fun as heck. There is no fold. Also nice use of the free webfont, Franchise . … Read the rest here

SimpleBits Go to the source

The folks at Fontdeck have launched an advent calendar featuring a new font and other offers each day. Really nifty design and use of CSS3 as well. … Read the rest here

Adactio Go to the source

It’s the start of the Christmas season. I know it’s the start of the Christmas season, not just because Brighton is currently blanketed in snow, but also because 24 Ways —the advent calendar for geeks—has kicked off with its first article . Hurray! And this year, all of the articles will be available as a book from Five Simple Steps for a mere

Hicksdesign Go to the source

It’s been an awful lot of work to get what was on the face of it, a simple idea , finally released. After 4 months of design, development and bug-fixing, my Shelf theme for The Theme Foundry is now available for Wordpress and Tumblr. This is a time of both joy, pride and nervousness! I’ve been working with Yan Sarazin of Statik Pulse , who has implemented the javascript side, and Brandon Dove who converted the HTML & CSS design into the final Wordpress Theme. Along with Drew Strojny who commissioned the theme, the team has been a joyful experience to work with! I’ve also learned a lot about using Git from this project, which has been an unexpected bonus. I’ll be doing a more thorough write-up of the process and what interesting challenges we had to solve along the way, but in the meantime, there is a Flickr Set where I’ve been documenting the process, and Drew has a written a post to introduce Shelf . Tagged: shelf , theme , tumblr , wordpress … Read the rest here

Cameron Moll Go to the source

ZURB

Eric Meyer Go to the source

Well, I done did it again: I wrote a book. This time, it’s Smashing CSS: Professional Techniques for Modern Layout , published by Wiley and Sons and available as of some time last week. (Just in time for the holiday gift-giving season! Buy one for everybody in the family! Don’t delay—act now!) What’s different about this book as compared to others I’ve written is that this is a collection of short tips, tricks, and techniques for using CSS in everyday work. Many of them involve making changes and seeing the results, similar to my New Riders books, but where those books had chapter-long projects these are usually only a page or three in length. Well, okay, a few get up towards ten pages, but only on occasion. Another difference is that Smashing CSS spans the spectrum from basic tools and browser features that can speed your development and debugging to some cutting-edge ideas and a taste of the latest CSS3 hotness… Read the rest here

Snook Go to the source

CSS3 for Web Designers is the latest release from A Book Apart which also recently released HTML5 for Web Designers . Having received a copy of this lightweight book in electronic format, I promptly loaded it onto my iPad in preparation for a flight. The book proved to be so brief and easy-to-read, in fact, that I was through its 130 pages before I even boarded my plane. Therefore, I took some time on my flight to write up my thoughts on said book. … Read the rest here