background preloader

Home - A to Z CSS

Home - A to Z CSS

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

Raspberry Pi Raspberry Pi 7” Touchscreen Display The Touchscreen Display gives users the ability to create all-in-one, integrated projects such as tablets, infotainment systems and embedded projects. Buy Now Learn More 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

[Ressources] - 55 effets en CSS3 avec leurs codes Alors là je dis whaouu les amis, le site Cssdesk.com nous propose en démo 55 effets CSS3 différents et en plus le code de chaque effet est fourni. Que vous vouliez faire un effet rebond, un effet apparition depuis la gauche, la droite, le haut, un effet fade out, un effet 3D, un effet flash, etc… tout est disponible !! Découvrir les 55 effets

SpritePad - Create and edit css sprites Positionner un élément en HTML5 et CSS3 C’est la 3ème semaine et une nouvelle période très riche en code et en expérimentation. Cette nouvelle carte s’intitule » Positionner un élément en HTML5 / CSS3 » voici la composition de ces branches. Je vous incite à visualiser les notes sur les branches, celles-ci contiennent des exemples de code que vous pourrez réutiliser dans vos développements. La carte est accessible et téléchargeable sur ce lien Cette carte est également en partage sur le site de Biggerplate au format Xmind sur ce lien Bonne consultation Olivier Legrand 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

Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression

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

Les classes conditionnelles en HTML Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté. La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Nous allons voir dans cet article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles. Le problème des commentaires conditionnels Les commentaires conditionnels se présentent comme des instructions dotées d’une condition (if) et qui peuvent se placer à n’importe quel endroit du document (X)HTML. Il s’agit d’un mécanisme propre à Internet Explorer Windows, né avec la version IE5, et qui permet d’inclure dans une page HTML, de manière valide, une portion de code qui ne sera lue et interprétée que par IE, ou par l’une ou l’autre de ses versions. Une alternative ?

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

Related: