Tips for Writing Modular CSS Matt Lambert No matter how much you love CSS, no one enjoys writing or maintaining style sheets that are 2000+ lines of awesomeness. The smart way to approach your CSS is from a modular stand point. Properly organizing your CSS, breaking it into smaller chunks, and naming classes in a generic way are a few places to start. Let’s review some of my top tips for writing modular CSS Use SMACCS There’s a few systems out there for organizing your CSS but the best one I’ve found is SMACCS (Scalable and Modular Architecture for CSS). Base All native HTML selectors, element selectors, descendant/child selectors, and pseudo-classes. Layout Styles specific to the layout of your website or template. Module Reusable classes or components. States Here you add any state change CSS like alerts or form validation styles. Theme This section is optional but if you have any theme specific CSS that doesn’t fit into any of the above sections, it should go here. Less Variables Less Components One Theme to Rule Them All
CSS Sprites: What They Are, Why They're Cool, and How To Use Them By Chris Coyier On This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015. #What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. I wish. To summarize: the term "sprites" comes from a technique in computer graphics, most often used in video games. CSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. #Why use CSS Sprites? It may seem counterintuitive to cram smaller images into a larger image. Let's look at some numbers on an actual example: That adds up to a total of 14.38KB to load the three images. While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request. Thus, sprites are important for the same reasons that minifying and concatinating CSS and JavaScript are important. $ sprity . #SVGs
SpritePad - Create and edit css sprites Useful Collection Of Free CSS Libraries & Resources Here we are presenting a very useful collection of some free CSS libraries and resources for your inspiration. Although there are many scripting and coding websites that can help you in developing your website but here we are presenting free and useful libraries and resources. In addition, there are some scripts also available that you can download and can use for your project. Majority of developers are using codes that are written in CSS or JavaScript or some other languages. We hope that you will like this collection and find this collection useful for you as well. Print.css print.css is an open source print stylesheet for the environmentally-conscious web developer. CSS3 Click Chart Allows you to change how the browser calculates the width of an element, that is, whether or not to include padding, borders, and margins, in the width or height calculation. CSSDeck Collection of Awesome CSS and JS Creations to help out frontend developers and designers. CSS Navigation Pondasee CSS3 Checkboxes
CSS-Only Responsive Layout with Smooth Transitions A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a "smooth scrolling" effect. View demo Download source In this tutorial we will create a responsive 100% width/height layout with some smooth page transitions. The idea is to have some content panels and a navigation which will allow us to navigate between the panels. We’ll use radio buttons for the navigation and animate the content to the right position with a transition, creating a “smooth scrolling” effect. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. Note that we will exclude vendor prefixes in this tutorial. The Markup What we want to do is basically move the panel wrapper by changing it’s top value and bringing the respective panel into the viewport. OK, let’s style this thing! The CSS
Programme #css-day-2015 Coffee, tea, lunch, and drinks afterwards are included in the ticket price. Our MC for the day, Chris Heilmann Chris Heilmann has dedicated a lot of his time making the web better. Originally coming from a radio journalism background, he built his first web site from scratch around 1997 and spent the following years working on lots of large, international web sites. He then spent a few years in Yahoo building products and explaining and training people including Yahoo Answers, Search, Local and Maps. The Back(side) of the Class, by Stephen Hay Have you ever been taught that “modularizing” CSS via an endless number of “reusable” object-like “classes” is the “proper” way to use CSS on “large-scale websites”, or have you taught others that these are “best practices”? If you answered yes to the above questions, then you, my friend, are going to absolutely hate this session. About Stephen Responsive Color, by Clarissa Peterson About Clarissa Typography on the Web, by John Daggett About John
How to make a carousel using only HTML and CSS (no JavaScript required!) Recently, I’ve been working on a site that uses a CMS that’s a bit limiting. I can add my own HTML and CSS to the site, but JavaScript is off-limits. The designs I’m working from included a carousel. I had some ideas of how I could make that work using CSS animations and the transform property, but that would leave me with a carousel that scrolled automatically and didn’t allow for user input which wasn’t really what I was looking for. After some thinking, I eneded up with a solution that uses absolute positioning and the :target pseudo-selector to change the z-index and opacity of our carousel items to cycle through them. This is the first item Idque Caesaris facere voluntate liceret: sese habere. This is the second item Vivamus sagittis lacus vel augue laoreet rutrum faucibus. And finally, the third Quis aute iure reprehenderit in voluptate velit esse. Let’s build one! The structure <! That’s it for our HTML. The styles And that’s it!
Stop Printing Ugly WordPress Pages With This Easy Fix As a WordPress designer, you fret and worry about how your pages and your posts look – on the screen. That’s what it’s all about, right? You look at that new travel-story website you just finished, and it looks great in all the current web browsers. It’s fabulous. The client loves you. A week later, you’re sitting at your computer when the client calls and says, “Hey, our customers are trying to print stuff off that new website you made for us, and everything is a mess – you have to fix that – now!!!” Then you (for the first time ever) choose your browser’s print command, your printer starts whirring and clacking, and by the time you slide over to your printer it’s already printed out three sheets of paper when it should have just been one sheet. Your client is right (aren’t they always?). Your head spins as you try to figure out what’s wrong and what to do, as the enraged client continues yelling into the phone – her voice getting higher and louder. Do People Actually Print Web Pages?
Simple Icon Hover Effects with CSS Transitions and Animations Previous Demo Back to the Codrops Article Mobile Desktop Partners Support Security Settings Time Videos List Refresh Images Edit Link Mail Location Archive Chat Bookmarks User Contact Note that the dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0 Mobile Desktop Partners Support Security Settings Support Fav Contract Refresh Settings Time Videos List Refresh Archive Chat Bookmarks User Contact Images Edit Link Mail Location If you enjoyed these effects you might also like: Creative Button Styles Creative Link Effects
Comment centrer verticalement sur tous les navigateurs Ce tutoriel présente des solutions pour centrer verticalement des éléments de tailles variables dans des conteneurs de hauteur fixe ou fluide. Les techniques exposées sont compatibles avec tous les navigateurs actuels, à partir d'Internet Explorer 8 et n'utilisent ni <table>, ni JavaScript. Note : ce tutoriel a été initialement rédigé en mai 2010. Il a subi une grosse refonte en mars 2016 pour se mettre à jour. Le temps du valign=middle sur nos tableaux de mise en page est bel et bien révolu. Avec CSS2 et l'arrivée de nouvelles valeurs pour la propriété display reconnues par Internet Explorer 8, beaucoup ont vu en table-cell une nouvelle ère pour le centrage vertical. Depuis CSS3, d'autres techniques viennent parfaire les ébauches précédentes : à savoir les translations, les unités de viewport mais aussi et surtout Flexbox. Pour chaque technique, nous détillerons les avantages, les inconvénients ainsi que les particularités. Bonne lecture ! Centrer verticalement sur une seule ligne
8 CSS Tools for CSS Phobics - The Hive Yes we all know that CSS might take a lot of time to get it right, so we thought of gathering some tools that you as a coder will find useful. The truth is that developing and designing are very different skills, and developers might need assistance to be able to bring out awesome designs and create a great user experience design. Below, you can find 8 tools that will help you get your work done faster, create better organised layouts and minimise the efforts, especially if you have just started coding. 1. When time is an issue there’s Stylizer that will help you style websites in a fraction of the time. 2. Yes, you will definitely start enjoying CSS if you didn’t knew about this tool. 3. Jeet is a lightweight, responsive framework which gets away from presentational classes, instead focusing on markup, style and semantics. 4. Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. 5. 6. 7. 8. extractCSS