Initializr - HTML5 Boilerplates Media Queries Initializr: With Great Templates Comes Great Responsivity! | @verekia's blog Today I'm proud to announce that a "Responsive template" is now available on Initializr! It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors... Making your site work correctly on all these devices is a real nightmare. About responsive web design For those who have been living in a cave for the last few months (understand: for those who have a life and don’t spend days reading tweets and blogs) you probably need a short update about what a "responsive" design is. To design a responsive layout, we have to forget about the usual static 960px width layouts and go fluid with percentage widths and media queries. A fluid layout with percentage widths The first thing our page needs is a "fluid" layout. Mobile-first approach media queries Media queries are a cool way to specify different styles depending on the device used (by aiming particular screen resolutions or orientations for example).
15 great HTML5 and CSS3 generators HTML5 and CSS3 are great languages to start off learning with, and I’ve always thought that one of the best ways to start learning is to just dive in and manipulate the code. As you could probably tell, this is where generators step in. They are a great way to generate some code, play with it, and learn. Not only that, they are incredibly useful because often times as a developer or designer we find we are doing things over and over again. Well, generators can take off that edge and do those small things for you each time. As an example, I have a text-expander snippet that creates an HTML5 template that I wrote about here. I will say that most of this list is going to focus on CSS3 generators, simply because they are in demand more than HTML5 generators, and we will learn why. CSS3 Generators There is a somewhat negative connotation when it comes to these generators, and I have to say that as a designer and developer there is nothing negative about using one. General Generators CSS3.me
Less: CSS Pre-Processor CSS3 . Info - All you ever needed to know about CSS3 DomainTools CSS Zen Garden: The Beauty of CSS Design Sass: CSS Pre-Processsor Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. PreprocessingPreprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: Sass has two syntaxes! VariablesVariables permalink
CSS3 : résumé et exemples Fabrice Maurel Université de Caen - Année 2012-2013 Le langage de feuille de style décrit dans la norme CSS répond à plusieurs objectifs : Lier du style aux documents structurésSéparer la présentation du style du contenu des documentsSimplifier l'édition pour le Web et la maintenance d'un site La norme actuelle est la norme CSS2.1, ou CSS level 2.1 CSS pour Cascading Style Sheet et level 2 car c'est la 2ème recommandation du W3C (datant de 1998). La migration vers la norme CSS3 est en cours de validation mais déjà largement intégrée par les principaux navigateurs. Les feuilles de style permettent de définir des règles de mise en forme du document HTML. Les sélecteurs Un sélecteur permet de choisir les éléments qui utiliseront le style défini. Un sélecteur peut être : Remarque : Les commentaires sont entre /* et */ dans une feuille de style. Localisation des définitions de style Les définitions de style peuvent être placées à différents endroits : Modifications locales de style L'élément <div>
Sassaparilla: Sass & Compass Grid System