css 3

spécifique à CSS 3 (normes, thèmes dupal 7...)

De l'importance de !important

Portrait de Jenny
Soumis par Jenny le 18 sep 2015 - 21:51

Ex mise en forme pour iXe

Description de la conf en place et du soucis de mise en forme

Thème: zen_x (sur zen 5.5), avec modules views_slideshow (7.x-3.1 + views_slideshow_cycle) et adaptive_image 7.x-1.4, type de contenu créé "slide_show" (on n'affiche que body et field_imgslide affichée avec  "Style d'image : slide_show").

clearfix : forcer un bloc à respecter ses enfants

Portrait de Jenny
Soumis par Jenny le 13 sep 2015 - 19:44

sur clearfix = “float containment” cf http://fuseinteractive.ca/blog/understanding-humble-clearfix

La hauteur du parent n'etant pas visible par les enfants, il est possible que (contenus en flux insuffisant pour remplir) un conteneur d'élément flottant puisse être plus petite que le contenu flotté (marges, frontières... peuvent ne pas se comporter comme nous le voulons).

Sélecteurs avancés Css 3

Portrait de Jenny
Soumis par Jenny le 15 aoû 2015 - 10:02

la base

sélecteur universel (toutes les balises sans exception)  * { }

nivo_slider

Portrait de Jenny
Soumis par Jenny le 3 aoû 2015 - 19:36

https://www.drupal.org/project/nivo_slider et doc

Il faut installer la librairie en sites/all/libraries/nivo-slider, Libraries API - 2.x et jQuery Update (1.7+). A 3 modules liés.

RWD - % placeholder selectors et @extend

Portrait de Jenny
Soumis par Jenny le 6 déc 2014 - 15:27

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

Sass et compass: syntaxe et ex

Portrait de Jenny
Soumis par Jenny le 6 déc 2014 - 09:10

Tags:

Ex de code sass/compass (et css générées)

Ex variables.
Ex nesting selectors pour éviter les répétitions. + Notions de contexte (2 nivo), objets (identifié par class ou id, 4 nivo max, en général on travaille en 2-3) et états d'interaction (avec objects) - et leurs niveaux de profondeur respectifs.
Ex de Mixins, pour utiliser des bouts entier de code. Ex mixin border-radius

Utiliser: compass clean et compass watch

outils online: http://www.responsinator.com/ et sa faq  ; http://compass-style.org/ et http://compass-style.org/help/tutorials/spriting/ ;

Media Queries

Portrait de Jenny
Soumis par Jenny le 5 déc 2014 - 12:36

Tags:

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);

Zen 7x-5.5

Portrait de Jenny
Soumis par Jenny le 5 déc 2014 - 11:35

Tags:

Update : depuis le 1er décembre, la version officielle pour dupal 7 est Zen 7.x-5.6. Pas de maj de la db à faire (update.php). Ne pas oublier de copier les modifs faites sur starterkit.

Zen 7x-5.5 a shiv HTML 5 inclus et responsive. Avec Fences (qui semble peu maintenu) il est plus facile de thémer les champs Fields et avoir du HTML 5 sémantique.

Drupal for firebug

Portrait de Jenny
Soumis par Jenny le 23 mai 2014 - 14:16

Tags:

Pour utilisation de la partie "drupal" du plugin de Firefox (ou celui de Chrome), il faut installer ce module sur le site drupal.

Installer avec drush drush @sitet dl drupalforfirebug && drush @sitet en drupalforfirebug

Les 2 perms, Access et Execute Firebug PHP sont à admin/people/permissions#module-drupalforfirebug

Pages

S'abonner à RSS - css 3