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

 
  • #c
  • #cs
RSS: #css

#css

  • #css2.1
  • #css3-page
  • #css4
  • #css1k
  • #css-
  • #cssquery
  • #css_
  • #csszengarden
0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 925
  • @monolecte
    Agnès Maillard @monolecte CC BY-NC-SA 2/03/2021
    3
    @rastapopoulos
    @biggrizzly
    @marcimat
    3

    Dans les recoins de la double page (Paged.js à la maison, saison 2) | Polylogue
    ▻https://polylogue.org/apres-la-page-la-double-page

    XML est très intéressant, mais s’articule avec des outils d’écriture (traitement de texte, notamment). Or on ne peut faire abstraction de l’aspiration à sortir des traitements de texte, de la multiplication d’outils alternatifs. Inspiré par le html et aussi par les langages de balisage léger, comme Markdown (qui permet de constituer une structure simple de html standard sans avoir à subir visuellement le code, et a été créé pour faciliter l’écriture, ce qu’on appelle le flow, d’un blogueur), je me suis demandé si on ne pourrait pas utiliser le flux html + css pour faire le livre, mais également, pour proposer des modalités d’écriture et d’inclusion de l’auteur et du designer dans un processus éditorial.

    Il ne s’agit pas d’automatiser la mise en page, c’est un point sur lequel j’insiste, car les flux html + css ont tendance à faire fantasmer certains éditeurs qui se disent qu’ils vont pouvoir automatiser d’avantage, voire se passer de compositeur. À eux je souhaite bonne chance, surtout s’ils sont un minimum exigeants sur la qualité de composition. Non, c’est une autre manière de composer, tout comme markdown offre une autre manière d’écrire que Word, l’idée restant de fournir au compositeur une palette suffisamment complète pour lui permettre de bien travailler. Les gens, leurs savoir-faire ont toute leur place, et il s’agit plutôt de leur proposer une palette alternative suffisamment complète pour qu’ils et elles puissent s’exprimer.

    Agnès Maillard @monolecte CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 2/03/2021

      #intégration #web #livre #print #CSS #HTML #composition #édition #PAO #paged.js (je me souviens jamais des tags que je mets pour la PAO en mode web CSS, ya plusieurs seens là dessus déjà)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @monolecte
      Agnès Maillard @monolecte CC BY-NC-SA 2/03/2021

      Je suis comme toi  : #Web_design  ?

      Agnès Maillard @monolecte CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 2/03/2021

      J’avais bien mis tous les bons, manquait juste #impression :)
      Cf :
      ►https://seenthis.net/messages/742687
      ►https://seenthis.net/messages/734575

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @rastapopoulos
    RastaPopoulos @rastapopoulos CC BY-NC 22/02/2021
    7
    @02myseenthis01
    @jeanmarie
    @monolecte
    @ericw
    @bouts
    @7h36
    @alexcorp
    7
    @drbouvierleduc @smellup

    artf/grapesjs : Free and Open source Web Builder Framework. Next generation tool for building templates without coding
    ▻https://github.com/artf/grapesjs

    Un framework de templating par interface, mais autonome, pas propre à un CMS (comme Gutemberg ou autre). Ça peut servir à faire un CMS complet. Mais ça pourrait servir à faire aussi juste un logiciel de maquettage rapide aussi, mais… qui produit du HTML/CSS responsive du coup. Comme Bootstrap Studio, sauf que c’est en web et libre là… (vraiment ça fait tout pareil que bootstrap studio quasiment).

    Peu aussi être inspirant pour les systèmes de blocs configurables, d’interface pour construire une page par blocs.

    GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates.

    https://camo.githubusercontent.com/5dfc304c04a6cc50240d2afb6288f79e1a15afa5c9a04ca65aeb344e18f39153/687474703a2f2f6772617065736a732e636f6d2f696d672f6772617065736a732d66726f6e742d706167652d6d2e6a7067#.jpg

    #template #maquette #interface #blocs #HTML #CSS #responsive
    ping @drbouvierleduc @smellup

    RastaPopoulos @rastapopoulos CC BY-NC
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 23/02/2021

      Super outil, complètement personnalisable et qu’on peut utiliser pour plein de situations. On est en train de le mettre en place dans une appli web pour la partie éditoriale/marketing, comme ça on va contenter nos collègues qui sont habitués au confort de Wordpress (Gutemberg donc), qui est super bien foutu à ce niveau.

      alexcorp @alexcorp CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/02/2021

      merci pour le retour :)

      bon ça reste que pour enregistrer du HTML directement… il me semble que dans son genre Gutemberg fait mieux (même si très lié à WP donc difficile d’utiliser ailleurs) : ça sérialise des paramètres, qu’eux mettent à plat avec leur format (des commentaires HTML avec du JSON) mais qu’on pourrait parfaitement décider d’enregistrer comme on veut + des styles CSS générés (avec un id unique pour chaque bloc). Et du coup ça peut possiblement générer autre chose que du HTML ou ça peut être personnaliser (si jamais pour un bloc ayant tel sens, on voudrait que ce soit pas « div » mais « section » ou « blockquote » un autre jour ou dans tel autre contexte qu’une page web).

      Enfin bon c’est très intéressant à creuser quand même. Ne serait-ce que pour faire du maquettage rapide (mais est-ce qu’il existe un vrai logiciel qui utilise déjà cette lib pour faire ça ? ou même pour éditer des pages en général tout court, que ce soit maquette ou vraie page… un frontpage moderne en webapp quoi)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 23/02/2021

      Oui le souci de Gutemberg c’est qu’il faut sortir de wordpress. On a cherché plusieurs outils pour faire le même taf (sans tout redévelopper) et GrapesJS est ce qu’on a trouvé de mieux, même si c’est pas tout à fait ce pour quoi il est prévu à la base. On a adapté ça avec notre CSS custom et donc en quelques instants on peut construire une page assez librement tout en étant contraint par notre design system.

      Pour le maquettage pur sinon, il y a Penpot qui vient de sortir : ►https://penpot.app

      alexcorp @alexcorp CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/02/2021

      oui déjà signalé ici :) ►https://seenthis.net/messages/900030

      Mais justement Penpot ne produit PAS du HTML CSS responsive mais des SVG, de l’image… Alors que c’est tout l’intérêt de maquetter directement en HTML, c’est de base responsive, mobile first, etc. (ce que fait Bootstrap Studio, mais dans un soft pas libre, et pas collaboratif, pas non plus versionnable avec git, etc)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 23/02/2021

      Clairement oui, le but premier de GrapesJS c’est de pouvoir maquetter directement en HTML+CSS, après je l’ai pas utilisé dans cette optique et je sais pas ce que ça vaut par rapport à Bootstrap Studio (pas utilisé non plus).

      alexcorp @alexcorp CC BY-NC
    Écrire un commentaire

  • @baroug
    baroug @baroug 4/02/2021
    7
    @arno
    @monolecte
    @7h36
    @biggrizzly
    @rastapopoulos
    @02myseenthis01
    @alexcorp
    7

    Things You Can Do With #CSS Today — Smashing Magazine
    ▻https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today

    https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cd843e63-2b5a-4c91-b390-2057ba966991/present-future-css-techniques.jpg

    The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too. In this article, we’ll look into masonry layout, :is selector, clamp(), ch and ex units, updated text decoration, and a few other useful CSS properties.

    #web_design

    baroug @baroug
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 16/11/2020
    1
    @arno
    1

    clamp() - CSS : Feuilles de style en cascade | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/CSS/clamp()

    La fonction CSS clamp() permet de ramener (d’écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction clamp() peut être utilisée à tout endroit où une valeur de type <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> peut être utilisée.

    #clamp #css #calcul #maximum_minimum

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 3/09/2020
    6
    @tofulm
    @b_b
    @touti
    @monolecte
    @7h36
    @jeanmarie
    6
    @tofulm

    Responsive Data Tables | CSS-Tricks
    ▻https://css-tricks.com/responsive-data-tables

    Une astuce en CSS pour rendre les tableaux HTML de données responsives (spoiler : utilise des ::before)
    ping @tofulm :)

    #css3 #before #datatable #responsive

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @framasoft
    Framasoft.org @framasoft CC BY 24/08/2020
    7
    @biggrizzly
    @monolecte
    @stephane
    @touti
    @7h36
    @sombre
    @alexcorp
    7

    Pour une page #Web qui dure 10 ans ?
    ▻https://framablog.org/2020/08/24/pour-une-page-web-qui-dure-10-ans

    Des #pages web légères et moins gourmandes en ressources, du « low-tech » c’est plus écologique probablement, mais c’est aussi une des conditions pour rendre durables des #contenus qui ont une fâcheuse tendance à se volatiliser… Jeff Huang est professeur d’informatique et … Lire la suite­­

    #Autonomie_numérique #archivage #CSS #HTML #Images #marque-pages #pérennité #URL

    Framasoft.org @framasoft CC BY
    • @biggrizzly
      BigGrizzly @biggrizzly CC BY-NC-SA 24/08/2020

      Où je découvre GoAccess... va falloir aller tester ça... sur SeenThis par exemple ? :-)
      ▻https://goaccess.io

      GoAccess is an open source real-time web log analyzer and interactive viewer that runs in a terminal in *nix systems or through your browser.

      It provides fast and valuable HTTP statistics for system administrators that require a visual server report on the fly.

      BigGrizzly @biggrizzly CC BY-NC-SA
    • @touti
      touti @touti 24/08/2020

      #plook
      découvert cet été que des amis modifient toujours un site qui date de 2004 sans que ça casse (cms basic et sans bdd). Je me souviens d’une formation web au siècle dernier ou le prof sans méchanceté se disait toutefois perplexe devant la pauvreté des contenus. Et de fait, si on code pour le web, les mises à jour de sécurité, le suivi technique, la concurrence et la course à la nouveauté technologique ont contribué à épuiser la créativité politique du début du web.
      Je ne parle évidemment pas des industries de clic à égo.

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

  • @b_b
    b_b @b_b PUBLIC DOMAIN 5/06/2020
    2
    @cy_altern
    @rastapopoulos
    2

    CUBE #CSS - Piccalilli
    ▻https://piccalil.li/blog/cube-css

    https://piccalil.li/images/social-share/cube-css.png

    In this article, I’m going to tell you about how I like to write CSS, which I think could help a lot of folks—at least I hope so—because I’ve used this approach, or an earlier iteration of this approach, to power massive websites, tiny blogs, mobile apps and even intranet software! This #methodology has roots in both huge projects that service millions of people all the way down to small websites and starter kits, thanks to its flexibility. This Flexibility has also enabled CUBE CSS to work in both very old and very new codebases.

    The focus of the methodology is utilising the power of CSS and the web platform as a whole, with some added controls and structures that help to keep things a bit more maintainable and predictable. The end-goal is shipping as little CSS as possible—leaning heavily into progressive enhancement and modern techniques. I hope by the end of the article, it’ll help you to re-think how maybe you write CSS in the future.

    What is CUBE CSS?

    CUBE stands for Composition Utility Block Exception, and CSS stands for, y’know, CSS (Cascading Style Sheets). As mentioned before, the CUBE methodology is very much an extension of good ol’ CSS, rather than a reinvention. This mantra is very seriously maintained too, as the cascade and inheritance particularity play a big role.

    This isn’t a heavily documented, complex methodology. Well, not now, anyway. It’s more of a concept method of organising CSS just enough to not pull to far away from the “classic” way of writing it. Really, it’s more of a thinking structure.

    I’ve been all the way down the micro-optimisation rabbit hole and been down the “let’s build a library of skeletal components for all projects” (this almost never brings any benefit). On the opposite end of the scale, I’ve done all globals with direct HTML tag styling, too. Any method is extremely valid for your context and if this is how you write your CSS, keep doing what works for you and your team. All I would recommend is keeping other team’s contexts and caveats in mind before you recommend your way as absolute.

    #BEM_alternative

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 9/06/2020

      #intégration #web #html #css #méthodologie

      2-3 trucs que j’ai trouvé intéressant :
      – séparer la notion de composition (layout quoi), cela dit il ne donne aucun exemple de code et de comment l’appliquer, et au final pour moi c’est un peu comme un « module »/block particulier, dont on ne connait pas les éléments intérieurs (BEM permet sans aucun problème d’avoir des blocks dans des blocks, donc par exemple avoir un block « card » dans un block « colonnes_3 » …)
      – le fait de ranger les classes CSS dans le HTML lui-même, à la fois dans un ordre logique ET le plus important avec un séparateur, qui sera parfaitement ignoré par HTML (je trouve ça pas mal avec juste pipe | c’est léger et ça fait bien le job)
      – le fait de mettre les variantes dans des data- du HTML… ce qui les rend plus facile d’accès au JS aussi… bon j’ai trouvé ça intéressant mais ça reste à voir, si vraiment utile par rapport à des classes de variante en plus…

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 23/05/2020
    1
    @jeanmarie
    1

    Image Techniques On The Web
    ▻https://ishadeed.com/article/image-techniques

    Manipulations avancées pour la gestion des images dans les pages web :
    – balises <img> et <picture>,
    – attributs HTML height, width, alt et srcset
    – propriétés CSS object-fit et object-position (dément !),
    – embed de balise <img> dans une balise <svg> pour pouvoir jouer avec la propriété CSS preserveAspectRatio, lui associer un <title> et une <desc>
    – intégration d’images SVG et utilisation de balises mask
    – exemples d’utilisation d’un div avec border pour emballer une image et la faire ressortir si ton sur ton

    #image #web_dev #css #svg #img #picture

    cy_altern @cy_altern CC BY-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 23/05/2020
    1
    @arno
    1

    Masonry Layout Demo 1
    ▻https://codepen.io/jensimmons/full/QWjqbJj

    POC par Mozilla d’une implémentation « 0 javascript / 100% CSS » pour l’organisation de blocs HTML de type « Masonry »
    Le rendu attendu

    https://pic.infini.fr/8UPBT8jr/YfuMQs1E.jpg
    , nécessite Firefox Nightly + about:config adapté :

    The CSS Working Group is currently pursuing a way to do this in 100% CSS. Mozilla is proposing one way to do this — and has implemented the idea, so that people can try it out and see what they think. This works in April/May 2020.
    You can try it in Firefox Nightly. Type about:config in the URL bar. Then search for “masonry”. And set layout.css.grid-template-masonry-value.enabled to true.
    This is an experimental implementation — being discussed as a possible CSS specification. It is NOT yet official, and likely will change.

    Voir aussi une solution « pur CSS » OK avec les navigateurs actuels : ►https://tobiasahlin.com/blog/masonry-with-css

    #masonry #0_javascript #css #firefox #poc

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 25/04/2020

    Dark mode
    ▻https://blog.smarchal.com/dark-mode

    Dark-mode : media-query CSS et matchMedia JS pour prefers-color-scheme

    #css #dark-mode #media_query #matchMedia

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @monolecte
    Agnès Maillard @monolecte CC BY-NC-SA 25/04/2020
    1
    @cy_altern
    1

    #CSS for internationalisation
    ▻https://www.chenhuijing.com/blog/css-for-i18n

    https://www.chenhuijing.com/assets/images/posts/css-i18n.jpg

    I’ve come across people who do not think that CSS is related to internationalisation at all, but if you think about it, internationalisation is more than translating the content on your site into multiple languages and calling it a day. There are various nuances to the presentation of that content which affect the experience of a native speaker using your site.

    Agnès Maillard @monolecte CC BY-NC-SA
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 25/04/2020

      exemple d’attribut lang dans les balises et pseudo-classe CSS :lang() :

      <p>We use <em>italics</em> to emphasise words in English, <span lang="zh">但是中文则是用<em>着重号</em></span>.</p>

      et la CSS qui va avec :
      em:lang(zh) {
       font-style: normal;
       text-emphasis: dot;
      }

      également des exemples de la propriété CSS writing-mode

      #css #lang #internationalisation

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 3/02/2020
    1
    @monolecte
    1

    Seven different types of #CSS #attribute #selectors

    // This attribute exists on the element
    [value]

    // This attribute has a specific value of cool
    [value='cool']

    // This attribute value contains the word cool somewhere in it
    [value*='cool']

    // This attribute value contains the word cool in a space-separated list
    [value~='cool']

    // This attribute value starts with the word cool
    [value^='cool']

    // This attribute value starts with cool in a dash-separated list
    [value|='cool']

    // This attribute value ends with the word cool
    [value$='cool']

    via ▻https://gist.github.com/emmabostian/ed933bc7f9711acdc565f42f1b159407

    /* This attribute value has a specific value of cool or contains the word cool in a space-separated list */
    [value~='cool']

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 26/01/2020
    1
    @simplicissimus
    1

    On Switching from HEX & RGB to HSL
    ▻https://sarasoueidan.com/blog/hex-rgb-to-hsl

    When you define a #color in the #HSL format, you pick a color in the form of an angle between 0 and 360. Setting the saturation to 100% and the lightness to 50% you get the purest form of that color. Tweaking the color from there on becomes very intuitive.

    Using the color wheel to pick colors has many benefits. One of the main advantages of HSL is that creating color harmonies becomes a piece of cake.

    Complementary colors are located across from one another on the wheel. So if you start with a color and you want to get its complimentary one, all you need to do in #CSS is to add 180° to the value of the Hue.

    https://d33wubrfki0l68.cloudfront.net/4cbdc92627b6171a802d851a725c4f597e1cac8d/f51ca/images/color-harmonies-2.png

    There are many color harmonies (or schemes) as the image above shows. Similar to what we did above with the complimentary scheme, triadic color schemes can be created by adding (or subtracting) 120°. You can also create analogous color combinations with 30° separating the hues. You can also create monochromatic harmonies easily, with one main hue and then tweaking the lightness to get different tints and shades of that hue. The sky is the limit.

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @jeanmarie
    jeanmarie @jeanmarie CC BY-NC-SA 22/01/2020

    The CSS Cascade
    Or, How browsers resolve competing #CSS styles

    We style our websites using CSS, which stands for Cascading Style Sheets.
    But what does Cascading really mean?

    ▻https://wattenberger.com/blog/css-cascade

    https://pbs.twimg.com/tweet_video_thumb/EOzouwSWkAAiVlt.jpg

    #webdesign

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

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 6/01/2020
    3
    @tofulm
    @jeanmarie
    @b_b
    3

    How To Write Mobile-first CSS | Zell Liew
    ▻https://zellwk.com/blog/how-to-write-mobile-first-css

    Présentation avec exemples des règles de la construction « mobile-first » des feuilles de style CSS.

    #mobile-first #css

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 13/12/2019
    3
    @tofulm
    @jeanmarie
    @severo
    3

    Responsive Images : comprendre srcset et sizes - Alsacreations
    ▻https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

    Images responsives : les attributs srcset et size de la balise <img> pour utilisation de multiples source et taille pour une image
    Voir aussi : ▻https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web

    #srcset #size #img #image #responsive #adaptive_image #HTML5 #CSS

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @monolecte
    Agnès Maillard @monolecte CC BY-NC-SA 8/11/2019

    ITCSS: Scalable and Maintainable #CSS Architecture - Xfive
    ▻https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture

    https://www.xfive.co/wp-content/uploads/2016/02/itcss2.jpg

    ITCSS stands for Inverted Triangle CSS and it helps you to organize your project CSS files in such a way that you can better deal with (not always easy-to-deal with) CSS specifics like global namespace, cascade and selectors specificity.

    ITCSS can be used with preprocessors or without them and is compatible with CSS methodologies like BEM, SMACSS or OOCSS.

    One of the key principles of ITCSS is that it separates your CSS codebase to several sections (called layers), which take the form of the inverted triangle

    #webdesign

    Agnès Maillard @monolecte CC BY-NC-SA
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 25/10/2019

    In Defense of Utility-First #CSS | frontstuff
    ▻https://frontstuff.io/in-defense-of-utility-first-css

    From a file size standpoint, you shouldn’t worry about repeated class names in the HTML. That’s what Gzip is for. The deflate algorithm was specifically made to handle duplicate strings, so there’s no point in trimming away characters in your HTML. The resulting file size will make little to no difference whether you use a few or a lot of classes.

    On the other hand, the more a selector is repeated in a stylesheet, the more work your browser has to do to resolve all styles.

    HTML “bloat” doesn’t matter, but CSS does. The network and engine don’t care how many classes you have in your HTML, but the way you write your CSS counts.

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 25/10/2019

      Quelle horreur mais quelle horreur. Ces gens finiront dans les flammes de l’enfer après le jugement dernier.

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 14/10/2019
    3
    @spip
    @tofulm
    @monolecte
    3

    Bonnes pratiques en CSS : BEM et OOCSS - Alsacreations
    ▻https://www.alsacreations.com/article/lire/1641-Bonnes-pratiques-en-CSS--BEM-et-OOCSS.html

    Présentation de la méthode BEM pour le nommage et l’organisation des CSS.

    La convention de nommage « officielle » BEM : ▻https://en.bem.info/methodology/naming-convention

    Compléments à la méthode BEM : BEMIT : ▻https://www.bearstudio.fr/blog/bemit

    #BEM #BEMIT #SPIP #CSS #nommage #méthode

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @monolecte
    Agnès Maillard @monolecte CC BY-NC-SA 4/10/2019
    2
    @ericw
    @rastapopoulos
    2

    Tufte CSS
    https://edwardtufte.github.io/tufte-css

    Tufte #CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

    Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.

    If you see anything that Tufte CSS could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-css. Please note the contribution guidelines.

    Finally, a reminder about the goal of this project. The web is not print. Webpages are not books. Therefore, the goal of Tufte CSS is not to say “websites should look like this interpretation of Tufte’s books” but rather “here are some techniques Tufte developed that we’ve found useful in print; maybe you can find a way to make them useful on the web”. Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal, because any project should present their information as best suits their particular circumstances.

    #webdesign #typographie

    Agnès Maillard @monolecte CC BY-NC-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 23/09/2019

    Top 10 most deadly CSS mistakes made by new and experienced developers - Painless CSS
    ▻https://www.painlesscss.com/top-10-css-mistakes.html

    #css #erreur #bonnes_pratiques

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 17/09/2019
    8
    @arno
    @cy_altern
    @rastapopoulos
    @mukt
    @biggrizzly
    @7h36
    @jeanmarie
    @tofulm
    8

    Can I email… Support tables for #HTML and #CSS in #emails
    ▻https://www.caniemail.com

    https://www.caniemail.com/assets/images/og.png

    A site that offers support info on more than 50 HTML and CSS features tested across 25 email clients.

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 17/09/2019

      #intégration

      RastaPopoulos @rastapopoulos CC BY-NC
    É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

0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 925

Thèmes liés

  • #css
  • #intégration
  • #html
  • #web
  • #grid
  • #javascript
  • technology: html
  • #layout
  • #responsive
  • #web-development
  • #html
  • #webdesign
  • #print
  • #impression
  • #web_design
  • technology: html
  • #spip
  • #flexbox
  • #css3
  • programminglanguage: html
  • #css-grid
  • #javascript
  • #front-end-development
  • #javascript
  • #masonry
  • #interface
  • company: safari
  • #développement
  • #gulp
  • #édition
  • #bem
  • #web-design
  • organization: freemasonry
  • programminglanguage: javascript
  • #sass
  • technology: dom
  • person: do
  • #pdf
  • #ui
  • #react