theming

Theming, css...

Ubuntu: choix à l'ouverture de session - quel bureau ?

Lors de la connexion Ubuntu 18.04 (ouverture de session graphique via LightDM ou GDM), plusieurs choix sont proposés (suite à l'installation de GNOME Shell, ou suite à une mise à niveau depuis une version précédente).

Les styles de ckeditor

https://www.lullabot.com/articles/styling-the-wysiwyg-editor-in-drupal-8

Dans cet ex, le front (vu pas les surfeurs) est "Custom Theme", basé sur bootstrap avec ajout de polices, mais l'éditeur utilise le thème d'admin (du core) Seven, elle souhaite qu'ils soient plus semblables (pour ne pas dérouter l'éditeur).

Il y a 2 facons de modifier les styles dans l'éditeur WYSIWYG (utilisé par l'éditeur ou auteur du post) :

Les fichiers de thèmes drupal 8

Fichiers de base

THEMENAME.info.yml

  • Ne pas utiliser de tabulation - seulement des espaces
  • Propriétés et listes doivent etre indentées de deux (2) espaces.
name: Fluffiness
type: theme
description: 'A cuddly theme that offers extra fluffiness.'
core: 8.x
libraries:
  - fluffiness/global-styling
base theme: classy
regions:
  header: Header

Installer Node.js et npm

https://github.com/kss-node/kss-node/wiki/npm-quick-start-guide

npm est le manageur de paquet de Node.js (plateforme javascript). kss-node est écrit comme un utilitaire en ligne de commande node.js => requiert Node.js et ses commandes npm

All-in-One Sidebar (AiOS) : barre d'outils améliorée pour Firefox

All-in-One Sidebar (AiOS) est une extension pour Firefox, barre d'outils améliorée. Pour l'installer, ouvrir Firefox et http://firefox.exxile.net/aios/download.php?mode=install ou
Liste de copies d'écran à All-in-One Sidebar (AiOS)

Définitions google de mobile, tablettes, tel...

Vocabulaire Google pour les sites "mobile":

mobile fait référence aux smartphones, et non aux tablettes ou aux téléphones traditionnels => smartphones Android, iPhone ou Windows Phone (affichent une partie de HTML5).
Tablettes appareils à part (qd ils parlent de mobile, ils excluent en général les tablettes).
Téléphones multimédias : avec navigateur XHTML, HTML5 (basique) et js => en général téléphones 3G qui ne sont pas des smartphones
Téléphones traditionnels : cHTML (iMode), WML, XHTML-MP...

Fichier attachéTaille
PDF icon search-engine-optimization-starter-guide-fr.pdf7.64 Mo

RWD - % placeholder selectors et @extend

Source: http://thesassway.com/intermediate/understanding-placeholder-selectors

Sass fournit un certain nombre de façons différentes de partager le code entre les règles CSS: mixins (pour insérer de nouvelles propriétés et / ou des règles CSS dans votre CSS) et  @extend pour partager des propriétés CSS entre les sélecteurs.
Sass 3.2 introduit un nouveau concept appelé "espaces réservés" qui optimise la sortie CSS de la directive @extend

  • La directive @extend : par ex .error-icon et .info-icon héritent des propriétés de .icon
  • Les sélecteurs d'espaces réservés, commencent par % et n'apparaissent pas dans le css généré
  • Comparaison de @extend  et mixins (et css généré pour le meme exemple)
  • Les limites de @extend

Media Queries

Source: http://fr.slideshare.net/ucbdrupal/bdug-responsive-webtheming20120723

CSS3 étend les fonctions des requètes médias (media queries):

  • vérification des fonctions (d'un média particulier) comme largeur, hauteur et couleur (width, height, color)
  • styles sur mesure pour des devices

règle @import : par ex   @import url(style480min.css) screen and (min-width: 480px);

Pages

S'abonner à RSS - theming