RDW

RDW = Responsive Web design

art direction et l’élément picture

Portrait de Jenny
Soumis par Jenny le 14 avr 2015 - 15:47

‘art direction’ = changement des proportions, recadrage, voire remplacement de toute l’image.
Vers la démo http://responsiveimages.org/demos/

Source : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img#Attributs

attribut srcset - HTML5

Portrait de Jenny
Soumis par Jenny le 14 avr 2015 - 13:44

L'attribut srcset est spécifique à HTML5 : liste de chaînes de caractère qui indiquent les images possibles en fonction de l'agent utilisé (URL image, largeur de la fenêtre et densité de pixel).

Liens externes directs: html.spec.whatwg.org ; sur le w3.org ; mozilla.org

Notes Livre "Responsive Theming for Drupal"

Portrait de Jenny
Soumis par Jenny le 23 mar 2015 - 15:24

Tags:

Source : "Responsive Theming for Drupal" by Mike Crittenden (O’Reilly). Copyright 2014 Mike Crittenden, 978-1-449-37331-3.
 http://oreil.ly/responsive-drupal

responsive web design (RWD). Zen, Omega, & Aurora

 

bootstrap: un thème de base pour drupal 7

Portrait de Jenny
Soumis par Jenny le 29 déc 2014 - 10:35

Tags:

https://www.drupal.org/project/bootstrap et doc à https://www.drupal.org/node/1976938 et http://drupal-bootstrap.org

Requiert JQuery (via le module jQuery Update ).  Pour  Bootstrap 3 (7.x-3.x): jQuery - 1.9.0+

Fichier attachéTaille
Plain text icon settings.txt8.46 Ko

RWD - les objets orientés css

Portrait de Jenny
Soumis par Jenny le 6 déc 2014 - 19:26

Tags:

source http://thesassway.com/intermediate/using-object-oriented-css-with-sass

Les objets

motif visuel, qu'on peux résumer en un extrait indépendant de code HTML, CSS et js éventuellement.

Comment organiser le code CSS? en utilisant les objets et ces 2 principes:

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

Responsive Web Design (RWD) - Gestion des images fluide

Portrait de Jenny
Soumis par Jenny le 6 déc 2014 - 13:54

Tags:

Source http://thesassway.com/intermediate/responsive-web-design-part-1

Les images s'ajustent en fonction de leur container avec RWD.

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

Responsive layout

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

Tags:

Compass utilise le langage de feuille de style sass. Plus sur sass http://sass-lang.com/guide
RWD (Responsive web design) https://www.drupal.org/node/1388492

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.

Pages

S'abonner à RSS - RDW