background preloader

Bourbon - A Sass Mixin Library

Bourbon - A Sass Mixin Library
Related:  SASS*

CSS3 + Progressive Enhancement = Smart Design Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. Among these generalized strategies, the second approach comes closest to the concept of progressive enhancement. A Quick Example Consider a basic layout done with good ‘ol CSS 2.1 and HTML 4.01. basic layout and compositionbackground, border, and font colorsfont families, styles, and transformationsbasic styles for HTML elementsdecorative graphics, link styles and so on The idea here is to begin with a nice, well-styled presentation that looks good in even archaic browsers like IE6. CSS 3 and Progressive Enhancement Progressive enhancement provides a well-defined strategy for implementing CSS3 into the presentational layer of our designs.

Se lancer dans Sass Qui a encore peur aujourd'hui de Sass et des préprocesseurs en général ? David Demaree nous montre dans cette introduction claire et complète la simplicité et l'utilité de Sass. Indispensable, vraiment. Par David Demaree La simplicité de CSS est depuis toujours l’une de ses caractéristiques les plus agréables. Il y a eu des propositions pour améliorer CSS – l’ajout de constantes ou de variables par exemple – mais aucune n’a été mise en oeuvre par les principaux navigateurs. Heureusement, il y a quelques années les développeurs Hampton Catlin et Nathan Weizenbaum ont proposé une meilleure façon de gérer des feuilles de style complexes. La nouvelle syntaxe de feuilles de style s’appelle Sass, pour “syntactically awesome style sheets” (feuilles de styles syntactiquement super). C’est pourquoi Sass 3.0 a introduit une nouvelle syntaxe, plus proche de CSS, appelée SCSS (“Sassy CSS” qu’on pourrait traduire par “CSS à la Sass” ou bien "CSS classieux"). On commence ! Ne vous répétez pas Variables

Compass Home | Compass Documentation An inline-block intervention Tell me the last time you used a <b> element in your markup. How about a <blink> tag? If you answered ‘today’, then this post will hopefully be eye opening for you. So, the reason why we don’t use the <b> tag for bolded text is because we’re interested in the separation of content and style. Cool? So let’s talk about inline-block inline-block entered the web dev scene around 2008 as part of CSS2.1 and everyone loved it. What inline-block does is provide inline positioning of an element, much like a span, em, strong or a element, but also allows widths and dimensions to be applied to it. So somewhere along the way, someone decided, “hey, I don’t need floats, I can just set my elements to display:inline-block”, and the web-dev community shouted, “Yes”. Except one little problem exists. What that means is that it acts just like a span, em, strong or a element would and reacts to whitespace next to it. So here’s where inline-block bothers me. Let’s review some inline-block fixes Ugh.

11 Mixin Libraries For Sass Designers Should Get If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site. Pin it There are many mixins are made by developers, to help you when working with Sass in your development. Most cover things that often repetitive in CSS. Recommended Reading: A Simple And Easy Guide To Understand Sass 1. Bourbon is a Sass library that contains mixin, functions, and addons that let you simplify the creation of stylesheets for cross-browser use. Check out the complete documentation to use each available mixin and function. 2. Sass CSS3 Mixins provide mixins that works across different browsers. Download this mixin here. 3. Want to filter your image with stunning effect in Sass? 4. 5. Breakpoint helps you make media queries through Sass a simple manner. 6. 7. 8. 9. 10. 11.

Front End Developer, Melbourne - Petr Tichy Sass Un article de Wikipédia, l'encyclopédie libre. Sass (Syntactically Awesome Stylesheets) est un langage de génération dynamique de feuilles de style initialement développé par Hampton Catlin et Nathalie Weizenbaum. Sass est un métalangage de feuilles de style en cascade (CSS). C'est un langage de script qui est interprété en CSS. SassScript est le langage de script lui-même. Deux syntaxes existent. Sass peut être étoffé avec Compass (pratique pour les préfixes des différents navigateurs). Articles connexes[modifier | modifier le code] Liens externes[modifier | modifier le code] Site officiel

Coda 2 Good question. Coda is everything you need to hand-code a website, in one beautiful app. While the pitch is simple, building Coda was anything but. How do you elegantly wrap everything together? Well, we did it. More than anything else, Coda is a text editor. But an incredible text editor is just a nice typewriter if you can’t easily handle all of your files — from anywhere. Then you’ll want to see what your code looks like. Believe it or not, we’ve just scratched the surface. Finally, hiding behind the Plus button in the tab bar is a built-in Terminal and MySQL editor, two amazingly powerful Tab Tools. And it’s all wrapped up in our Sites, which get you started quickly. Coda is a very good app.