closure-stylesheets - Closure Stylesheets Closure Stylesheets is an extension to CSS that adds variables, functions, conditionals, and mixins to standard CSS. The tool also supports minification, linting, RTL flipping, and CSS class renaming. Get Closure Stylesheets! Closure Stylesheets is available as a Java jar named closure-stylesheets.jar. You can either download a precompiled jar or build it from source. Using Closure Stylesheets requires Java. java -jar closure-stylesheets.jar --help CSS Extensions Internally at Google, Closure Stylesheets are frequently referred to as "Google Stylesheets" or "GSS," so you will see references to GSS in the source code. Variables Variables can be defined in Closure Stylesheets using @def followed by a variable name and then a value. @def BG_COLOR rgb(235, 239, 249); @def DIALOG_BORDER_COLOR rgb(107, 144, 218);@def DIALOG_BG_COLOR BG_COLOR; Running java -jar closure-stylesheets.jar --pretty-print variable-example.gss will print: Functions add() sub() mult() divide() min() max() Mixins Conditionals
Working With Jeet: an Alternative Responsive Framework Jeet is a lightweight, responsive framework which gets away from presentational classes, instead focusing on markup, style and semantics. Let me illustrate how Jeet compares to more common framework alternatives (Bootstrap, for example), we'll go over the download and setup procedure, then cover some of its main features. Lastly, we'll demonstrate Jeet in a working environment by rebuilding a responsive prototype of Webdesigntuts+. This is a hefty video, so grab a coffee and let's begin!
Stylus et les préprocesseurs CSS (en guise d’introduction) En préambule je voudrais dire que le but de l’article n’est pas de se poser la question de savoir si les pré-processeurs c’est mal ou pas – il est bien connu que les gens n’aiment pas le changement : il faut en effet 21 jours aux neurotransmetteurs du cerveau humain pour créer une nouvelle connexion entre neurones qui facilitera le changement et ensuite 90 jours pour consolider les nouvelles habitudes. On comprendra donc aisément que de nombreuses personnes souhaitent s’en tenir aux bonnes vieilles CSS qu’ils maîtrisent parfaitement. J’ai d’ailleurs lu pas mal d’articles et de commentaires assez drôles sur le sujet. Les préprocesseurs CSS ne remplacent pas le langage CSS en lui même et le fait d’apprendre un nouveau langage qui vient se sur-ajouter n’empêche en rien de continuer l’apprentissage de CSS (il n’est d’ailleurs pas possible d’apprendre Stylus sans connaître CSS). Première question : qu’est-ce qu’un préprocesseur ? Input : body font 12px Helvetica, Arial, sans-serif Output : 1.
Getting started | Less.js CorySimmons/jeet Getting Started with Stylus Within the web development community, we hear a lot about two popular CSS preprocessor: Sass and LESS. You don’t often, however, hear about the third big preprocessor: Stylus. When it came to redesigning the Mozilla Developer Network, I chose Stylus for a few important reasons: Since Stylus is NodeJS-based, we didn’t need to add another technology to our stack (Sass would have required Ruby)Stylus provides a JavaScript API so that preprocessing can be further customizedStylus doesn’t require brackets, colons, or semicolons: the syntax is completely space-based. You can, however, add any of those punctuations and Stylus will still compile correctly.An additional component and mixin library called Nib is also available. Of course Stylus provides the standard CSS preprocessor abilities, like extending classes, creating mixins (functions), importing stylesheets, and setting variables, but it also provides a load of more advanced features. Getting Stylus, Options, and Processing CSS
Sass Reference Syntax There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. Either syntax can import files written in the other. $ sass-convert style.sass style.scss $ sass-convert style.scss style.sass Note that this command does not generate CSS files. Using Sass Sass can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb. gem install sass If you’re using Windows, you may need to install Ruby first. To run Sass from the command line, just use sass input.scss output.css You can also tell Sass to watch the file and update the CSS every time the Sass file changes: Rack/Rails/Merb Plugin :style
Fluidity - A Modern CSS3 & HTML5 Framework for Node.js & Stylus Johan BLEUZEN - Stylus, un pre-processor de CSS pour Node.js J'ai déjà testé beaucoup de pré-processor dans le but de trouver celui qui me convient le mieux. Stylus est un de ces outils qui permettent de faciliter le développement de feuilles de style. Stylus utilise une approche assez novatrice et particulière qui pourrait plaire aux développeurs qui sont familier avec Jade, le moteur de template utilisé pour les applications Node.js... Stylus est un pré-processor de CSS, tout comme Less ou encore SASS mais il a la particularité de fonctionner avec Node.js. Syntaxe "à la" Jade En effet, en introduction je vous parlais de la syntaxe Jade, c'est une syntaxe très simple, pas de point-virgules, pas d'accolades, pas de double points. Avec la syntaxe Jade, ce snippet va devenir : body font 14px Georgia, serif margin 0 padding 0 La seule information importante à conserver dans vos feuilles de style est la tabulation qui va permettre à Stylus de déterminer le début et la fin d'une règle. body font 14px Georgia, serif margin 0; padding : 0 En conclusion
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. 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. CssOwl provides useful mixins to set the position of an element (relative or absolute) and add content with the pseudo selector ( :after and :before). 5. 6.
Placeholder images from flickr - flickholdr.com Préprocesseurs CSS: Stylus plus pratique que LESS Bonjour à tous ! Je viens de m'inscrire sur le forum mais cela fait déjà quelques années que j'apprécie la qualité des articles sur alsacréations. Merci à tous les contributeurs ! Je tiens maintenant à mon tour à vous faire partager ma modeste expérience en développement web. Dernièrement, j'ai été très intéressé par les deux articles suivants : - CSS maintenables - Des CSS dynamiques grâce au langage LESS J'ai testé LESS qui m'a immédiatement convaincu de l'intérêt d'un préprocesseur CSS. Les articles sur ce sujet fourmillent sur le web (surtout si vous êtes anglophone). Pour une comparaison rapide des trois outils, je vous invite à consulter cette présentation. Vos fichiers source peuvent être compilés par le serveur (cf. article d'Alsacreations), mais un point important est que les trois outils peuvent aussi fonctionner indépendamment du serveur : ainsi ils permettent de générer automatiquement les fichiers CSS lorsque les fichiers source sont modifiés. Bien, quel est le vainqueur ?
Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou