Login or Register
Facebook
Why Must I Go This Route?
Drawar allows you to register through your Facebook, Google, Yahoo, AOL or Twitter accounts. The reason this method is used is because it makes sure real people are going to use the site and participate in the Community. It also means no personal info is stored here which is a very good thing.
If you need a reason to register then just check out the About page. Drawar is a great place to learn and discuss design amongst great people.
A web design and development community for people with a thirst for knowledge. Follow the Community on Twitter right here.
Links
The Messy Room Problem
A look at why criticizing a site's design can generate negative reactions.
Word-Wrap: A CSS3 Property That Works in Every Browser
The word-wrap property is one of the oldest CSS3 properties, it works in IE6, and has a practical use especially for bloggers.
Design Attack: Improving Forrst
A friendly critique of Forrst's user interface.
CSS3 Multi-Column Layout & Column-Count
I use the column-count & column-gap property on the search page of this site to break my Tags list into 4 columns. Because the content is dynamic, I couldn’t just hard code each column, and I didn’t want to waste kilobytes on running a WordPress plugin to achieve an effect that was possible with a single line of CSS. Currently, only firefox and webkit browsers supports this feature and they all seem to do it differently. I’ve noticed that Mobile Safari, Safari and Firefox each render the exact same column-count CSS differently.
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.
With beautiful type comes great responsibility
The trick is knowing how / when to use them, their history, your message and how it’s being stated with the type personality you select.
Pure CSS collapsible tree menu
The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not contempt with any of those solutions I investigated doing it with pure CSS, I got a good head start from my Custom Radio and Checkbox inputs article. From there I’ve come up with a solution that works pretty well.
Data URIs make CSS sprites obsolete
First, I don’t think CSS sprites are all that complicated anymore, especially with tools like the online CSS Sprite Generator readily available. Second, CSS sprites only really have to be used for older browsers (looking at you, IE6 and IE7), as this problem is easily solved in other browsers by using data URIs.
An InDesign for HTML and CSS?
HTML is a language with roots in library science. It doesn’t know or care what content looks like. (Even HTML5 doesn’t care what content looks like.) Neither a tool like Photoshop, which is all about pixels, nor a tool like Illustrator, which is all about vectors, can generate semantic HTML, because the visual and the semantic are two different things.
The Helvetica Killer
Bruno Maag is so enraged by Helvetica that he has designed a typeface aimed specifically at wiping it off the face of the planet. He explains his hatred in the latest of SEA's Naturalis booklets
CSS Media Queries & Using Available Space
We’ve covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn’t required that we make such drastic changes with this technique though, so in this tutorial we’ll go over a design tweak with a smaller scope. We’ll also cover the syntax for using media queries within a single stylesheet and more examples of that.
Supersize that background, please!
With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code.
Prefix or Posthack
We ought to praise vendors for using prefixes, and indeed encourage them to continue. Beyond that, I hold that prefixes should become a central part of the CSS standardization process. I do this not for the love of repetition, but out of a desire to see CSS evolve consistently. I believe that prefixes can actually accelerate the advancement and refinement of CSS.
Non Hover
A few days after Steve Jobs announced the release of the iPad, I read that sentence in Apple’s Reference Library: Preparing Your Web Content for iPad, and started to realize the drastic implications the evolution of multi-touch would have on interaction design. Anything we design for the web that requires a hover state has an uncertain future and could be subject to serious usability issues.
The “Design by Committee” Straw Man
A counter-point to a recent Smashing Magazine article. I argue that people often blame "design by committee" for their failure to deal with client feedback.
Proportional leading with CSS3 Media Queries
Using a contemporary browser, one that supports CSS3 Media Queries, re-size the window and watch the leading change. The wider the measure becomes, the more open the leading.
Getting SASSY With CSS
In this article, we’ll cover a few of the techniques we used in creating Sencha Touch, while demonstrating how to make some flexible button styles. We will also be using Compass, an imported SASS file which adds commonly used grid, typography, and CSS3 mixins.
Yahoo Style Guide
Yahoo have released a writing style guide. This is similar to what newspapers and magazines use but aimed at digital media.
A style guide is really useful for when you have multiple contributors submitting to a website. It keeps consistency across your articles and because all the contributors can easily find out the right way to format them (If they can be bothered to!) it takes a lot of work off the editor.
How to make a graphic-rich poll with CSS
I think that every front-end developer, at one point or another, has come across a project with some really fancy-designed polls. With nice rounded bars, with a great texture inside.
I recently came across one of those said polls, and instead of relying on anything I’d built in the past, I decided to try build something fresh, yet compatible with even the oldest browsers we still support. Yes, even the one with the big blue E whose name I will not pronounce here.
Vertical Rhythm Calculator
This tool lets you set the font sizes you want and will calculate the appropriate line-height to maintain vertical rhythm and keep you on a baseline grid. I use this for every site I make.
What Does "width: 100%" Do in CSS?
It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it’s simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.
jQuery Fundamentals
I've been leading jQuery trainings for more than a year now, from tiny gatherings that I organized myself at the local coworking space, to intensive two-day sessions at local web companies, to whirlwind one-day classes at governmental agencies. Over the course of those trainings, I’ve developed what I’d like to think is a decent curriculum — training material that’s the size of a small book, exercises that demonstrate core concepts, and solutions to those exercises that students can peek at later or when they get stuck.
I decided recently that it was time for all of this material to see the light of day, so I spent the last several days converting it all to DocBook files that allow for easy publication to HTML and PDF (and other formats, if I'm later so inclined). I also fleshed out some topics that I'd given short shrift, and started planning sections covering advanced topics such as plugin authoring, code organization, best practices, and more. There's more to come in the next few days, but I think what I’ve done so far is worth sharing. I hope you’ll agree.
Infobox with Pure CSS 3D Ribbon
Infoboxes are a great way of displaying important information to visitors of your site - and they work even better when they’re easy on the eye. So today we’re brining you an infobox with a twist - it has a ribbon-style header that adds a touch of 3D class to your site. Plus, for the anti-photoshoppers out there, it’s made with pure CSS - which means you don’t need to worry about fiddling around with images or increasing the page loading time.
CSS Best Practices for Team-Based Development
In this article, you will learn best practices for writing CSS to help you avoid inconsistency and redundancy; in effect, setting standards that streamline team-based development.
Typograph: Scale & Rhythm
Very handy tool to test baselines grids and rhytm of a composition.
Showing and hiding content with pure CSS3
Modern websites and applications are more dynamic than old style web pages, with several pieces of well-placed JavaScript providing smoother content updates, more intuitive user feedback and more responsive controls. One very common feature is the expanding/collapsing or shown/hidden box, whether this is a tabbed interface, a content "tray" on the side that can be slid out and then put away again, or a complex tree menu with expanding/collapsing sub-menus.
Generally, these features are implemented via JavaScript, however using CSS3 it is possible to create such content using only HTML and CSS — no JavaScript required. In this article I'll show you how this works, including a few examples to get you started.
CSS image replacement with pseudo-elements (NIR)
An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn't hide text from screen-readers; and provides fallback for IE6 and IE7.
First Thoughts on Version Control (for designers and front-end devs)
Version control systems are a foreign concept to a lot of designers and front end developers. But we should be using them anyway. And the biggest benefit doesn't have anything to do with backups and revisions.
How to seek inspiration from Leonardo da Vinci
In this article, we shall study how to bring Da Vinci’s inspiration and his wisdom, into our creative works and also into our life every day. We shall also explore how to enrich our work and creativity by essentially employing Leonardo’s principles in our work. We shall discover new and invigorating ways to see our world, as we develop new strategies for creative thinking.
Typography Primer: all you need to know in one PDF
This excellent PDF from Adobe succinctly covers all the basic terms about typography. Download without delay and refresh your memory. It’s beautifully designed and easy to read with wonderful graphics.
