background preloader

Simplifiez-vous la vie avec LESS

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 Related:  HTML/CSSJavaScriptLess

Liquidapsive (Liqui-dap-sive) Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support. Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable. In addition to this update, Bootstrap now offers themes at themes.getbootstrap.com. Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3. You can read more here. Foundation 6 is a fairly major update which includes more grid flexibility, custom breakpoints, optional flexbox, and more. Like Bootstrap 4, Flexbox is now toggleable via Sass in Foundation 6. The Sass/CSS has been reworked and consolidated, and there are fewer default styles to override on common elements. Skeleton 2 was updated in December 2014 after remaining mostly unchanged for about three years.

Dynamisez vos sites web avec Javascript ! Bienvenue à toutes et à tous, Qui n'a jamais entendu parler du JavaScript ? Créé dans les années 90 en tant que simple langage de script, JavaScript est désormais un des poids lourds du développement Web ! Qui plus est, il se démocratise au sein d'autres environnements comme les serveurs avec le célèbre Node.js, les applications pour smartphones et tablettes, avec PhoneGap d'Adobe, les applications pour Windows 8, mais aussi les logiciels multiplateformes. Bref, JavaScript est partout ! Voici quelques exemples de ce qui est réalisable grâce au JavaScript : Sur ce, bonne lecture !

Les idées reçues sur les préprocesseurs CSS (Sass, Less...) Damian Le Nouaille est développeur Freelance (Frontend et Ruby). Actuellement, il travaille sur Mayathebuzz et essaie d’utiliser les meilleures pratiques frontend pour rendre son métier plus agréable. Il propose également une formation Sass et Compass pour Human Coders Formations. Vous pouvez le suivre sur Twitter (@damln) et en savoir plus sur son site Avant tout, qu’est-ce qu’un préprocesseur CSS ? C’est un outil permettant de transformer un langage (avec une syntaxe semblable à CSS), en CSS valide. “Ils complexifient CSS.” Ajouter des “mots clés” comme @include border-radius(5px); et autres fonctions de Sass n’est pas une destructuration de CSS, ni une complexification, c’est simplement un niveau d’abstraction qui vous permet de vous décharger de responsabilités inutiles à ce stade de votre code. Nos projets se complexifient, s’agrandissent, intègrent du JavaScript, des modules et autres briques que nous, développeurs, devons comprendre. CSS doit-il faire ça ?

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

LESS (langage) Pour les articles homonymes, voir Less. Less est diffusé en open source. Sa première version a été écrite en Ruby, les versions ultérieures en JavaScript. La compilation du code Less ci-dessus donne le code CSS suivant : Les mixins permettent d'embarquer des propriétés d'une classe dans une autre classe en incluant le nom de la classe dans les propriétés. Less dispose également de blocs de règle particuliers qui sont des mixins acceptant des arguments et se comportant comme des fonctions. CSS supporte l'imbrication, mais les blocs eux-mêmes ne peuvent pas être imbriqués. Less propose les opérations et fonctions. Less autorise également l'utilisation d'expressions JavaScript. À partir de la version 1.4, Less supporte les règles imbriquées et héritées via les pseudo-sélecteurs &:extends et @extends. Less est inspiré par Sass[4]. Des versions plus récentes de Sass ont également introduit une syntaxe à la CSS appelée SCSS (Sassy CSS)[2],[5].

Bootstrap 4 alpha 19 Aug 2015 Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we’re finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 has been a massive undertaking that touches nearly every line of code. What’s new There are a ton of major changes to Bootstrap and it’s impossible to cover them all in detail here, so here are some of our favorite highlights: Moved from Less to Sass. And that barely scratches the surface of the 1,100 commits and 120,000 lines of changes in v4 so far. Ready to check it out? Development plan We need your help to make Bootstrap 4 the best it can be. The general development and release plan looks something like this: A few alpha releases while things are still in flux. For those jamming on v4 with us, we also have a dedicated v4 Slack channel. If you’re not keen on pushing code to v4, we’d love to hear from you in our issue tracker with bug reports, questions, and general feedback.

Simplifiez vos développements JavaScript avec jQuery Si vous avez déjà programmé en JavaScript, vous savez que ce langage est puissant, mais aussi « verbeux » et souvent assez complexe à mettre en œuvre. Si vous voulez accéder à toute la puissance de JavaScript en utilisant des instructions simples, logiques, faciles à comprendre et à maintenir, jQuery est vraiment fait pour vous ! Avec ce cours, je vous propose de découvrir les multiples facettes du framework jQuery. De la sélection d'éléments à la manipulation du DOM, en passant par l'animation, les requêtes AJAX, l'utilisation et la création de plugins, la création de jeux et bien d'autres choses encore ! N'ayez crainte, votre apprentissage se fera en douceur et de très nombreux exemples de code documentés viendront consolider vos connaissances. Si vous lisez ces lignes, c'est parce que vous avez décidé d'aller plus loin dans vos développements Web.

Pourquoi je n'utilise pas les préprocesseurs CSS? Pour entrer directement dans le vif du sujet: non, je ne suis pas contre les préprocesseurs. D'ailleurs j'utilise PHP (HyperText Preprocessor) pour générer des sites web dynamiques. C'est même indispensable. En revanche, je ne travaille pas avec les préprocesseurs CSS parce que je n'en ai pas besoin. Je pense d'ailleurs que très peu de personnes en ont réellement besoin. Ils complexifient CSSIls n'ajoutent pas de fonctionnalités CSS aux CSSIls ne font pas (toujours) gagner de tempsIls peuvent être dangereux pour le standard CSS (et provoquer une confusion) Pour faire court, je ne remets pas en cause le besoin, ni la logique de développement qui découle de l'utilisation des préprocesseurs CSS, mais cette automatisation est-elle efficace/utile pour tous? Ils complexifient CSS Je sais qu'en lisant ce titre, certains d'entre vous fulminent! J'ai bien employé ici le verbe «complexifier» et non le verbe «compliquer». Exemple de syntaxe Sass pour des coins arrondis Equivalent CSS $variable: 8px;

Related:  Less