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

 
  • #l
  • #la
RSS: #layout

#layout

  • #layouts
  • #layout-gala
0 | 25 | 50
  • @olange
    Olivier Lange @olange CC BY-SA 11/05/2021
    10
    @02myseenthis01
    @arno
    @jeanmarie
    @rastapopoulos
    @monolecte
    @7h36
    @tofulm
    @ze_dach
    @marcimat
    @cy_altern
    10

    «Next Gen CSS: @container» de Una Kravets, CSS Tricks, 11.05.2021
    ▻https://css-tricks.com/next-gen-css-container

    « […] You can think of these like a media query (@media), but instead of relying on the viewport to adjust styles, the parent container of the element you’re targeting can adjust those styles.

    Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.

    No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics. […] »

    #webdev #layout

    Olivier Lange @olange CC BY-SA
    • @arno
      ARNO* @arno ART LIBRE 11/05/2021

      Oh là là là là là là… !

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/05/2021

      ça fait tellement d’année qu’on attend ça…

      #CSS #intégration #web #responsive

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 22/01/2020

    Éléments HTML5 de structure - romy.tetue.net
    ▻http://romy.tetue.net/elements-html-5-de-structure

    Le mémo de romy.tetue.net pour l’organisation de la structure d’une page en HTML5
    Sur les imbrications section/article voir aussi : ▻https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
    Sur la structuration implicite du plan des éléments de la page généré par ces balises, voir : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

    #html5 #layout #structure #section #article

    cy_altern @cy_altern CC BY-SA
    • @tetue
      tetue @tetue CC BY 23/01/2020

      Sans oublier <main> (à la place de <div id="content">) qui a été ajouté à la spec HTML5 ultérieurement.

      tetue @tetue CC BY
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 24/01/2020

      merci pour la précision !

      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 :
    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
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 20/04/2019
    4
    @tofulm
    @jeanmarie
    @monolecte
    @mukt
    4

    CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
    ►https://tobiasahlin.com/blog/masonry-with-css

    Méthode « tout CSS » pour faire un layout masonry : à base de flexbox, :nth-child() et order
    difficulté possible : semble nécessiter de fixer la hauteur de l’ensemble...

    Voir aussi : 10 exemples de layout « types » en flebox : ▻https://tobiasahlin.com/blog/common-flexbox-patterns

    #css #masonry #layout

    • #Freemasonry
    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @oanth_rss
    oAnth_RSS @oanth_rss CC BY 18/10/2018

    CSS Layout cookbook - CSS: Cascading Style Sheets (▻https://develope...
    ▻https://diasp.eu/p/7852931

    CSS Layout cookbook - CSS: Cascading Style Sheets | #cookbook #CSS #MDN #layout

    oAnth_RSS @oanth_rss CC BY
    É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
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 17/04/2018
    2
    @rastapopoulos
    @cy_altern
    2

    What’s in the Drupal 8 Roadmap?
    ▻https://www.ostraining.com/blog/drupal/drupal-8-roadmap

    "In the past, Drupal’s release cycles were vague. “It will be ready when it’s ready” was a favorite quote. That was not the approach that Dries took in Nashville. Instead, he presented a very specific roadmap for where Drupal is headed."

    #Drupal_D8_roadmap_layout_JSONAPI_MediaLibrary_clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 17/04/2018

      https://www.ostraining.com/cdn/images/drupal8/roadmap/drupal-8-roadmap.jpg

      ▻https://www.drupal.org/project/ideas/issues/2811175

      ▻https://www.drupal.org/docs/8/api/layout-api

      #drupal #roadmap #layout #interface #API #JSON

      RastaPopoulos @rastapopoulos CC BY-NC
    É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
  • @rastapopoulos
    RastaPopoulos @rastapopoulos CC BY-NC 20/02/2018
    1
    @mist_
    1

    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

    via ▻https://seenthis.net/messages/670728

    #intégration #web #HTML #CSS #css-grid #layout

    RastaPopoulos @rastapopoulos CC BY-NC
    É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
  • @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
  • @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
  • @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
  • @0gust1
    0gust1 @0gust1 CC BY-NC 11/02/2015
    1
    @gblin
    1

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

    • #potential solutions
    0gust1 @0gust1 CC BY-NC
    Écrire un commentaire
  • @odilon
    odilon @odilon CC BY-NC-ND 28/01/2015
    3
    @monolecte
    @gastlag
    3

    Aux origines de Chihiro et Totoro, créatures du Studio Ghibli
    ▻http://www.lemonde.fr/cinema/article/2015/01/28/aux-origines-de-chihiro-et-totoro-creatures-du-studio-ghibli_4564931_3476.ht

    http://golem13.fr/wp-content/uploads/2014/09/ArtLudiqueGhibli-01001.jpg

    Les adolescents qui ont grandi avec Totoro, Pompoko, Kiki, Chihiro ou Ponyo pour compagnons de rêveries, et les adultes qui ont conservé une part d’enfance, pousseront avec émerveillement les portes du Musée Art Ludique à Paris. Jusqu’au 1er mars, le lieu, situé en bord de Seine, présente, sur 1 200 mètres carrés, 1 300 dessins originaux issus du studio japonais Ghibli, d’où sont sorties ces merveilles de l’animation que sont Le Voyage de Chihiro, Princesse Mononoké, Le Tombeau des Lucioles ou Mon Voisin Totoro, pour ne citer que les plus connus des films de Hayao #Miyazaki ou de son partenaire Isao Takahata.

    L’exposition du Studio Ghibli ouvre ses portes à Paris
    ▻http://golem13.fr/art-ludique-le-musee-studio-ghibli-dessins
    C’est la première fois que ces documents originaux, pour la plupart dessinés de la main même des deux fondateurs du studio tokyoïte, sont exposés en Europe. L’occasion pour les fans de ces deux maîtres de l’animation, et pour tous les passionnés d’un genre cinématographique trop souvent cantonné au public enfantin, de s’immerger dans leur univers et d’en découvrir les coulisses. Mais aussi de mesurer, en s’approchant au plus près du processus créatif, la virtuosité des deux artistes, dont chaque dessin, conjuguant encre, mine, crayon, gouache et aquarelle, constitue une œuvre en soi.

    http://golem13.fr/wp-content/uploads/2014/09/GalerieArttLudique-dessins-Ghibli-studio2.jpg http://golem13.fr/wp-content/uploads/2014/09/GalerieArttLudique-dessins-Ghibli-studio7.jpg http://golem13.fr/wp-content/uploads/2014/09/GalerieArttLudique-dessins-Ghibli-studio5.jpg http://golem13.fr/wp-content/uploads/2014/09/GalerieArttLudique-dessins-Ghibli-studio3.jpg

    ▻http://vimeo.com/106901562

    #dessin #layout #expo

    • #Paris
    • #Europe
    • #Isao Takahata
    odilon @odilon CC BY-NC-ND
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 20/01/2015

    Gaunt Face | Matt Gaunt - What the #virtual #viewport?
    ▻https://gauntface.com/blog/2015/01/16/what-the-virtual-viewport

    the idea is splitting the notion of “the viewport” into the “layout viewport” (where fixed position items are attached) and the “visual viewport” (What the users actually see) Tags: viewport virtual #layout #RWD

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @monolecte
    Monolecte 😷🤬 @monolecte CC BY-NC-SA 6/10/2014
    4
    @fil
    @odilon
    @baroug
    @0gust1
    4

    Dessins du Studio Ghibli, les secrets du layout exposés | Citazine, Le Magazine urbain tendance et culturel
    ▻http://www.citazine.fr/article/dessins-studio-ghibli-secrets-layout-exposes-art-ludique

    http://www.citazine.fr/sites/default/files/imagecache/article_img/3388dessinsdustudioghibliarticlechihirocitazine.jpg

    Après avoir proposé des #expositions sur les univers Pixar et Marvel, le musée #Art Ludique met à disposition du public une partie des #archives du célèbre Studio Ghibli à travers une sélection de plus d’un millier de #layouts, des #dessins originaux exposés pour la première fois en Europe. Didactiques, les explications qui accompagnent ces dessins préparatoires – fournies par un audioguide indispensable – lèvent le voile sur le long travail nécessaire pour aboutir à des #films comme Le Voyage de Chichiro (2001), Ponyo sur la Falaise (2008) ou encore Mes voisins les Yamada (1999).

    #graphisme

    • #Europe
    Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @reka
      Reka @reka CC BY-NC-SA 6/10/2014

      #esquisse #visualisation

      Reka @reka CC BY-NC-SA
    • @odilon
      odilon @odilon CC BY-NC-ND 6/10/2014

      ▻http://www.artludique.com/index.html

      odilon @odilon CC BY-NC-ND
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 10/06/2014
    5
    @rastapopoulos
    @baroug
    @la_taupe
    @02myseenthis01
    @mukt
    5

    A Complete Guide to #flexbox
    ►http://css-tricks.com/snippets/css/a-guide-to-flexbox

    Tags : flexbox #documentation #CSS #mise_en_page #layout #RWD #référence

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 20/03/2014

    Leveling Up With #flexbox
    ▻http://zomigi.com/blog/leveling-up-with-flexbox

    “Today I spoke at Smashing Conference in Oxford, England, on “Leveling Up With Flexbox.” The talk was based off my earlier flexbox presentation, but I focused less on the basic syntax, since I think most of us have already read at least a bit about that by now, and dove right into more code examples. I talked about how to actually put it to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with simple fallbacks.” Tags: #CSS flexbox #présentation (...)

    #layout

    • #Oxford
    • #United Kingdom
    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 27/12/2013

    Responsive Layouts Beyond the Sidebar | Jen Simmons
    ▻http://responsivelayouts.jensimmons.com

    Les slides de la présentation de Jen Simmons sur le Responsive Web Design en mode #Mobile_first (et avec des MQs en #em !) Tags : #mise_en_page #layout Responsive Web Design (RWD) em #todo:formation:rwd Mobile first

    #Responsive_Web_Design_RWD_

    • #Jen Simmons
    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @baroug
    baroug @baroug 18/12/2013
    3
    @reka
    @0gust1
    @tetue
    3

    Fonts have feelings too — ooomf labs — Medium
    ▻https://medium.com/who-what-why/1523564d966c

    https://d262ilb51hltx0.cloudfront.net/max/800/1*b8-yjFI0AA_3fmMoXT2wrQ.png

    The researchers found that readers felt bad while reading the poorly designed layout. Sometimes, this feeling would be expressed physically with a frown.

    The corrugator supercilii facial muscles that help produce a frown have been linked to the amygdala, an area of your brain responsible for emotion.

    Meanwhile, the participants who read content from the good reading layout, felt like it took less time to read and felt better.

    #web_design #typographie

    baroug @baroug
    • @reka
      Reka @reka CC BY-NC-SA 18/12/2013

      #maquette #layout #forme

      Reka @reka CC BY-NC-SA
    • @0gust1
      0gust1 @0gust1 CC BY-NC 18/12/2013

      L’étude citée dans l’article : ▻http://affect.media.mit.edu/pdfs/05.larson-picard.pdf

      0gust1 @0gust1 CC BY-NC
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 28/11/2013

    Breaq, a resizer bookmarklet - CSS | Thomas Zilliox
    ►http://tzi.fr/CSS/Responsive/Breaq-bookmarklet

    Breaq is a bookmarklet that allows you to resize a website to its critical sizes. It automatically detects the breakpoints in pixel and em

    #layout #html #javascript #responsive #mobile #taille #critique

    • #Thomas Zilliox
    • #HTML
    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @klaus
    klaus++ @klaus 18/07/2013

    Au secours !

    Sur l’écran de mon portable Nexus S en position verticale (portrait) le champ de recherche #seenthis saute dans la ligne en dessous (avec Chrome). Il cache alors une partie du texte.

    En position horizontale (paysage) le champ recherche reste dans sa position en haut d el’écran.

    Les icônes gouvernail et bol de soupe chaude restent bien en place.

    A mon avis les guillemets seenthis positionnés à gauche en haut prennent trop d’espace horizontal et provoquent le saut de ligne - peut-être vous pourriez déplacer tous les éléments de la barre supérieure dans un seul bloc afin de profiter de la totalité de l’espace en largeur d’une manière plus flexible. On perdrait le positionnement à droite du gouvernail, mais bof ...
    Peut-être il est possible d’attribuer des largeurs flexibles aux blocs existants ... Ce sont juste des idée pour expliquer mon observation, je ne connais pas le code.

    #layout #interface

    klaus++ @klaus
    • @monolecte
      Monolecte 😷🤬 @monolecte CC BY-NC-SA 18/07/2013

      Chez moi aussi (HTC HD2 hacké en Android Miui Jelly Bean), l’affichage est caca. Et ce n’est pas récent.

      Monolecte 😷🤬 @monolecte CC BY-NC-SA
    • @biggrizzly
      BigGrizzly @biggrizzly CC BY-NC-SA 18/07/2013

      Idem sur mon Defy... mais comme il est en Android 2.1, j’ai jamais osé faire part de mes petits soucis...

      BigGrizzly @biggrizzly CC BY-NC-SA
    • @denisb
      denisb @denisb 18/07/2013

      ouip. pareil sur desktop en fonction de la taille de la fenêtre du navigateur :

      http://www.circaete.net/seenthis/francaise.png http://www.circaete.net/seenthis/italienne.png

      denisb @denisb
    Écrire un commentaire
  • @klaus
    klaus++ @klaus 18/07/2013

    La traduction allemande s’affiche bien sur mon portable, pour le texte d’invitation c’est bien aussi.

    Maintenant il faudrait internationaliser/traduire la partie « A lire » qui s’affiche directement en dessous du formulaire d’inscription.

    Comment faire ?

    #seenthis #layout #traduction

    klaus++ @klaus
    Écrire un commentaire
0 | 25 | 50

Thèmes liés

  • #css
  • #design
  • #grid
  • #webdesign
  • #web
  • #reference
  • #webdev
  • #framework
  • #css
  • #dev
  • #interface
  • #inspiration
  • #ui
  • #javascript
  • #grille
  • #html
  • #tools
  • #jquery
  • #graphics
  • #groupe
  • #clevermarks
  • #css3
  • #flexbox
  • #responsive
  • programminglanguage: xhtml
  • #portfolio
  • #intégration
  • #thème
  • #float
  • #ressources
  • #tutorial
  • #generator
  • #typographie
  • #mobile
  • #mark-boulton
  • #mise-en-page
  • #patterns
  • #html5
  • #blueprint
  • #mootools