Just yesterday the talented Dave Gamache released his CSS Skeleton project. I know there are already of tons of boilerplates out there but this one really appeals to me. Simple, well organized, HTML5, with a standalone grid already set to media queries for standard viewport dimensions (from mobile on up). I’m planning to adapt it to use the same grid with fluid widths for my next project.
Either way, worth checking out: http://www.getskeleton.com/
Focus on your desktop and hit:
Control+Command+5
Will quickly sort everything by kind.
— James LynchWe are shaped by the things we can’t do
(Source: thedolectures.co.uk)
Notice the top of the above image. There are three faint borders showing. A 6px semi-transparent “big” border, then a single pixel shadow and single pixel highlight . Normally this technique would just be a sliced image, but I wanted the ability to adjust the theme of the site, and thus the colors of the borders, on the fly in my markup. To do so, I used some simple :before and :after pseudo classes with absolute positioning.
#header {
height: 190px;
background:url(../images/bg-mesh.png) repeat 0 0;
border-top: 6px solid rgba(0,0,0,.1);
}
#header:before {
content: '';
border-bottom: 1px solid rgba(0,0,0,.3);
position: absolute;
left: 0; top: 0;
width: 100%;
margin: 6px 0 0;
}
#header:after {
content: '';
border-bottom: 1px solid rgba(255,255,255,.5);
position: absolute;
left: 0; top: 0;
width: 100%;
margin: 7px 0 0;
}
The advantage to this approach over just using CSS3 box-shadows is that you can set a primary border (the 6px one) to fallback in IE. Because it is the actual border property on the #header element. The less essential ones go away with legacy browsers, which in this case, is perfectly acceptable.
— Jason FriedUnderstanding what people really want to know—and how that differs from what you want to tell them—is a fundamental tenet of sales.
(Source: inc.com)
This may seem like a no duh pointer for those of you employing CSS3 on your sites currently, but I feel it’s worth documenting nonetheless.
h1 {
color:#202020;
text-shadow: 0px 1px 0px rgba(255,255,255,.3);
}
This will give you a nice dark colored header with a white drop shadow at 30% opacity. Any browser that supports text-shadow also supports rgba, so you can combine the two safely and leverage the drop shadow flexibility of Photoshop in your markup.
I’ve long hated using wireframes (at least ones that I show anyone but myself). They allow clients or project managers to get fixated on the placement and prominence of items that can (and should) change when the actual visual design is done. They don’t speed up the process, they slow it down. For the designer it hinders creativity, often forcing you into a “fill in the box” design mentality.
— Walt DisneyWe don’t make movies to make money, we make money to make more movies.
