Archive for css3

Ce matin je souhaite partager avec vous un article d’Addy Osmani (excellent, forcément) qui présente les Developers Tools Google Chrome aux utilisateurs de Sublime Text (càd NOUS !).

DevTools Tips For Sublime Text Users liste ainsi quelques raccourcis similaire à ceux de Sublime Text. Comme pare exemple le « Goto Anything » Ctrl/Cmd + P permettant de naviguer dans un fichier en fonction des méthodes, ou règles CSS. On se sent vite comme à la maison, avec même la possibilité d’avoir du multi-caret !

La liste complète des raccourcis se trouve ici : https://developer.chrome.com/devtools/docs/shortcuts.

Deuxième fonctionnalité intéressante : la possibilité d’éditer ses fichiers directement avec les DevTools. Cela se fait en ajoutant des Workspaces afin de pouvoir persister les modifications faites sur nos fichiers. Utile pour ne pas avoir à repasser dans Sublime Text pour modifier le nom d’une variable ou une condition avant de tester notre nouveau code.

Enfin comme dans Sublime Text il est possible d’installer des thèmes, comme par exemple pour avoir une interface sombre pour reposer nos yeux. C’est encore expérimental mais on a tout de même testé ZeroDarkMatrix.

Bonne lecture et amusez-vous bien avec ces nouveaux raccourcis !

L’article complet : DevTools Tips For Sublime Text Users : https://medium.com/google-developers/devtools-tips-for-sublime-text-users-cdd559ee80f8#.7dxwgvg54

La première émission se nomme la DebugRoom et nous parle de développement Web et mobile. Ce jeune podcast (4 épisodes pour l’instant) aborde des sujets aussi diversifiés que la sécurité sur WordPress, Phonegap ou le cloud pour les développeurs. Il se divise en 4 parties :
– La section Veille avec les dernières infos du web
– Le dossier où ils abordent le sujet principal avec régulièrement des invités experts.
– La Zone 404pour la détente avec des liens rigolos
– La Toolbox qui présente des outils à tester dans nos développements
Un lundi sur deux / DebugRoom

Autre podcast orienté développement : NipDev. Une équipe de passionné se réunit toutes les 2 semaines pour nous parler de web à travers différents sujets comme par exemple les API REST, les « single page application », les tests unitaires ou encore le développement pour les mobiles.
Un mercredi sur deux / NipDev

Vous êtes-vous déjà rendu compte que les typos web n’étaient pas affichées de la même manière suivant les navigateurs ?

Avec Type Rendering Mix, une librairie javascript, vous pouvez jouer avec les rendus des typos pour obtenir un affichage identique (ou pas loin) sur les différents navigateurs ou OS.

Cet outil est à réserver aux adeptes du pixel perfect car tout se gère manuellement !

Bonjour à tous. Ce matin, on commence la journée avec deux articles au sujet des CSS3 :

12 Awesome CSS3 Features That You Can Finally Start Using : car oui il y a des règles CSS3 que nous pouvons utiliser dès maintenant. Comme par exemple les animations et transitions, les méthodes permettant de calculer les largeurs et hauteurs, comme width: calc(100% - 40px); Il y en a d’autres, je vous laisse les découvrir.

KNACSS (à prononcer « knakess ») est un « kick-start » pour bien commencer vos projets, minimaliste, reponsive, modulaire et basé sur un ensemble de bonnes pratiques.

Vous y trouverez – entres autres – ces fonctionnalités :

– un reset CSS
– des classes réutilisables
– des snippets CSS
– des aides au positionnement
– du positionnement avancé (FlexBox)
– un support navigateur allant jusqu’à IE6
– des grilles simples et des gouttières
– du Responsive webdesign
– des classes pour les tableaux
– des classes pour les formulaires
– une version LESS
– une version Sass

Plus d’infos sur :
– http://www.knacss.com/ (en anglais)
– http://www.knacss.com/knacss.html (quelques règles CSS, en anglais)
– http://www.alsacreations.com/tuto/lire/1577-decouverte-du-framework-css-KNACSS.html (en français)

Ah oui ! Vous pouvez tester tout ça dans vos projets, mais c’est encore en version « beta » :)

Découvrez Alertify, une petite librairie JavaScript permettant de créer simplement des popins. Cela peut être utile pour présenter du contenu informatif de façon élégante.

Et pour animer les sites,  je vous suggère Effeckt.css, même si cette librairie est en cours de développement, elle promet d’être intéressante : « Performant CSS transitions & animations ». À surveiller attentivement !

Ladda button

Un autre pack de boutons de Hakim El Hattab, le créateur de slid.es, qui intègre des loaders directement dans les boutons d’action. Les animations sont aussi en CSS3 donc pas d’IE7/IE8.