Pears. Responsive Web Design Patterns | This Is Responsive. Responsive Patterns A collection of patterns and modules for responsive designs. Submit a pattern Layout Reflowing Layouts Equal Width Off Canvas Source-Order Shift Lists Grid Block Navigation Single-Level Multi-level Breadcrumbs Pagination Images Responsive Image Techniques Media/Data Video Fluid Video Iframes Tables Charts & Graphs Responsive Chart Forms Basic Forms Text Lettering Fittext Footnotes Responsive Footnotes Modules Carousel Tabs Accordion Messaging Lightbox.
Code smells in CSS. 20 November, 2012 Chris Coyier recently answered someone’s question: How can you tell if your CSS code smells? What are the signs that the code is sub-optional, or that the developer hasn’t done a good job? What do you look for in the code to determine how good or bad it is? I thought I would extend Chris’ great answer with my own, additional take on things… My day-to-day life is spent working in-house at BSkyB… I work on big websites, the last of which took me over a year to build the front-end for (and it’s still ongoing).
For me, in my world, bad CSS is a very specific and troublesome thing; when you’re working on one site for months on end, you can’t afford poor code, be it CSS or otherwise, and any bad code needs righting. I’m going to share just a few things (there will, no doubt, be things that I have missed) that I look out for in CSS that will give you and idea as to its quality, its maintainability and its integrity… Undoing styles Any CSS declarations like these: Magic numbers ! ! IDs. Kick-Start Your Project: A Collection of Handy CSS Snippets. Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project.
In one of the previous articles “Basic Ready-to-Use CSS Styles”, we saw how we could create a suite of classes to help the design process while making a website. I hope you made your own set of patterns! Today we are going to see how we can continue this exercise with some things a little bit more technical. I’ll show you a bunch of CSS snippets you may or may not know, which can dramatically increase your CSS development speed. Indeed, isn’t there some properties or CSS tricks you always have to check the syntax for, every single time you want to use them? Don’t you ever want to have some kind of way to avoid endlessly repeating the same lines of code? Of course you do my friends! Before we go, let me tell you how I divided this article: