background preloader

Install the Compass Stylesheet Authoring Framework

Install the Compass Stylesheet Authoring Framework
Installing Ruby Compass runs on any computer that has ruby installed. For more advanced users you may want to install rvm. Setting up the ruby environment $ gem update --system$ gem install compass Looking for the next release's preview version? To install the preview version of Compass: gem install compass --pre Tell us about your project and we'll help you get it set up: I would like to set up my project named with starter stylesheets. Thanks. Terminal newbies, read the Designer’s Guide to the OSX Command Prompt first! $ gem install compass $ compass create <myproject> Note: Values indicated by <> are placeholders. Note: $ is a placeholder for your terminal's prompt. Then follow the instructions that compass provides in the output. Hate the Command Line? Try one of these Community supported GUI applications: Next Steps Related:  CSS & Sass Tita CréaWEB

Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way By Andrey Sitnik On The following is a guest post by Andrey Sitnik, the creator of the Autoprefixer tool, a "postprocessor" for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain. Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed. All you have to do is add it to your asset building tool (Grunt, for instance) and you can totally forget about CSS vendor prefixes. Autoprefixer uses a database with current browser popularity and properties support to apply prefixes for you: #The Problem We can, of course, write vendor CSS prefixes by hand, but it can be tedious and error-prone. We can use services like Prefixr and text editor plugins, but it is still exhausting to work with big blocks of repeating code. We can use mixin libraries with preproccesors like Compass for Sass or nib for Stylus. #Under the Hood compiles to: #Demo a { } . #What Next?

Adaptive Images in HTML Tutorial Compass, CSS trop facile avec SCSS et SASS Compass est un framework qui permet de compiler des feuilles de style css en utilisant SCSS ou SASS. Cet outil permet d’intégrer des frameworks CSS tel que blueprint. Il met également à disposition une API pour une intégration HTML et CSS3 propre et productive. Les limites de CSS A l’air des sites web dynamiques et des supports mobiles, le concept de feuille de style semble souffrir de quelques faiblesses. Mise en place rapide d’un bootstrap avec Compass Compass est développé en ruby, il faut donc s’assurer que la machine sur laquelle vous développez possède un interpréteur ruby d’installé. Pour installer compass Pour créer un nouveau projet, il suffit de lancer la commande suivante : Il est possible de changer certains paramètres (tels que le noms des répertoires des différents assets) en ajoutant les options suivantes : Dans le cas d’un projet Rails, il suffit d’ajouter compass-rails dans le GemFile, et de recréer le bundle de votre application. Synthaxe d’écriture du SCSS ou du SASS

CodeKit — THE Mac App For Web Developers 10 Best CSS Code Generators for Web Developers Web developers are always looking for shortcuts to save time in their routine. Many great dev tools ease the process, and it’s now easier than ever to jump in and get a finished product quickly. With the rise of browser-based IDEs it seems web development is becoming less fixed to the desktop. You can write code from any computer, and even test the result live in your browser. Free online code generators will help you iterate and build onto your code quickly. Once you know what code you need to generate, it’s just a matter of finding the right tool for the job. 1. It has never been easy to create custom repeating pauses between CSS animations. Everyone knows about CSS transitions and the animation-delay property. With WAIT! 2. CSS3 Generator is a more traditional example of code snippets you might need in everyday situations. Unfortunately the entire web app is dynamic and runs on a single page, so there are no permalinks to individual generators. 3. 4. 5. 6. 7. 8. 9. 10. Final Words

Brackets, l'éditeur spécialisé front-end Brackets est un éditeur de code open-source nouvelle génération, multi-plateformes, et tout particulièrement adapté au profil d'intégrateur et de webdesigner. L'interface de Brackets est avant tout conçue pour être agréable et ergonomique. Nul besoin d'aller fouiller dans la console ou des fichiers XML pour modifier la configuration ou installer des plugins. En outre, de nombreuses fonctionnalités sont natives sur Brackets alors qu'elles nécessitent des extensions sur d'autres éditeurs. Principaux avantages Les éditeurs récents, notamment SublimeText, Atom et Brackets, s'adaptent de plus en plus aux nouvelles contraintes du front-end et apportent des fonctionnalités toujours plus riches. Brackets est clairement moins orienté PHP et back-end que certains concurrents mais compense largement ce déficit dans le domaine du webdesign. Jugez par vous-même : Live refresh Aperçus divers en live (images, couleurs, dégradés) Édition rapide Mais aussi Raccourcis-claviers utiles Du côté des extensions Divers

Simplifiez-vous la vie avec LESS La partie fun du cours commence. Vous allez apprendre à utiliser LESS pas à pas. On commence ? Veuillez noter que CSS est totalement compatible avec LESS, ce qui signifie que vous pourrez tout à fait utiliser du CSS pur dans votre code si vous le souhaitez. Constantes Tout d’abord, LESS vous permet d’utiliser des constantes. un bleu électrique (#17B6FF) ;un magenta pétant (#FF17B6) ;un vert citron (#B6FF17) ;un vert acide (#1BFF17). Si vous décidez de changer une des couleurs de votre palette, vous allez devoir vous battre avec votre éditeur à coups de « rechercher / remplacer ». LESS générera le CSS suivant : On pourrait pousser un peu plus loin le concept en utilisant des noms de variables plus ciblés : Vous pouvez utiliser des variables de différents types (couleurs, dimensions, pourcentages, chaînes de caractères, etc.). Classes abstraites Les classes abstraites peuvent être comparées à des fonctions. Si vous souhaitez utiliser plusieurs paramètres, séparez-les par des virgules. Imbrication

Sass vs. LESS "Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing. Really short answer: Sass Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing. Much longer answer: Read on. The Much Longer Answer The Learning Curve with Ruby and Command Line and Whatever The only learning curve is the syntax. Winner: Nobody Helping with CSS3 With either language, you can write your own mixins to help with vendor prefixes. In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. In LESS, there are also some mixin libraries battling to be the best. See that?

Methods for Controlling Spacing in Web Typography If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups. Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. Getting one exact headline to look right I often run into this one, especially when a design contains a highly customized web font that looks great in general, but might look funky when used in a certain context. It a lovely font! Desktop

Télécharger Easy Thumbnails 3.0 Plus d'images Easy Thumbnails est un logiciel gratuit dans la Gestion de la Photo qui va vous permettre tout simplement de créer vos propres vignettes ou images miniatures. Au sein de son interface conviviale, vous allez pouvoir rechercher vos images et créer vos miniatures. Vous allez pouvoir travailler sur un seul fichier, mais également sur un groupe d’images, ou sur plusieurs dossiers. Easy Thumbnails prend également en charge la quasi totalité des formats d'images connus : JPEG, JPG, JPEG2000, GIF, PNG, TIFF, BMP, TGA, ICO, etc. Plus d'infos sur Windows sont sur la page consacrée à l'Actualité de Windows et vous pouvez vous rendre sur le Forum dédié aux Logiciels si vous souhaitez participer aux discussions.

Related: