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

 
  • #s
  • #st
  • #style
RSS: #style_guide

#style_guide

  • #style_guide_css_salesforce_framework_clevermarks
  • #style_guide_itcss_kss_accessibility_css_design_clevermarks
  • @b_b
    b_b @b_b PUBLIC DOMAIN 20/09/2021
    2
    @rastapopoulos
    @ericw
    2

    “Welcome to the #W3C design system

    This #design_system documents the styles, components and templates available to use on your website.”

    ▻https://design-system.w3.org

    Étonnant que personne ne l’ait encore partagé, #style_guide #css et tout ça...

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 1/09/2016

    Pantsuit : The Hillary Clinton UI pattern library
    ▻https://medium.com/git-out-the-vote/pantsuit-the-hillary-clinton-ui-pattern-library-238e9bf06b54

    “Pantsuit is Hillary for America’s internal design system. Its primary goal is to serve as a single source of truth for the design and front-end teams. My job is to make sure the system is modular and flexible enough to be used in any number of unpredictable ways.”

    #style_guide_ITCSS_KSS_accessibility_CSS_design_clevermarks

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 16/05/2016

    Lightning Design System
    ▻https://www.lightningdesignsystem.com

    “With the Lightning Design System you can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles! Simply download our platform-agnostic CSS framework and get started today.”

    #style_guide_CSS_Salesforce_framework_clevermarks

    • #Salesforce
    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire
  • @fil
    Fil @fil 8/02/2014
    6
    @gblin
    @0gust1
    @nhoizey
    @vlentz
    @cy_altern
    6

    Getting Started With #Pattern_Libraries ∙ An A List Apart Blog Post
    ▻http://alistapart.com/blog/post/getting-started-with-pattern-libraries
    ▻http://patterns.alistapart.com

    #design #web

    • #Brad Frost
    Fil @fil
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 8/02/2014
      @nhoizey

      Même chose identifiée sous le nom de « style guide », recensé par @nhoizey il y a 2 mois :
      ►http://seenthis.net/messages/204620

      #style_guide ou #styleguide #qualité-web #bonnes-pratiques

      RastaPopoulos @rastapopoulos CC BY-NC
    • @0gust1
      0gust1 @0gust1 CC BY-NC 10/02/2014

      Il y a beaucoup d’intérêts ; d’avantages et de bénéfices à construire ce genre d’outils. Par contre, il faut également les maintenir...

      Je dois actuellement démarrer la génération d’un guide de style, je ne referais pas les mêmes erreurs qu’auparavant : il sera le plus possible généré automatiquement (grunt, fichiers en markdown). Faire un guide de style en HTML pur est bien trop coûteux à maintenir et rapidement source d’erreurs. Enfin, l’inclusion d’outils d’automatisation permet également de jouer des tests directement sur le guide de style (tests de unitaires, test d’intégration de composants ).

      0gust1 @0gust1 CC BY-NC
    • @0gust1
      0gust1 @0gust1 CC BY-NC 10/02/2014
      @tetue

      Il semble y avoir 2 manières populaires de commenter ses CSS / LESS / etc.. de manière à générer automatiquement une bibliothèque de motifs / un guide de style :
      – Styledocco : ▻http://jacobrask.github.io/styledocco
      – KSS : ▻https://github.com/kneath/kss

      J’ai essayé grunt-styleguide ( ▻https://github.com/indieisaconcept/grunt-styleguide ), que j’ai utilisé avec Styledocco. Honnêtement c’est vraiment vraiment sympa, voir même un peu magique (puisque styledocco fournit déjà des styles et templates pour le site généré de documentation).

      Et je trouve le formalisme styledocco vraiment lisible et agréable : on écrit ses sommentaires CSS en markdown et boum, voilà une super doc qui tient déjà la route.

      cc @tetue ?

      #grunt #bibliothèque_de_motifs

      0gust1 @0gust1 CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/02/2014

      Bon alors j’en profite, puisque tu commences à connaître Grunt et assimilés, et que tu connais SPIP, et que tu parles français.

      Donc : est-ce qu’on peut utiliser ce type d’outils dans un projet quelconque, pas du tout JS/Node/etc ? Par exemple, est-ce que je peux utiliser Grunt lorsque j’intègre un site SPIP, dans mes plugins-squelettes et mes plugins-thèmes (découpage Z) ? Et si oui comment ?

      RastaPopoulos @rastapopoulos CC BY-NC
    • @0gust1
      0gust1 @0gust1 CC BY-NC 11/02/2014

      Par exemple, est-ce que je peux utiliser Grunt lorsque j’intègre un site SPIP, dans mes plugins-squelettes et mes plugins-thèmes (découpage Z) ?

      Carrément, Grunt c’est juste un automatiseur de tâches, comme il est JS, et utilise node, il a des affinités avec cet écosystème, mais on peut s’en servir pour n’importe quoi.

      Ce qui est intéressant, c’est qu’une fois qu’on a compris comment ça marche, il y a très peu de choses à coder, à écrire. La plupart du temps ça se résume à un path d’entrée (avec du ’globbing’, comme dans zsh - « /repertoire//.js » = tous les fichiers js situés dans répertoire et les sous-répertoires), des options, et un path de sortie (si il y a écriture de fichiers).

      Par exemple, pour le guide de style dont je parle plus haut, j’ai juste ajouté ça dans mon « gruntfile » :

      styleguide : {
      options : {
      framework : {
      name : ’styledocco’
      },
      name : ’Guide de style de mon appli’
      /,template : {include : [’plugin.css’, ’app.js’]}/
      },
      doc_projet : {
      files : {
      ’projet/dossier/documentation/’ :’projet/dossier/css’
      }
      }

      et pour lancer la tâche : « grunt styleguide:doc_projet »

      Pour faire des squelettes, oui, je pense qu’il doit y avoir des choses intéressantes : optimisation des images, génération automatique de sprite, génération de webfonts, vérification et validation du code JS, concaténation, copie, compression de fichiers etc...

      Et si oui comment ?

      Je ne sais pas ;) , il y a tellement de plugins, de possibilités, que ça doit partir du besoin. Si vous me donnez des cas concrets, je pourrais en dire plus :)
      C’est quoi les trucs qui font braire lorsque tu fais des squelettes ou des thèmes ?

      Les grandes étapes :

      *Niveau Système :
      – installer node.js
      – installer l’interface cli de grunt ("npm install -g grunt-cli")

      Niveau Projet :
      – créér un fichier ’package.json’ à la raçine du projet (le dossier de ton squelette, je dirais) : soit à la main, en copiant collant un truc trouvé en ligne, soit en tapant « npm init ». Ce fichier contiendra les dépendances et la description de ton projet grunt.
      – installer grunt (et les plugins qui t’intéressent) : "npm install grunt —save-dev’. Le flag à la fin va dire à npm (node package manager) d’écrire la dépendance dans le fichier package.json.
      L’installation va créer un répertoire node_modules à coté du fichier package.json. La plupart du temps, il faut dire au gestionnaire de source d’ignorer ce répertoire.
      – créer un fichier Gruntfile.js (le plus simple est de recopier un exemple sur le site de grunt).
      – modifier le Gruntfile.js en fonction de ses besoins et du projet.

      Bref, l’automatisation d’un projet via grunt peut se résumer à 2 fichiers : le package.json et le Gruntfile.js. Sur la machine de quelqu’un qui a déjà node.js, il suffira juste de taper « npm install » dans le répertoire pour que toutes les dépendances, plugins et autres soient installés.

      Pour démarrer :
      ▻http://gruntjs.com/getting-started

      Les plugins :
      ▻http://gruntjs.com/plugins

      [edit : comment on fait pour mettre du code dans seenthis ? là mon exemple de path avec globbing casse tout...]

      0gust1 @0gust1 CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/02/2014

      Un article à ce sujet par ici : ▻http://mike.teczno.com/notes/being-a-client.html

      On y trouve un lien vers cette page : ▻http://codeforamerica.clearleft.com

      b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 18/02/2014

      À noter que le dernier lien utilise la même présentation que celui d’A List Apart.

      Ya ça aussi, un site où sont collectés tous les modèles et toutes les ressources de Brad Frost autour du #responsive :
      ▻http://bradfrost.github.io/this-is-responsive/patterns.html
      ▻http://bradfrost.github.io/this-is-responsive/resources.html

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 18/02/2014
      @0gust1

      Sinon pour @0gust1, sur SPIP/Grunt, je ne sais plus… :D

      En fait, le Less et le Scss, il y a des plugins qui les compilent magiquement en interne, côté serveur. Puis ensuite il y a déjà un plugin qui compresse tous les CSS et JS, côté serveur aussi. Du coup, il ne reste plus grand chose à faire en local…

      Du coup non, pour l’instant, je ne vois pas à quoi ça pourrait me servir. Mais à chaque fois que je vois un article ou une personne qui en parle, je me demande toujours si ça peut m’aider… :D

      RastaPopoulos @rastapopoulos CC BY-NC
    • @0gust1
      0gust1 @0gust1 CC BY-NC 18/02/2014
      @rastapopoulos

      @rastapopoulos : c’est vrai que grunt est souvent utilisé pour du build. Ce qui est aussi intéressant, ce sont les fonctions d’automatisation du workflow de dev :
      – grunt-contrib-watch, qui permet de « surveiller » un ensemble de fichiers et lancer automatiquement des traitements si changement (modification, ajout, suppression).
      – la génération de sprites et de webfonts d’icônes.
      – les outils de qualité de code (jshint).
      – les plugins d’upload automatique.

      Grâce à ça, c’est possible de gagner beaucoup de temps, et surtout de garder son fil de pensées, sa concentration quand on fait de la conception front : j’ai cote à cote mon éditeur et mon navigateur, et au moindre changement, je vois tout de suite le résultat.

      0gust1 @0gust1 CC BY-NC
    • @jeremyraffin
      JeremyRaffin @jeremyraffin 23/05/2014

      Je vous rejoins concernant le gain de temps avec Grunt concernant l’automatisation de taches, il faut prendre le temps de bien configurer ses taches et derrière ça roule !
      C’est super pratique d’avoir une version dev (avec livereload) sur laquelle travailler confortablement et pouvoir en une ligne de commande générer une version production avec toutes les optimisations nécessaires (compression images, minification, concaténation ...)

      Concernant les guides de styles j’utilise grunt-styleguide avec KSS comme framework et j’ai publié un article sur le sujet ▻https://medium.com/@JeremyRaffin/4abccdcbab29

      Ca permet de pouvoir rapidement générer un styleguide maintenable facilement.

      JeremyRaffin @jeremyraffin
    Écrire un commentaire
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 6/12/2013
    2
    @0gust1
    @rastapopoulos
    2

    Front-end and UI style guides
    ▻http://sideproject.io/front-end-and-ui-style-guides

    “This round-up focuses on how others are building CSS/UI style guides and some best practices. Specifically not grouping in pattern libraries in here (besides #MailChimp, which is surface-level patterns) to demonstrate the many uses of these documents.” Tags: #style_guide #Clearleft #Drupal #Github #Google MailChimp #Mozilla #Salesforce #Wordpress

    • #MailChimp
    Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 7/12/2013

      #bonnes-pratiques #best-practices #qualité #qualité-web

      RastaPopoulos @rastapopoulos CC BY-NC
    • @fil
      Fil @fil 8/02/2014

      voir aussi ▻http://seenthis.net/messages/225949

      Fil @fil
    Écrire un commentaire
  • @fchaix
    Fchaix @fchaix PUBLIC DOMAIN 13/11/2013

    Guidelines/#CSS-guidelines.md at master · dhoko/Guidelines
    ▻https://github.com/dhoko/Guidelines/blob/master/CSS-guidelines.md

    À garder sous le coude.(Permalink)

    #howto

    Fchaix @fchaix PUBLIC DOMAIN
    • @0gust1
      0gust1 @0gust1 CC BY-NC 13/11/2013

      Les préprocesseurs c’est bien très bien. Mais ceux-ci imposent certaines choses :

      Connaitre les CSS pour ne pas produire une CSS en carton
      Avoir un langage différent ( mais qui permet de faire des choses ultra puissantes )
      Compiler sa CSS
      Un debug un peu moins sympa
      Pour ceux qui ne s’en servent pas, entendre dans 80% des cas des arguments de front ne sachant pas ce qu’est le CSS, donc des arguments de merde.

      Je ne suis pas contre, mais ici on parle de CSS. Bilan : non.

      Et pan, je n’aurais su dire mieux !

      Très sympa comme document, un peu bordélique, mais très pédagogique ! Je vais l’envoyer à quelques personnes :)

      J’ai bien aimé aussi (peut être plus adapté à de gros projets) :
      ▻https://github.com/lunaweb/style-guide-css

      #css #style_guide #webdesign

      0gust1 @0gust1 CC BY-NC
    Écrire un commentaire

Thèmes liés

  • #css
  • #bonnes-pratiques
  • #qualité-web