30 Seconds of #CSS
►https://atomiks.github.io/30-seconds-of-css
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
30 Seconds of #CSS
►https://atomiks.github.io/30-seconds-of-css
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
How I use Scss variables, mixins & functions globally in Nuxt.js projects while compiling #css utilit
▻https://hackernoon.com/how-i-use-scss-variables-mixins-functions-globally-in-nuxt-js-projects-w
How I use Scss variables, mixins & functions globally in Nuxt.js projects while compiling CSS utility classes in 4 steps!Since I started making websites 3.5 years ago I’ve been using #sass. I flipping LOVE IT!!! I feel it fills in a lot of CSS’s missing features as well as making my styles much leaner and easier to work with. I’m trying to really make 2018 a year where I conquer #vuejs. There’s a problem. I still want to have my Sass variables, functions and mixins available to all my single file #vue components. I also want to have a bunch if global CSS utility classes being created using the same variables, functions and mixins. Here’s how I go about this.Compiling SassI have a collection of styles that I port over to each now project no matter whether I’m using Vue.js, Rails or (...)
Carrer Blog : 1 Line CSS Framework
▻http://www.vcarrer.com/2018/03/1-line-css-framework.html
you can make CSS grid layout only with one line of code.
tellement évident …
Responsive Components: a Solution to the Container Queries Problem — Philip Walton
▻https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem
This article describes a strategy for using modern web technologies to build responsive components: DOM elements that can update their style and layout in response to changes in the size of their container.
Mouais pas aussi cool que ce que je pensais à la base.
Ça oblige à définir des breakpoints dans le JS en plus en doublon. Et ça oblige aussi à mettre dans le HTML lui-même les éléments qu’on veut observer pour leur rajouter des classes suivant les breakpoints. Du coup impossible de changer de thème sans changer le HTML (chose que l’on cherche à éviter au maximum).
En fait c’est une version/vision du problème…
ça fait quelques temps que je suis ce sujet et y’a pas mal de tendances, celle ci est un exemple… certainement que ça sent plus les habitudes de quelqu’un qui fait des applis mobiles et bosse avec React, du coup le html est plus marqué de toute façon…
Dans les autres tendances et stratégies sur le meme sujet :
Elements queries :
Le draft de la spec proposée :
▻https://tomhodgins.github.io/element-queries-spec/element-queries.html
Un petit tour d’horizon du sujet et de la problématique :
▻https://www.sitepoint.com/responsive-css-patterns-without-media-queries
Un polifyll, intérressant (regarder le src/resizeSensor.js) car a la différence de l’autre on utilise css
▻https://github.com/marcj/css-element-queries
Après synchroniser le js et le css … c’est un peut pour ça que j’ai regardé pour l’insertion des variables dans scss.php, après ne pas y avoir touché depuis 5ans ^^ c’est carrément le but…
Une collection de css gradients, qui pourrait être interessante quand on a pas de visuel dans une cover, un encart, histoire de juste jouer avec un font et une typo …
Cool Background Gradients | Eggradients.com
▻http://www.eggradients.club
Accessibilité des tableaux responsives, et impact sur la lecture vocale de l’utilisation des propriétés css flex ou grid pour la ré-organisation des cellules.
Tables, CSS Display Properties, and ARIA | Adrian Roselli
▻http://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html
Layout Land - la chaine pédagogique de Jen Simmons de Mozilla
▻https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag
Nouvelles vidéos deux fois par semaine.
Exemple
▻https://www.youtube.com/watch?v=dQHtT47eH0M
CSS Grid for UI Layouts – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/02/css-grid-for-ui-layouts
The fundamental problem with Flexbox is that it is one dimensional. This makes Flexbox great for one dimensional uses, like toolbars and navbars, but it begins to fail when I need to align content both horizontally and vertically at the same time. Instead I need real two dimensional layout, which is why I need CSS Grid. Fundamentally Grid is 2D.
À la fin il donne le lien vers une super chaine pédago de Jen Simmons
▻https://seenthis.net/messages/670758
j’ai eut ça dans la news « css layout news » (du site du même nom), très bien fait cet article y’avait aussi un post de Jen Simmons « Whitespace on The Web ! — with CSS Grid »… c’est pas toujours le cas mais la y’avait des choses vraiment intéressantes.
CSSVR: Progressive VR experiences
▻https://keithclark.co.uk/articles/css-vr
#CSS_VR_3D_WebGL_WebVR
Herman Style Guides | OddBird
▻http://oddbird.net/2018/01/03/introducing-herman
If it’s not documented, it doesn’t exist. Documentation should become the default – an integrated part of the development process.
—Miriam Suzanne (me)
Parallax scrolling with CSS variables | basicScroll
▻https://basicscroll.electerious.com
via @mist_
#parallax #intégration #web #CSS #HTML #Javascript #css-variables
– démo sur codePen : ▻https://codepen.io/electerious/pen/gLLozQ
– le Github du projet : ▻https://github.com/electerious/basicScroll
Ingrid | Visually build responsive layouts with CSS grid
▻http://ingrid.guide
Modern CSS Explained For Dinosaurs – Actualize – Medium
▻https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525
In order to deal with the inherent complexity of #CSS, all sorts of different best practices have been established. The problem is that there isn’t any strong consensus on which best practices are in fact the best, and many of them seem to completely contradict each other. If you’re trying to learn CSS for the first time, this can be disorienting to say the least.
The goal of this article is to provide a historical context of how CSS approaches and tooling have evolved to what they are today in #2018. By understanding this history, it will be easier to understand each approach and how to use them to your benefit. Let’s get started!
Bah je vois pas pourquoi, on vois justement les nettes améliorations au fil du temps (et de plus en plus rapidement tant mieux), comme d’ailleurs pour n’importe quel autre langage où de nouveaux concepts apparaissent (ya qu’à voir JS, le concept de promise, etc)
Depuis 2009, jamais eu le temps de me former, donc j’en suis au stade : voilà c’est complexe.
Mets toi au moins à flexbox qui est vraiment reconnu partout. C’est le minimum. Mais grid est génial et ce sera bientôt ok aussi (à chaque fois les nouveaux trucs sont bien reconnus sur tous les navigateurs récents, mais ce qu’il faut attendre c’est que les vieux navigateurs descendent sous 1%).
yep, je ferais cela là prochaines fois que j’ai l’occasion de me pencher sur ce genre de pb.
Ceci dit, même si les flexbox et grid permettent des trucs super, ça ajoute clairement un cran d’abstration qui rend l’abord des css en général bien plus ardu comme le dit @mariejulien ▻https://twitter.com/mariejulien/status/962978499819655169
Un débat classique que je crois avoir déjà vu « récemment » dans Spip… Le truc relou, me semble-t-il, c’est quand c’est utilisé à mauvais escient pour faire des choses très simples pour lesquelles c’est absolument inutile ; et vu que ce n’est pas un code très lisible, dans ce cas ça ajoute de la complexité pour rien du tout…
Qu’elle classe ce code css ;-)
Responsive Elements - Semantic
▻https://semantic-ui.com/examples/responsive.html
Bon semantic ui est bien connu, plus qu’il n’est utilisé certainement. Mais en retombant dans mes notes, sur cette page, je suis toujours séduis par l’approche de ce code css.
Loin des BEM, et autres méthodes verbeuse et finalement lourdes à rédiger, la on est dans la simplicité, tout semble logique, lisible.
Si on regarde bien comment c’est foutu, on se rends compte que la spécificité des classes est super ciblé, verrouillée, sans pour autant utiliser des classes verbeuse de Block__elm—pod.is-elem-state
tout est dans ::not ou ~= , ^=
un peut comme dans une boucle spip quand on enlève ce qu’on veut pas, pour récupérer ce que l’on veut ^^
L’autre avantage de cette méthode est aussi d’économiser sur les css générées, j’ai fais quelques test et il y’a un gain significatif sur des composant tout bêtes comme des labels, ou icones.
Sauf que bem n’est pas fait par hasard comme ça, d’une ya la cohérence total avec vraiment 100% toujours la même manière d’écrire mais surtout c’est fait pour être le plus rapide possible à exécuter par les navigateurs.
.ui.segments:not(.horizontal) > .segment:first-child
est très long à compiler et trouver, c’est méga complexe comme sélecteur.
.segments_vertical .segments__segment:first-child
est beaucoup plus rapide
+1 effectivement, la ça mérite des tests réels de temps de rendu navigateur, plutôt qu’une estimation de gain en kbytes transférés.
Quand je vois le pross de mon vieux mac sur une page ou j’ai pas mal d’animations css3, ça peut vite aller dans le rouge suivant comment c’est rédigé. Donc le parcours du dom comme tu le souligne est forcément plus couteux avec des pseudo selector.
Du coup, ça me donne envi de de réfléchir a un suite de test la dessus. En fait j’ai un petite lib qui est inspiré de bem_selectors, en fait ça gère le nomage des selecteurs, mais en fonction de plusieurs conventions … pour le moment SMACSS, OOCSS, BEM, et Rscss …
Pour faire ce genre de test, ça peut être interressant, de prendre une page type, et de générer un rapport de perf entre les différentes méthodologies, vu qu’on peut switcher en changeant une map.
Il y a #Grillade de #KNACSS aussi : ►https://knacss.com/grillade
Je commence a l’utiliser à la place de celle de #SemanticUI
En fait je n’utilise pas semantic ui, ;-) mais je lis le code de tout le monde, j’aime bien regarder surtout les approches différentes, ça sert toujours un jour, dans une certaine situation ^^.
Au départ je lisais ceci ▻http://bradfrost.github.io/this-is-responsive/patterns.html#layout
et cela ▻https://github.com/oddbird/accoutrement-layout
dans le but de créer un composant/lib scss qui gère tout le layout de manière « générique »… comme on a un support qui commence a être correct de grid et flex, ça simplifie quand même bien le boulot.
Quand je fait un proto, rapide j’utilise une petite lib js, qui me génère les placeholder, on colle une class sur le container et ça rempli, avec des contenus.
Mais pas pour les backgrounds ^^, une petite mixin en scss pour ce genre de cas.
Donc ça pioche dans des photos de chez unsplash classées par theme dans une map. On peut quand on bosse sur un projet choisir au moins des visuels en rapport.
l’avantage c’est que le random est appelé a chaque appel de la mixin, donc si on a plusieurs images sur la page ce ne sont pas les mêmes (e qui n’est pas le cas avec les autres placeholders en js…).
▻https://www.sassmeister.com/gist/0344deebfb7fb9493af410ed8c0ce1c7
Des media queries pour savoir si l’usager en est réduit à viser grossièrement avec ses gros doigts boudinés, ou s’il peut piquer précisément comme une abeille :
Using Media Queries For Responsive Design In 2018 — Smashing Magazine
▻https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018
@media (pointer:coarse) {
.which-pointer::after {
content: "You have a coarse pointer, are you on a touchscreen device?";
}
}
@media (pointer:fine) {
.which-pointer::after {
content: "You have a fine pointer, are you using a mouse or trackpad?";
}
}
Essential resources to design complex data tables
▻https://blog.stephaniewalter.fr/en/essential-resources-design-complex-data-tables
“list of resources when I need to design complex tables with a lot of data, interactions, etc.”
Intéressant ce petit « hack » css, je n’en avais pas connaissance, mais beaucoup plus fun que !important doubler un selecteur ID supplante les autres règles…
Chrome extensions for quick site redesigns – Monica Dinculescu
▻https://meowni.ca/posts/extensions
Ah oui, pas mal ! Et c’est valide ça ?
Donc j’ai regardé @jeanmarie , un peut plus, sur ►http://csslint.net on a un warning, donc a priori cette rêgle serait valide. Sur le validateur w3c pas de signalement (mais ce n’est pas ce qu’il y’a de plus fiable actuellement).
C’est un trick d’un dev de google chrome, ça peut être utile surtout pour changer le thème d’un site (par exemple facebook) depuis une extension ou les styles utilisateur, sinon hors ça juste a savoir pour le cas ou.
merci, je note...
Par contre, csslint.net est un peu... comment dire ? ... tendu du warning, nan ?
“Don’t use IDs in selectors.” ou “Heading (h1) should not be qualified.” ou encore “The property -o-transform is compatible with -webkit-transform and -ms-transform and should be included as well.”
Really ?
clair ;-) faut tout personnaliser comme tu souhaite que ça t’avertisse, c’est surtout utile sur des gros projets ou tu met en place des rêgles pour canaliser tout les intervenants, sinon a titre perso normalement on sait a peut près ce qu’on fait ^^.
Ou quand on reprends un projet commencé par un/e d’autre, un petit check de principe …
#CSS Naming Conventions that Will Save You Hours of Debugging
▻https://medium.freecodecamp.org/css-naming-conventions-that-will-save-you-hours-of-debugging-35
#BEM attempts to divide the overall user interface into small reusable components.
– You may have already guessed that the B in BEM stands for ‘Block’.
– The E in ‘BEM’ stands for Elements.
– The M in ‘BEM’ stands for Modifiers.
Je comprends un peu mieux, mais je n’accroche toujours pas :p
Cet article parait récent, pourtant il ne décrit pas la norme BEM actuelle. Cela fait quelque temps que BEM a arrêté d’alterner entre tirets et soulignés ! Ce qui finissait pas être très confus.
Désormais BEM n’utilise plus que les soulignés et uniquement ça.
– Deux soulignés = un enfant d’un bloc
– Un souligné = un modificateur
Les tirets sont laissés à chacun pour séparer quand on veut plusieurs mots (pour ne pas faire de chameaux, ce qui n’est pas la norme en CSS).
Tout est là :
▻https://en.bem.info/methodology/quick-start
.search-form {
/* styles du bloc */
}
.search-form__button {
/* styles d'un élément bouton de CE bloc */
}
.search-form_has-filters {
/* styles d'un form de recherche qui auraient des filtres en plus du champ de recherche */
}
.search-form__button_disabled {
/* styles d'un bouton de CE form de recherche qui serait désactivé */
}
Proof of concept for website #tracking #analytics using only #CSS and without JavaScript.
▻https://github.com/jbtronics/CrookedStyleSheets
#pourriture “on n’arrête pas le tracking...”
Responsive Iframes with One Great CSS Trick - Theodo
▻http://blog.theodo.fr/2018/01/responsive-iframes-css-trick
#CSS #iframe
New #flexbox guides on MDN – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn
Et tout est déjà traduit en français.
Les concepts de base des boîtes flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox
Les liens entre flexbox et les autres méthodes de disposition
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions
L’alignement des éléments au sein d’un conteneur flexible
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible
Ordonner les éléments flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordonner_%C3%A9l%C3%A9ments_flexibles
Contrôler les proportions des éléments flexibles le long de l’axe principal
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contr%C3%B4ler_les_proportions_des_bo%C3%AEtes_flexibles_le_long_
Maîtriser le passage à la ligne des éléments flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_fle
Les cas d’utilisation classiques des boîtes flexibles
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox
La rétrocompatibilité de flexbox
▻https://developer.mozilla.org/fr/docs/Web/CSS/Disposition_flexbox_CSS/R%C3%A9trocompatibilite_de_flexbox
#intégration #web #HTML #CSS #grid #documentation
Building Skeleton Screens with CSS
▻https://mxb.at/blog/css-skeleton-screens
“For a web app, this concept might include displaying “mockups” of text, images or other content elements - called skeleton screens ?.”
inclusive-design-checklist: Aims to be the biggest checklist of inclusive design considerations ever
▻https://github.com/Heydon/inclusive-design-checklist
“Aims to be the biggest checklist of inclusive design considerations for the web ever. Includes items for accessibility, performance, device support, interoperability, and language.”