Watch the Online Video Course CSS with LESS and Sass. Bootstrap form builder HTML. Frameworks CSS — Blueprint vs 960 Grid System. CSS Cheat Sheet. Cheat Sheet. Download cheat sheet as printable PDF A5 Syntax Child: > nav>ul>li Sibling: + div+p+bq Climb-up: ^ div+div>p>span+em^bq div+div>p>span+em^^bq Grouping: () div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p Multiplication: * ul>li*5 Item numbering: $ ul>li.item$*5 h$[title=item$]{Header $}*3 <h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3> ul>li.item$$$*5 ul>li.item$@-*5 ul>li.item$@3*5 ID and CLASS attributes #header .title form#search.wide p.class1.class2.class3 Custom attributes p[title="Hello world"] td[rowspan=2 colspan=3 title] [a='value1' b="value2"] Text: {} a{Click me}
CSS3 Generator - By Peter Funk & Eric Hoffman. Skeleton: Responsive CSS Boilerplate. Concise.CSS / A better front-end framework. CSS Puns - masey. SO only the code monkey and/or geeky ones amongst my readers out there are even going to understand what these are all about, but the past week or so has seen a boom in clever CSS puns popping up all over social media involving real life subjects mixed with clever, relevant CSS selectors.
The lead image above gives you a good idea of what they’re all about. Clever. I’ve done the rounds and collated the ones I got the biggest laughs out of. My thorough work colleague, “Accurate” Jacquie, perhaps overthought these Harry-Potter-flavoured ones a little… Let’s not forget the politically motivated variety: And whether they are deemed appropriate or not, these potentially controversial ones are still very clever: Let me know of any of your favourites I may have missed in the comments section below. Typoem. Picnic CSS - Unpack your meal and start coding. Font Tester - Online Font Comparison Tool. CSS3 Browser Support and Information.
Open Source Web Design - Download free web design templates. Hover.css - A collection of CSS3 powered hover effects. All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours.
Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license.
Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial Commercial License Purchase | Read full license Extended Commercial License Purchase | Read full license.
SASS/LESS. Color. CSS2. On Fixed vs. Liquid Design. Apparently, there’s been some huff and commotion (3, 4, 5, …) out there about SimpleBits and Stopdesign dropping liquid layouts in favor of fixed-width designs. This probably wouldn’t have been as big an issue if we both hadn’t changed (by chance) the very same week. While I’ve been in contact with Dan since his move, I’m not entirely sure of his intentions, so I can’t speak for him. What I’ll say about Stopdesign is that it’s merely an experiment. A temporary test to explore the strengths and weaknesses of fixed-width layouts. I’ve used both for various projects, and I know the benefits and drawbacks of each. After launching the liquid-width Wired News last year, we got flack from both ends because we did use the max-width property to control column width, and thus, line-length of the text inside.
To solve the line-length issue, some have suggested setting column widths in “ems” so they will expand and shrink with text size. Update: Liquid is back.