TD Intégration CSS. Méthodologie et outils. TD Intégration CSS Méthodologie & Outils

Transcription

1 TD Intégration CSS Méthodologie et outils 1 Intégration layout / article 2 Optimisation projet ave LESS et gestion des tâches automatisées 3 Intégration avec un framework CSS 4 Utilisation jquery / jquery UI 4.1 Manipuler du contenu 4.2 Gestion d une modal dialog 1

2 1 - Intégration layout / article Réaliser l intégration en HTML5/CSS de ce mockup from scratch (à partir d une feuille blanche). La largeur du gabarit est de 980px centrer dans le navigateur. Rendre ce gabarit adaptable sur 2 niveaux : Pour les écrans ayant une taille inférieure à 980px, la colonne de droite contenant les tweets et les amis Facebook se retrouve en dessous du contenu et est colonné (à gauche les tweets et à droite la liste d amis facebook). Le contenu prend toute la largeur de l affichage disponible. Pour les écrans ayant une résolution inférieure à 480px, tous les blocs doivent se retrouver les uns au dessus des autres (de même pour les blocs pied de pages). Faire les ajustements nécessaires afin de rendre lisible toutes les informati 2

3 3

4 2 - Réorganisation du projet avec LESS et tâches automatisées En reprenant la correction de l exercice 1 ( mobile first méthodologie, réorganiser, optimiser / rationaliser la partie CSS de votre intégration. Installer l environnement (nodejs / Gulp) Vérifier que nodejs est disponible sur votre machine : node -v Installer gulp et les plugins nécessaires via package.json { "name": "gulptd", "version": "1.0.0", "description": "TD Gulp initiation", "main": "index.html", "devdependencies": { "gulp": "latest", "gulp-concat": "latest", "gulp-less": "latest", "gulp-minify-css": "latest" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } npm install Créer une première tâche Gulp (gulpfile.js) qui va compilé tous les fichier LESS se trouvant dans le répertoire assets/less/*.less var gulp = require('gulp'); var less = require('gulp-less'); gulp.task('less', function(){ return gulp.src('assets/less/*.less').pipe(less()).pipe(gulp.dest('dist')); }); Ce script permet d initialiser, n est pas pas réellement fonctionnel... 4

5 Organiser son projet LESS 1. Préparer votre projet à être versionné avec Git (ne versionner que ce qui est essentiel) 2. En fonction la feuille de style main.css, splitter, nommer, organiser de manière logique en fichier ayant une fonction. (import) 3. Rendre dynamique les valeurs des breakpoints (variable) 4. Réécrire la définition du style d article (nesting) 5. Créer un fichier qui définit la taille des Hx en partant de 26px et décrémentant de 2 à chaque étape. (arithmétique) 6. Créer une fonction qui permet de déstyliser une <ul> (pas de margin left / sans puces) mixins. Il faut importer qu une seule feuille de style main.min.css dans la maquette HTML 5

6 3 - Intégration avec un framework CSS En utitisant, le framework CSS Bootstratp réaliser l intégration suivante. Le gabarit est en fluide. Utiliser les outils de façon à rendre ce gabarit adaptable en fonction de la résolution de l écan du client. 6

7 4 - Utilisation jquery / jquery UI Manipuler du contenu Au clique sur lire la suite cela ouvre une boîte en dessous avec la suite de l article. 7

8 4.2 - Gestion d une modal dialog Avec l aide librairie jquery UI, crééer le comportement suivant : Au clique sur le bouton / lien se connecter apparaît une boite de dialogue permettant de se connecter A la validation, remplacer le bouton se connecter par connecté en tant que {username} Utiliser les CDN de jquery (Content Delivery Network) afin d insérer vos scripts... Existe t il une solution en HTML5? (Observer la feuille de style) elements.html#the dialog element 8

9 ********************************************Highlighter Values******************************************** <<<<<Default Set>>>>> " shell " : " #ff0000 " *************************************Do not modify this block of text************************************* 9