Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #f
  • #fl
  • #fle
  • #flex
RSS: #flexbox

#flexbox

  • #flexbox_web_css_exemple_clevermarks
0 | 25
  • @b_b
    b_b @b_b PUBLIC DOMAIN 25/11/2022
    9
    @arno
    @monolecte
    @7h36
    @rastapopoulos
    @olaf
    @alexcorp
    @cy_altern
    @denisb
    @touti
    9

    An #Interactive Guide to #Flexbox in #CSS
    ▻https://www.joshwcomeau.com/css/interactive-guide-to-flexbox

    https://www.joshwcomeau.com/images/og-interactive-guide-to-flexbox.png

    In this blog post, I want to refine your mental model for Flexbox. We’ll build an intuition for how the Flexbox algorithm works, by learning about each of these properties. Whether you’re a CSS beginner, or you’ve been using Flexbox for years, I bet you’ll learn quite a bit!

    Article très détaillé avec plein de petites démos sympas.

    b_b @b_b PUBLIC DOMAIN
    • @arno
      ARNO* @arno ART LIBRE 25/11/2022

      #beau

      ARNO* @arno ART LIBRE
    • @monolecte
      Monolecte 😷🤬 @monolecte CC BY-NC-SA 25/11/2022

      Vraiment super bien fait.

      Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 26/11/2022

      #tutoriel #demonstration_interactive

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 27/02/2022
    8
    @baroug
    @rastapopoulos
    @gblin
    @monolecte
    @jeanmarie
    @7h36
    @fil
    @tofulm
    8

    #Flexbox Dynamic Line #Separator - Ahmad Shadeed
    ▻http://ishadeed.com/article/flexbox-separator

    https://ishadeed.com/assets/flexbox-separator/twitter-card.jpg

    To make this work on all screen sizes, we need to have the flex-direction: column mobile and flex-direction: row for larger screens.

    .section {
     display: flex;
     flex-direction: column;
     gap: 1rem;
    }

    .section:before {
       content: "";
       border: 1px solid #d3d3d3;
       align-self: stretch;
    }

    @media (min-width: 700px) {
       .section {
           align-items: center;
           flex-direction: row;
       }
    }

    #css

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 16/06/2020
    4
    @cy_altern
    @tofulm
    @monolecte
    @marcimat
    4

    #Grid for layout, #Flexbox for components
    ▻http://ishadeed.com/article/grid-layout-flexbox-components

    https://ishadeed.com/assets/grid-flex/grid-vs-flexbox-1.png

    Before diving into concepts and examples, I want to make sure that you understand the main difference between #CSS grid and flexbox. CSS Grid is a multi-dimension layout module, which means that it has columns and rows. Flexbox can lay out its child items either as columns or rows, but not both

    Let me be clear about that, there is no direct way to decide between CSS grid and flexbox. Adding on that, there is no correct or incorrect way to use them. This article is a kind of guide that recommends using a technique for a specific use-case. I will explain the general concept, and then go into examples, and the rest is on you to explore and experiment more.

    Deciding between CSS grid and flexbox can be a bit hard (sometimes), especially if you are new to CSS. I can hear you! Here are some initial kick-off questions that I ask myself when choosing between them:

    – How the component child items are displayed? Inline or as columns and rows?
    – How the component is expected to work on various screen sizes?

    Article intéressant avec pas mal d’exemples d’usage.

    b_b @b_b PUBLIC DOMAIN
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 25/06/2020

      En lien avec ▻https://seenthis.net/messages/800552

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 6/09/2019
    3
    @tofulm
    @jeanmarie
    @b_b
    3

    Flexbox ou Grid Layout ? - Alsacreations
    ▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

    CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
    Voir aussi :
    – ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
    – ▻https://la-cascade.io/utiliser-grid-ou-flexbox
    – sur MDN :
    . ressources pour grid layout :
    concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
    Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
    Exemples : ►https://gridbyexample.com/examples
    . ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout

    #CSS #grid #flexbox #layout

    cy_altern @cy_altern CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 7/09/2019

      Merci pour ces ressources

      #webdev #développement #intégrationweb

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 4/06/2018
    4
    @l_l_de_mars
    @mukt
    @rastapopoulos
    @bouts
    4

    J’ai besoin d’aide avec des #CSS. J’essaie de reproduire la présentation ultra-alignée d’images carrées telle qu’on la trouve dans Photos sur l’iPhone. L’idée étant d’avoir des vignettes carrées dont la taille n’est pas totalement fixe, et si possible sans s’embêter avec les media queries usuelles selon la taille de l’écran (genre une case de largeur 25% quand on est entre 600 et 720 pixels…).

    L’idée c’est que j’arrive à faire ça très bien avec une flex box :

    https://i.imgur.com/Bmfv1da.jpg

    Mais le hic, c’est la dernière ligne. Les deux premières lignes, ça fonctionne magnifiquement, les dimensions des vignettes carrées sont très bien gérées quelle que soit la largeur d’affichage, le nombre de vignettes par ligne se calcule tout seul avec « flexibilité », l’alignement est parfait. Bref le bonheur.

    Mes CSS pour l’instant :

    ul.carres_oeuvres {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap:  wrap;
            justify-content: flex-start;
            margin-right: 1px;
    }               
    ul.carres_oeuvres li {
            margin-top: 1px;
            margin-left: 1px;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: 150px;
    }

    Sauf comme tu vois, la dernière ligne, qui occupe toute la largeur mais ne s’aligne pas.

    Je voudrais obtenir ceci :

    https://i.imgur.com/YPLctAk.jpg

    Et j’ai pas trouvé comment…

    ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 4/06/2018

      D’après ce que je vois, il ne faut pas passer par flex mais par grid, qui gère le multiligne.

      ARNO* @arno ART LIBRE
    • @kent1
      kent1 @kent1 ART LIBRE 4/06/2018

      Grid est un peu moins bien supporté (de 10% je crois) cependant au niveau navigateur

      kent1 @kent1 ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 4/06/2018

      J’ai trouvé !

              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* (2) */
              grid-gap: 1px;

      C’est la valeur grid-template-columns qui gère le truc…

      ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 4/06/2018
      @kent1

      @kent1 : yep…

      Du coup, dans la même CSS, je mets d’abord le display: flex, et en seconde ligne le display:grid, normalement ça fera un fallback qui va bien pour ces 10%.

      Et il faudra ajouter un fallback pour ceux qui ne comprennent ni grid ni flex. Un float:left sans doute, à condition que ça me bouffe pas mes dimensions de grilles…

      ARNO* @arno ART LIBRE
    • @kent1
      kent1 @kent1 ART LIBRE 4/06/2018

      Du coup t’as qu’à faire un <table>...</table> :D

      kent1 @kent1 ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 4/06/2018

      kent1 -> []

      ARNO* @arno ART LIBRE
    • @arno
      ARNO* @arno ART LIBRE 4/06/2018

      Sinon, je pensais qu’avec Flex, ça y est, on avait atteint le pire des CSS : celles où il faut avoir le mémento à chaque fois qu’on veut faire le moindre truc.

      Avec grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));, je pense que grid emporte le pompon du CSS imbitable impossible à mémoriser.

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 4/06/2018

      #intégration #web #css #flexbox #grid-css

      RastaPopoulos @rastapopoulos CC BY-NC
    • @mist_
      Mist. GraphX @mist_ 6/06/2018

      Salut,

      c’est un petit bug de flexbox, on peut le contourner en utilisant ::after sur le dernier éléments de la grille.

      &::after { // Fix last item align in flexbox
      content : ’’ ;
      flex : auto ;
      }

      Mist. GraphX @mist_
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 20/02/2018
    1
    @tofulm
    1

    CSS Grid for UI Layouts – Mozilla Hacks – the Web developer blog
    ▻https://hacks.mozilla.org/2018/02/css-grid-for-ui-layouts

    https://hacks.mozilla.org/files/2018/02/hacksscreenshot-2_1c.jpg

    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.

    #grid #flexbox #css #webdesign

    Mist. GraphX @mist_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 20/02/2018

      À la fin il donne le lien vers une super chaine pédago de Jen Simmons
      ▻https://seenthis.net/messages/670758

      RastaPopoulos @rastapopoulos CC BY-NC
    • @mist_
      Mist. GraphX @mist_ 21/02/2018

      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.

      Mist. GraphX @mist_
    Écrire un commentaire
  • @mist_
    Mist. GraphX @mist_ 11/02/2018
    1
    @spip
    1

    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.

    #css#méthodologies#web-design

    Mist. GraphX @mist_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/02/2018

      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

      RastaPopoulos @rastapopoulos CC BY-NC
    • @mist_
      Mist. GraphX @mist_ 11/02/2018

      +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.

      Mist. GraphX @mist_
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 11/02/2018

      Il y a #Grillade de #KNACSS aussi : ►https://knacss.com/grillade
      Je commence a l’utiliser à la place de celle de #SemanticUI

      #intégration #flexbox #grille #responsive

      jeanmarie @jeanmarie CC BY-NC-SA
    • @mist_
      Mist. GraphX @mist_ 11/02/2018

      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.

      Mist. GraphX @mist_
    Écrire un commentaire
  • @nicod_
    nicod_ @nicod_ 11/01/2018
    8
    @rastapopoulos
    @b_b
    @mukt
    @touti
    @baroug
    @7h36
    @gastlag
    @tofulm
    8

    New #flexbox guides on MDN – Mozilla Hacks – the Web developer blog
    ▻https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn

    nicod_ @nicod_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/01/2018

      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

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 21/11/2017
    3
    @mukt
    @nicod_
    @kent1
    3

    Progressively Enhancing #CSS Layout: From #Floats To #Flexbox To #Grid

    ▻https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid

    When you open the demo, you’ll find yourself on the home page of a website with a very basic layout. You can adjust the slider in the top left to enhance the experience. The layout switches from being very basic to being a float-based layout to being a flexbox layout and, finally, to being one that uses grid.

    ▻https://s.codepen.io/matuzo/debug/Emddvx

    In the following sections, I’m going to show you how I built parts of the demo and why some things just work out of the box.

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @baroug
    baroug @baroug 23/07/2017
    3
    @monolecte
    @rastapopoulos
    @mukt
    3

    Does CSS Grid Replace Flexbox? | CSS-Tricks
    ▻https://css-tricks.com/css-grid-replace-flexbox

    https://cdn.css-tricks.com/wp-content/uploads/2017/03/both-grid-and-flex.png

    No. Well. Mostly No.

    #Grid is much newer than #Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

    To put a point on it:

    Grid can do things Flexbox can’t do.
    Flexbox can do things Grid can’t do.
    They can work together: a grid item can be a flexbox container. A flex item can be a grid container.

    #web_design

    baroug @baroug
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 4/10/2017

      #intégration #web #HTML #CSS #css_grid

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 29/04/2017
    5
    @nicod_
    @rastapopoulos
    @ari
    @tofulm
    @mukt
    5

    #Flexbox Cheatsheet Cheatsheet

    ▻https://jonibologna.com/blog/flexbox-cheatsheet

    https://jonibologna.com/content/2014/Oct/flexboxsheet.png

    ▻http://jonibologna.com/content/flexboxsheet.pdf

    #css

    b_b @b_b PUBLIC DOMAIN
    • @nicod_
      nicod_ @nicod_ 29/04/2017

      Voir aussi :
      ►https://css-tricks.com/snippets/css/a-guide-to-flexbox

      nicod_ @nicod_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 29/04/2017

      #intégration #web #html

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 29/01/2020

      Liens corrigés car les gens semblent ne porter aucune attention à la pérennité des urls sur le web...

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @nicod_
    nicod_ @nicod_ 18/04/2017

    GitHub - vasanthk/css-refresher-notes: #css Refresher!
    ▻https://github.com/vasanthk/css-refresher-notes
    #css3 #reference #flexbox #kozlika

    • #Github
    nicod_ @nicod_
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 29/01/2017
    12
    @suske
    @rastapopoulos
    @marcimat
    @tofulm
    @drbouvierleduc
    @baroug
    @monolecte
    @nicod_
    @ari
    @aris
    @linuxfr
    @mukt
    12

    CSS Grid Layout arrive, préparez-vous ! – La Tête dans le Flux
    ▻https://blog.goetter.fr/2016/11/30/css-grid-layout-arrive-preparez-vous/comment-page-1/#comment-616

    En résumé :
    Grid Layout est un module de positionnement parfait pour construire ses templates et ses grilles, bref l’architecture globale de la page
    Flexbox est parfait pour les composants qui constituent l’intérieur de nos gabarits : navigations, sliders, fiches produits, etc.

    L’idée serait de pouvoir se passer de bootstrap pour gérer les grilles dans les pages HTML...

    Voir aussi :
    – comparatif de toutes les possibilités pour des grilles en CSS : float, inline-block, table-cell, columns, flexbox, grid ▻https://blog.goetter.fr/2014/10/27/le-point-sur-les-grilles-en-css

    Grid layout :
    – le positionnement par grid layout : ▻http://www.alsacreations.com/article/lire/1388-css3-grid-layout.html
    – le site de référence pour grid layout, page des exemples : ►http://gridbyexample.com/examples
    – des exemples avancés d’utilisation de grid layout : ▻https://blog.goetter.fr/2016/01/02/grid-layout-vers-la-grille-parfaite
    – une sélection de références par le gourou d’Alsacréation : ▻https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.htm
    – plein d’exemples de layout basés sur grid : ►https://gridbyexample.com/examples
    – l’outil de développement de Firefox spécialisé pour l’inspection des grilles : ►https://www.mozilla.org/en-US/developer/css-grid

    Flexbox :
    – revue exhaustive des caractéristiques de flex : ▻https://chriswrightdesign.com/experiments/flexbox-adventures
    – une présentation complète et progressive de flexbox : ▻https://la-cascade.io/flexbox-guide-complet
    – exploration des possibilités de CSS flexbox (flex, flex-item, order...) : ►http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
    – un générateur de code pour les propriétés flex : ▻http://the-echoplex.net/flexyboxes
    – des exemples de grilles en flex : ►https://philipwalton.github.io/solved-by-flexbox

    Et pour la norme :
    – Flexible box : ▻https://www.w3.org/TR/css-flexbox-1
    – Grid layout : ▻https://www.w3.org/TR/css-grid-1

    #css, #flex, #flexbox, #grid, #grid_layout, #grille #bootstrap

    cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 29/01/2017

      #intégration #web

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @nicod_
    nicod_ @nicod_ 26/01/2017
    4
    @b_b
    @rastapopoulos
    @monolecte
    @mukt
    4

    Grillade, by KNACSS, une #grille simple en #flexbox
    ►http://knacss.com/grillade
    #css

    nicod_ @nicod_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 26/01/2017

      #intégration #web #micro-framework #framework

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nicod_
      nicod_ @nicod_ 26/01/2017

      #humour_alsacien

      nicod_ @nicod_
    • @nicod_
      nicod_ @nicod_ 26/01/2017

      Voir aussi : ▻http://schnaps.it

      Générateur de template HTML5 since 1664

      nicod_ @nicod_
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 26/01/2017

      Et dans le même genre il y a ►https://rocssti.net

      RastaPopoulos @rastapopoulos CC BY-NC
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 10/06/2025

      Vous utilisez quoi comme grille aujourd’hui ?

      KNACSS n’est apparemment plus maintenue depuis 2022 (voir ►https://www.knacss.com ) même s’il y a une refonte en cours visiblement (voir le readme ▻https://github.com/alsacreations/KNACSS/tree/master ).

      jeanmarie @jeanmarie CC BY-NC-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 11/06/2025

      Il y a pas mal d’activité sur le repo depuis le 31/05/2025 cf ▻https://github.com/alsacreations/KNACSS/commits/master

      Perso, j’utilise toujours l’ancienne version de grillade, et si j’ai besoin de plus j’utilise du grid natif.

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 29/05/2016

    Flex Layout Attribute (FLA)
    ▻http://progressivered.com/fla

    Layout helper based on #css #flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — ’layout’ and ’self’:

    <div layout="direction vertically-horizontally reverse">
       <div self="size align"> ... </div>
    </div>
    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 29/05/2016

      Mettre le layout dans le HTML lui-même. Bref, des <table> quoi. Super avancée. :D

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 9/04/2016
    2
    @rastapopoulos
    @mukt
    2

    Almost complete guide to #flexbox (without flexbox) | Kenan Yusuf
    ▻http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

    Unfortunately, not everyone has a browser/device capable of viewing flexbox layouts. This is a cheatsheet-esque guide that offers backwards compatible alternatives to flexbox properties.

    #css

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 10/04/2016

      #intégration #web

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 19/02/2016
    7
    @rastapopoulos
    @ze_dach
    @spip
    @robin
    @jeanmarie
    @monolecte
    @mukt
    7

    Flexbox Patterns
    ▻http://www.flexboxpatterns.com

    Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end, and you can start using them in your own code right away.

    #flexbox_Web_CSS_exemple_clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016

      toujours chelou la génération auto des tags à partir du flux :)
      #flexbox #intégration #web #HTML #CSS #patterns #modèles

      Merci, j’apprends beaucoup mieux avec des exemples très précis comme ça.

      Est-ce qu’on sait comment ces modèles se déclinent quand on arrive sur un navigateur qui ne gère pas bien flexbox, ou pas la bonne version ? (parce que là le code contient juste le css « vanilla » officiel)

      J’aimerais bien utiliser pour de vrai Flexbox lors de ma prochaine intégration (qui doit se faire vers avril normalement) ! Mais je ne voudrais pas trop péter sur tel ou tel navigateur (sans aller à IE6 hein évidemment huhu).

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016

      Il y avait ça comme projet de liste de patterns flexbox aussi :
      ▻http://seenthis.net/messages/338835

      Mais il s’est arrêté à 6 cas… et ça n’a plus été mis à jour apparemment.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 19/02/2016
      @rastapopoulos

      @rastapopoulos les tags pourris, c’est parce que j’ai finalement jeté mon compte Diigo, qui ne servait de relai de ma source Pinboard que pour Seenthis. Si un jour Seenthis supporte les tags façon Pinboard, ce sera mieux. Cf ►http://seenthis.net/messages/324311

      Pour revenir au sujet : si tu utilises Autoprefixer, ça règle une bonne partie (voire tous ?) des problèmes de support dans les navigateurs un peu anciens qui utilisaient d’anciennes syntaxes.

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @fil
      Fil @fil 19/02/2016

      ben en fait c’est les tags de pinboard qui ne sont pas standards :) Mais si tu trouves le temps de faire une PR qui teste proprement qu’il s’agit de pinboard et qui éclate alors le tag, on prend

      Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016

      Oui pour les tags, on avait vu que c’est Pinboard qui ne respecte pas la norme DC. (et donc ça peut très bien être un tag ayant plusieurs mots, ça existe parfaitement, et seenthis ne devrait pas discriminer ça)

      Pour autoprefixer, je n’utilise pas encore, à appliquer après SCSS donc, mais ce n’est pas dans mon workflow pour l’instant (car je fais compiler les SCSS par SPIP, avec son Path). :(

      Mais sinon les préfixes suffisent ? IE8 a plus de 1% du parc encore… (entreprises, mairies, toussa). Bon mais là mon projet au printemps c’est pour le grand public, donc ça va. Ça serait bien de s’y mettre enfin !

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 19/02/2016
      @fil @rastapopoulos

      @fil je suis plutôt en mode allègement drastique de mes pet projects ces temps-ci (c’est très nécessaire), et clairement loin de tout code SPIP (et même PHP) depuis très longtemps, donc il y a objectivement peu de chance que je puisse proposer quoi que ce soit, désolé.

      @rastapopoulos je ne suis pas sûr que les préfixes suffisent, notamment Firefox a eu 3 implémentations différentes…

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016
      @nhoizey

      Et du coup toi tu l’utilises @nhoizey, ou tu l’as déjà utilisé ou fait utilisé sur un « vrai » projet ? (pro ou perso peu importe mais avec des vrais visiteurs à la fin)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 19/02/2016
      @rastapopoulos

      @rastapopoulos il y en a dans mon site perso et dans l’interface de mon jeu ►http://play.esviji.com notamment

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 2/02/2016

    10up/flexibility: Use flexbox while supporting older Internet Explorers
    ▻https://github.com/10up/flexibility

    Use flexbox while supporting older Internet Explorers ▻https://10up.github.io/flexibility

    (pas encore essayé)

    ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016

      #flexbox #polyfill #intégration #web #CSS #javascript

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @baroug
    baroug @baroug 21/01/2016
    2
    @kent1
    @monolecte
    2

    CodePen - Flexbox playgroung
    ▻http://codepen.io/enxaneta/full/adLPwv

    http://codepen.io/enxaneta/pen/adLPwv/image/large.png

    #web_design #code

    baroug @baroug
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 21/01/2016

      #intégration #web #CSS #flexbox

      RastaPopoulos @rastapopoulos CC BY-NC
    • @monolecte
      Monolecte 😷🤬 @monolecte CC BY-NC-SA 16/03/2016

      Je l’ai utilisé pour la refonte de mes thèmes et franchement, c’est bien puissant comme bousin !

      Monolecte 😷🤬 @monolecte CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 31/08/2015

    #flexbox Accessibility Implications and Solution Suggestion [CSS Working Group Wiki]
    ▻https://wiki.csswg.org/spec/css3-flexbox/accessibility#author-changes-the-visual-order-to-3-2-1-with-css-using-fl

    Tags: flexbox accessibilité #tabulation #ordre #clevermarks

    #accessibilité

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 25/06/2015

    Understanding #flexbox · MadebyMike
    ▻http://madebymike.com.au/writing/understanding-flexbox

    this article focuses on understanding how Flexbox calculates the width of items Tags: flexbox #largeur #calcul #algorithme #clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 20/04/2015
    6
    @rastapopoulos
    @kent1
    @cy_altern
    @marcimat
    @monolecte
    @mukt
    6

    A Visual Guide to CSS3 #flexbox Properties | Scotch
    ▻https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

    https://cask.scotch.io/2015/04/CSS3-Flexbox-Model.jpg

    #css

    b_b @b_b PUBLIC DOMAIN
    • @kent1
      kent1 @kent1 ART LIBRE 20/04/2015

      ▻https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground pour le tester

      kent1 @kent1 ART LIBRE
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 1/04/2015

    Playing With #flexbox and Quantity Queries, From the Notebook of Aaron Gustafson
    ▻http://www.aaron-gustafson.com/notebook/playing-with-flexbox-and-quantity-queries

    The Idea: A grid #layout that flexes to visually highlight 1-2 upcoming future events and allows the others to flow in at the default grid size. It should be set up to handle everything from a single future event to a dozen or more. Tags: flexbox layout #grille #clevermarks

    • #Aaron Gustafson
    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 17/03/2015
    1
    @kent1
    1

    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

    • #Chris Wright
    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @rastapopoulos
    RastaPopoulos @rastapopoulos CC BY-NC 4/02/2015
    5
    @fil
    @02myseenthis01
    @b_b
    @mukt
    5
    @kozlika

    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

    RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/02/2016

      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

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
0 | 25

Thèmes liés

  • #css
  • #intégration
  • #web
  • #css
  • #flexbox
  • #grille
  • #html
  • #layout
  • #grid
  • #clevermarks
  • #grid
  • technology: html
  • #web_design
  • #css3
  • technology: html
  • #patterns
  • #rwd
  • #html
  • #webdesign
  • #documentation
  • #framework