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

 
  • #g
  • #gr
RSS: #grid

#grid

  • #gridsystem
  • #grid-css
  • #grid-cartograms
  • #grid-layout
  • #grid-arendal
  • #grid_map
  • #grid_layout
  • #grid_frameworks
0 | 25 | 50
  • @marcimat
    marcimat @marcimat 29/12/2020
    8
    @severo
    @jeanmarie
    @biggrizzly
    @ericw
    @simplicissimus
    @7h36
    @fil
    @monolecte
    8
    @severo

    Germain Forestier sur Twitter : "1/ Premier essai d’un « grid cartogram » ou « grid/tile map » pour la France. Dans cette représentation chaque département a la même taille (ici un carré).

    ▻https://twitter.com/gforestier/status/1342789451571982336
    ▻https://threadreaderapp.com/thread/1342789451571982336.html

    #cartographie #covid #grid-cartograms

    Y a plein de gens qui aiment les cartes ici. (le thread cite un article de @severo d’ailleurs ▻https://observablehq.com/@severo/grid-cartograms)

    https://pbs.twimg.com/media/EqKLnU5XMAAuCLa.jpg https://pbs.twimg.com/media/EqKL9A2XMAIJZRu.jpg https://pbs.twimg.com/media/EqKMD_EWMAA0AHj.jpg

    Ceci dit, la France mérite des héxagones, quand même, sapristi...

    https://pbs.twimg.com/media/EqKMcXzWMAI13bu.png

    marcimat @marcimat
    • @biggrizzly
      BigGrizzly @biggrizzly CC BY-NC-SA 29/12/2020

      A priori, la source est là :
      ▻https://germain-forestier.info/covid/cartes.html#menu

      https://germain-forestier.info/covid/map/hex-map-incidence.png

      BigGrizzly @biggrizzly CC BY-NC-SA
    • @marcimat
      marcimat @marcimat 29/12/2020
      @biggrizzly

      ah super, merci @biggrizzly

      marcimat @marcimat
    • @olaf
      Olaf @olaf 29/12/2020

      rah, chuis dég, j’avais fait un truc dans le genre (peut-être moins clair) y a un mois, pour avoir une vue globale avec mes courbes carrées :

      ▻https://seenthis.net/messages/893638

      Olaf @olaf
    É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 23/05/2020

    Four lines of CSS to make a calendar layout with CSS grid – Js Craft
    ▻http://www.js-craft.io/blog/four-lines-of-css-to-make-a-calendar-layout-with-css-grid

    calendrier HTML avec grid + une astuce pour placer le premier jour correctement

    #grid #css #calendrier

    cy_altern @cy_altern CC BY-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 : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
    ►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

  • @olange
    Olivier Lange @olange CC BY-SA 4/08/2019

    « How to create an image gallery with CSS Grid » by Abhishek Jakhar, 27.12.2018 ▻https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c #css #grid #webcomponents #gallery

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire

  • @monolecte
    Agnès Maillard @monolecte CC BY-NC-SA 11/07/2019
    3
    @daviddelon
    @cy_altern
    @jeanmarie
    3

    Jules Forrest on CodePen
    ▻https://codepen.io/julesforrest

    https://s.cdpn.io/profiles/user/244137/512.jpg?1

    Ce profil Codepen est une perle d’expérimentations typographiques avec CSS Grid (via @tixie@eldritch.cafe)

    Agnès Maillard @monolecte CC BY-NC-SA
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 12/07/2019

      #css #grid #codepen

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 19/01/2019

    What is Grid Layout? [10 #shopify themes examples]
    ▻https://hackernoon.com/what-is-grid-layout-10-shopify-themes-examples-16a7cb746e7c?source=rss--

    https://cdn-images-1.medium.com/max/800/1*D43yBOZd3MsOACplnJBp3Q.jpeg

    What is Grid Layout? PLUS: 10 Shopify Themes ExamplesMessy structures with elements overlapping each other and jumping all over the page could be very creative and original, but the designer has to invest an enormous amount of efforts to make it look understandable. On the other hand, pages that have an accurate layout with strict alignment and clear organization don’t demand some extra observation skills from the users and thus are more user-friendly. The layouts built in a precise and flat way are called grid layout themes.The grid is a set of horizontal and vertical lines which help to define where rows and columns will take place on the page. All the content you want to place to the website is placed into those rows and columns and that’s why it looks so accurate.Despite messy layout (...)

    #whats-grid-layout #grid-layout #shopify-theme

    • #Shopify
    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 24/10/2018
    1
    @gastlag
    1

    CSS Grid in IE : CSS Grid and the New Autoprefixer | CSS-Tricks
    ▻https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer

    https://css-tricks.com/wp-content/uploads/2018/06/ie-tiles.jpg

    Utilisation des propriétés CSS3 grid avec Internet Explorer : les adaptations/contournements apportés par Autoprefixer et les propriétés vraiment pas supportées.

    Voir aussi :
    – le repo d’autoprefixer ▻https://github.com/postcss/autoprefixer (Gulp / Grunt / js autonome...)
    – le repo de html-autoprefixer pour les CSS inline : ▻https://github.com/RebelMail/html-autoprefixer

    #grid #autoprefixer #Internet_explorer #prefixe #css3

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @jeanmarie
    jeanmarie @jeanmarie CC BY-NC-SA 16/06/2018
    3
    @cy_altern
    @gastlag
    @suske
    3

    Grid Garden - un jeu pour apprendre les #grid #CSS
    ▻http://cssgridgarden.com

    http://cssgridgarden.com/images/screenshot.png

    #layout #web_design #css-grid #carottes

    jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire

  • @mist_
    Mist. GraphX @mist_ 9/06/2018
    3
    @rastapopoulos
    @mukt
    @monolecte
    3

    Don’t Use My Grid System (or any others)
    ▻https://noti.st/mirisuzanne/DDJo3H

    https://on.notist.cloud/slides/ext/large-b975b5b4c1b9c897.png

    #css#layout#grid

    Mist. GraphX @mist_
    Écrire un commentaire

  • @arno
    ARNO* @arno ART LIBRE 4/06/2018
    3
    @l_l_de_mars
    @mukt
    @rastapopoulos
    3

    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

  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 9/04/2018

    Front-End Tricks: 100% #css control of #masonry Layout w/ left-right content flow
    ▻https://hackernoon.com/masonry-layout-technique-react-demo-of-100-css-control-of-the-view-e4190

    https://cdn-images-1.medium.com/max/1024/1*9jRvf6g6tMKS7jn84JmuOA.png

    CSS column-count + array reordering = left-to-right content flowLive Demo: ▻https://github.com/jessekorzan/masonry-css-jsThe problem… column-count works great except for left-to-right scan readingMasonry Layouts… popularized by sites like Pinterest. Loved by non-coding designers and holy-grailed in corporate boardrooms.Naturally, many sharp front-enders have worked on solutions. We have several libraries, techniques and hacks to achieve this marvel of content display.There are times when a masonry layout is an appropriate design decision. Depending on what else that design has to accommodate, these solutions might be a good fit.For me, especially in exploratory efforts, a pure-CSS method is a flexible and fast way to iterate. I don’t want to rely on DOM manipulation or end up with a contrived (...)

    #react #javascript #grid-layout

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire

  • @mist_
    Mist. GraphX @mist_ 13/03/2018

    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 …

    #css#layout#gridsystem

    Mist. GraphX @mist_
    Écrire un commentaire

  • @mist_
    Mist. GraphX @mist_ 28/02/2018
    1
    @aurelie
    1

    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

    http://adrianroselli.com/wp-content/uploads/2018/02/ARIA-flex-table_generated_thumb-150x150.png

    #css#flex#grid#ARIA

    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_ 12/02/2018
    2
    @rastapopoulos
    @mukt
    2

    Ingrid | Visually build responsive layouts with CSS grid
    ▻http://ingrid.guide

    #css#grid#pageBuilder#layout

    Mist. GraphX @mist_
    • @mist_
      Mist. GraphX @mist_ 14/02/2018

      compliqué quand même cet outil, déjà que les grids c’est aussi puissant que complexe, mais la au final on comprends encore moins je trouve ^^ pas très ludique, ni andragogue comme approche … ou alors … ç’est moi

      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 13/12/2017
    6
    @jeanmarie
    @tofulm
    @rastapopoulos
    @mukt
    @suske
    @gastlag
    6

    How to make your HTML responsive by adding a single line of #CSS
    ▻https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css

    https://cdn-images-1.medium.com/max/1200/1*jCNANupl0ECRzF6cOLuWNw.gif

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    Titre un peu racoleur mais tout de même intéressant.

    #grid

    • #HTML
    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 14/12/2017

      #intégration #web #html #responsive #css-grid

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @tofulm
    tofulm @tofulm 5/12/2017
    4
    @nicod_
    @mukt
    @rastapopoulos
    @jeanmarie
    4

    Muuri - Responsive, sortable, filterable and draggable grid layouts
    ▻https://haltu.github.io/muuri

    Responsive, sortable, filterable and draggable grid layouts

    tofulm @tofulm
    • @nicod_
      nicod_ @nicod_ 6/12/2017

      #css #grid #layout #dragndrop

      nicod_ @nicod_
    Écrire un commentaire

  • @nicod_
    nicod_ @nicod_ 22/11/2017
    1
    @tofulm
    1

    Basehold.it - quick, painless, javascript-free baseline overlays
    ▻https://basehold.it
    #css #grid #vertical #rhythm #rythme #typo

    nicod_ @nicod_
    É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

  • @b_b
    b_b @b_b PUBLIC DOMAIN 21/11/2017
    3
    @monolecte
    @mukt
    @nicod_
    3

    Using #CSS #Grid: Supporting Browsers Without Grid

    ▻https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid

    When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.

    In this article, I explore approaches to dealing with #browser_support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?

    • #CSS
    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 21/06/2017
    5
    @nicod_
    @cy_altern
    @tofulm
    @rastapopoulos
    @mukt
    5

    Common UI Patterns
    ▻http://gridbyexample.com/patterns

    A collection of built #patterns to use as starting points, complete with fallbacks. Remember that you do not need to use these for full page #layout, they could as easily be a small component in a design.

    https://gridbyexample.com/img/pattern1.png https://gridbyexample.com/img/pattern5.png

    #css #grids

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 22/06/2017

      #intégration #web #grille #exemples

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 15/06/2017
    2
    @magik
    @cy_altern
    2

    An Introduction to the fr CSS unit
    ▻https://css-tricks.com/introduction-fr-css-unit

    https://cdn.css-tricks.com/wp-content/uploads/2017/06/grid-2.png

    The fr unit (a “fraction”) can be used when defining grids like any other #CSS length such as %, px or em.

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 16/06/2017

      #intégration #web #css #html #grille #grid #unité

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

0 | 25 | 50

Thèmes liés

  • #css
  • #layout
  • #web
  • #grille
  • #webdesign
  • #design
  • #tools
  • #css
  • #intégration
  • #javascript
  • #framework
  • #dev
  • #generator
  • #électricité
  • #grids
  • #flexbox
  • #grid
  • #blueprint
  • #clevermarks
  • #typography
  • #semantic
  • #responsive
  • #mise-en-page
  • #resources
  • #grid-layout
  • #css3
  • #less
  • #html
  • #responsive_web_design
  • #flexbox
  • #mark-boulton
  • position: designer
  • #métal
  • #charbon
  • industryterm: grille responsive web design
  • #orpaillage
  • #industries
  • publishedmedium: smashing magazine
  • #environnement
  • city: css