#scss Syntax Highlighting in #geany - Aaron James Young
▻https://ajy.co/web/scss-highlighting-in-geany
howto ajouter la #coloration_syntaxique de SCSS dans Geany
#css
#scss Syntax Highlighting in #geany - Aaron James Young
▻https://ajy.co/web/scss-highlighting-in-geany
howto ajouter la #coloration_syntaxique de SCSS dans Geany
#css
EdX permet d’obtenir des certificats (payants), mais aussi de suivre les cours gratuitement. Certaines parties sont en vidéos. Ok, c’est en anglais, mais les vidéos sont prévues avec le texte qui défile sur la droite. Au départ, c’est sans doute prévu pour une question d’accessibilité mais c’est aussi bien pratique pour les personnes qui ne comprennent pas toujours toutes les subtilités de l’anglais.
En ce moment, je teste la formation TypeScript sur ce site, mais je me demande si ce ne serait pas une bonne idée aussi de passer par-là pour la partie Java, qui serait bien plus parlante que lire les bouquins.
▻https://www.edx.org/course/introduction-java-programming-part-1-hkustx-comp102-1x-0 #edx #coursenligne #java #typescript #html #css
Audit de site #performance #css #js en libre et lisible c’est possible avec ▻http://www.yellowlab.tools
Dommage @Seenthis s’en sort assez mal ▻http://yellowlab.tools/result/e22sihu1o5 :/
ticket ▻https://github.com/seenthis/seenthis_squelettes/issues/115 et n’hésite pas à faire quelques pull-requests
Pour jouer sérieusement avec les couleurs...
Convert Hex color to Rgb, Pantone, RAL, HSL, HSV, HSB, JSON. Get color scheme.
Experiment: Using #flexbox Today - Chris Wright
▻http://www.chriswrightdesign.com/experiments/using-flexbox-today
Flexbox adds a level of control to our layouts that we didn’t really have before, we hacked our floats and clearfixed, we fought whitespace with inline-block, pushed display:table, and even stretched content with position:absolute. We no longer need to rely on these solutions beyond providing something visual to browsers without flex features.
#css
À étudier : un « slider » animé qui fonctionne directement en #CSS, sans nécessiter javascript :
▻http://cssslider.com/fr/bootstrap-slider-10.html
Ce que j’ai compris :
– il y a, en début de slider, des checkbox cachées (une par slide) ;
– les boutons de navigation (les flèches et les bullets) sont, en réalité, des labels correspondant à chacune de ces checkbox ; du coup, quand on clique sur un bouton de navigation, en fait on provoque le passage de la checkbox correspondante à l’état « checked » ;
– cela fait, dans les styles, puisque les checkbox précèdent le slider, il suffit de styler, par exemple :
#checkbox1:checked ~ .element_a_styler
element_a_styler
qui se trouve après la checkbox numéro 1 à l’état checked
(ce qui est donc provoqué, sans javascript, par le simple fait que les boutons de navigation sont des labels correspondants à ces checkbox, comme dans un formulaire tout bête).Normalement, il devrait y avoir un très bon support, la difficulté étant IE8 qui ne comprend pas le sélecteur :checked
.
Reste la question de l’accessibilité (ARIA, etc, être sûr que tout est lisible par tout le monde). Ça devrait pouvoir se faire (je dis ça je n’y connais rien) mais ça n’a pas l’air d’être prévu par défaut.
J’ai utilisé cette technique sur ce site ▻http://www.nds.k12.tr
ie8 effectivement n’est pas content.
STPo › Portfolio › Direction artistique › Jérémie Do Van Lanh
▻http://www.stpo.fr/portfolio/direction-artistique/jeremie-do-van-lanh-2
« la #CSS a été codée intégralement en unités relatives (em), ce qui lui assure une interopérabilité robuste et une accessibilité renforcée » Tags : #em #intégration CSS #relative accessibilité
▻https://github.com/GlitterOrg/pipeline
Glitter is a project to explain #CSS & #Layout on the #web, in line with the #Extensible Web Manifesto. This document is meant to describe the problems that we are trying to solve and potential solutions to these problems.
These are by no means formal proposals, they should be seen as conversation starters for a more extensible web platform.
By explaining CSS & Layout we believe that we should empower developers/frameworks to create polyfills of wanted features in CSS. As an example, new features such as regions, should be polyfill-able without having to implement in native code.
This creates a virtuous cycle between developers, implementers, and working groups.
Solved by Flexbox — Un site qui montre Flexbox avec des cas d’utilisations réels et courants.
►http://philipwalton.github.io/solved-by-flexbox
CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don’t address the major problems that Web developers have been complaining about for what seems like an eternity.
Finally, thanks to Flexbox, we have a solution.
This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. And with the recent release of Internet Explorer 11 and Safari 6.1, the latest Flexbox spec is now supported in every modern browser.
Trouvé dans l’article référencé par @kozlika ici :
►http://seenthis.net/messages/338769
#intégration #web #HTML #CSS #flexbox #cas_d'utilisation #patterns
Un nouveau site de patterns flexbox qui a l’air plus fournis (pas beaucoup encore) et qui peut-être sera vraiment mis à jour lui.
▻http://seenthis.net/messages/462556
CSS Reference | Codrops
▻http://tympanus.net/codrops/css_reference
An extensive CSS reference with all the important properties and info to learn CSS from the basics
Super ressource de Codrops, qui est en passe de devenir une très sérieuse référence et plus seulement un laboratoire d’expérimentations et de démos qui en jettent mais impraticables « dans la vraie vie ».
#css
Si seulement tous ceux capables d’écrire de si jolie docs pouvaient se rassembler, plutôt que multiplier les projets concurrents… :-/
MDN, WebPlatform.org, W̶3̶S̶c̶h̶o̶o̶l̶… ah non pardon…
Maintenant Codrops…
Ouais, je suis d’accord @nhoizey… Mais bon : « il y a 15 projets différents qui font ça, on va en démarrer un mieux qui va rassembler tout le monde… il y a 16 projets différents qui font ça, on va… »
Voilà, c’est à ça que je pensais mais je n’arrivais plus à le retrouver. :)
Premier résultat Google sur « xkcd standards »… ;-)
Center and crop images with a single line of #CSS — Medium
▻https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
It’s simple. Set your image crop dimensions and use this line in your CSS:
img {
object-fit: cover;
}
CSS Zen Garden: The Beauty of CSS Design
▻http://www.csszengarden.com/091
Papier taché de café et soulignements au #stylo bille, joli ! Tags : #CSSZenGarden stylo #soulignement #tâche café
#café
What’s new in #CSS Selectors 4
▻https://grack.com/blog/2015/01/11/css-selectors-4
Hover.css - A collection of CSS3 powered hover effects
▻https://ianlunn.github.io/Hover
A collection of #CSS3 powered #hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
Une #grille responsive avec CSS3 #flexbox et LESS (ou Sass) - Alsacreations
▻http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
Ce tutoriel a pour but de présenter dans les détails une technique de conception de grille de mise en forme responsive à l’aide du positionnement CSS3 Flexbox Layout, actuellement parfaitement adapté à ce genre de fonctions en attendant une meille... Tags : #grille #flexbox #CSS #web
Jack in the flexbox
▻http://jackintheflexbox.tumblr.com
Du Responsive design sans Media Queries Il est...
Un blog/tumblr recensant tous les tests de flexbox du labo de Raphael Goetter. Ya des trucs de oufs, qui sont tous simples en code pourtant, c’est génial.
Un jour je me mettrai à flexbox aussi, mais je ne sais pas où ça en est niveau compat’, ni comment on fait pour les navigateurs qui ne le reconnaissent pas.
#intégration #web #html #css #flexbox
Readable, Fluid Type With Basic #CSS Smarts
▻http://typecast.com/blog/readable-fluid-type-with-basic-css-smarts
Tags : #em #typographie CSS #fluide #élastique
#bookmarklet to Colorize Text Between 45 and 75 Characters (for line-length testing)
▻http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing
Tags : #em #typographie #CSS #fluide #élastique bookmarklet
Typo web pour Codeurs en Seine
▻http://romy.tetue.net/typo-web-codeurs-en-seine
J’étais invitée à présenter Tiny Typo à Codeurs en Seine, une nouvelle conférence normande qui a la particularité de réunir back et front — en 4 thèmes simultanés : Web, Agile, Java et innovation —, rassemblant quelques 380 participants, tant pro qu’étudiants, dans un cadre universitaire. Je serais volontiers allée m’intéresser à l’agilité, mais le programme web avait une approche historique qui m’intéressait trop.
#Web #histoire #typo #lisibilité #Codeurs2014 #TinyTypo
Keep Calm And Write #Sass /via @HugoGiraudel
▻http://slides.com/hugogiraudel/keep-calm-and-write-sass
Tags: Sass #CSS qualité
Des #CSS Kick-Ass avec #Sass /via @HugoGiraudel
▻http://slides.com/hugogiraudel/css-kick-ass-avec-sass
Tags : Sass CSS
Comment fabriquer des thèmes CSS ? - romy.tetue.net
▻http://romy.tetue.net/comment-fabriquer-des-themes-CSS
Un thème est l’habillage graphique d’un site. Il en définit les éléments identifiants : couleurs, style graphique, etc. Concrètement, il est constitué de déclarations CSS rassemblées dans une feuille de style additionnelle, simplement nommée « theme.css » […], laquelle peut appeler d’autres fichiers : images, polices, etc. Un thème est donc nécessairement rangé dans un répertoire, simplement nommé « /theme ».
The Evolution of the #iPhone v1 to v6
▻http://uk.protectyourbubble.com/iphone-timeline
“With the announcement of the long-awaited iPhone 6 and the all-new 6 Plus on September 9th, we take a look at the evolution of the iPhone, from its origins all the way through to its exciting future.” Tags: iPhone #évolution #CSS #transition
private joke :) | 5 Minutes à perdre
▻http://www.5mnaperdre.fr/private-joke
#css
Méthode Daisy, pour du CSS modulaire
▻http://daisy.tetue.net
Plus personne aujourd’hui n’est seul·e à produire son CSS : outil de publication, plugins, intervenants différents… Les styles en vigueur sur un projet ont plusieurs origines. Pragmatique, la méthode Daisy leur donne successivement la main :
1. posons d’abord la base CSS,
2. puis laissons passer les plugins additionnels,
3. et reprennons la main, en dernier, pour définir nos styles spécifiques.
Quand on travaille en pré-processeur, il semblerait que 1 et 2 soit entièrement inversé. En effet, en pré-proc on génère un thème en utilisant des frameworks et des modules. Ce qui est dans 3, utilise ce qui est dans 1 en l’incluant directement afin de pouvoir l’utiliser (par exemple avec @extend). « theme.scss » inclut les trucs de 1.
Or ce qui est dans 2 est ajouté automatiquement par le CMS ou autre outil, de manière externe à la construction du thème. Le 2 est hors pré-proc et a sa propre vie, développé par d’autres et inséré automatiquement.
Ce qui fait qu’on a alors plutôt 2 / 1 / 3, avec 3 incluant 1 en son début.
<head>
- feuilles insérés par le CMS
- theme.css généré par agrégation, incluant 1 en son début
</head>
Je précise que je parle de ça car la documentation évoque le cas du « pré-processing » :
Daisy s’utilise de façon progressive, sur mesure : en feuille unique, en trois feuilles, ou en framework CSS multi-feuilles (avec ou sans concaténation, preprocessing , etc.)
Et donc je commente uniquement ce cas-là. Et même plus précisément en fait : je commente uniquement le cas où on utilise pré-processeur ET un CMS qui ajoute des choses.
Le thème (en 3) n’a pas à inclure la base (= 1), jamais, celle-ci devant passer avant (en 2) les outils (dont CMS) et divers plugins.
La méthode Daisy décrit ce qui se joue dans le navigateur (du CSS donc), quelque soit la façon de le produire (avec ou sans preprocessing).
En cas d’utilisation avec preprocessing, la personnalisation ne se fait plus seulement en 3 (par surcharge CSS), effectivement, mais aussi sur la base, par paramétrage, des variables. En revanche, il n’y a aucune bonne raison d’intervertir l’ordre d’appel dans le navigateur.
J’ai pourtant tenté de l’expliquer : en pré-processing, le thème (les choix personnels pour tel ou tel élément) peuvent appeler un ou plusieurs styles définis dans les feuilles du 1. C’est même une bonne pratique pour ne pas redéfinir des styles similaires en plusieurs endroits.
Par exemple si on choisit graphiquement d’afficher tel lien précis « comme un bouton », alors on va dire .bloc_truc a{ @extend .button; }
. Ce choix personnel peut changer plus tard si on pense que graphiquement ou ergonomiquement ça ne va pas, c’est donc bien dans « theme.css » (3), en revanche la définition générique d’un bouton, c’est bien dans 1. Or pour pouvoir utiliser ce code, tout ce qui est dans 1 doit être importé (@import
) au début de 3. Sinon c’est inutilisable et le pré-processing ne sert à rien.