Archives du mot-clé CSS

Outils CSS3 – HTML5 – JavaScript : Episode 9

Au menu, des liens, des outils, des présentations … sur HTML, CSS et JavaScript.

Talks

Voici quelques présentations que j’ai beaucoup appréciées :

HTML

CSS

  • Pure : Un framework CSS (gère le responsive)
  • Responsive Web Design
  • PlentyofFrameworks : trouver le framework CSS qui vous convient
  • Enjoycss : éditeur de composant CSS
  • CSSShake : Une feuille de style pour secouez vos éléments
  • Style Guide guide : site regroupant des générateurs de style guide (guide d’utilisation de vos style (un exemple))
  • CSS Values : permet de rechercher une propriété CSS pour facilement connaître son utilisation et les valeurs possibles
  • Bounce.js : un générateur d’animation CSS 3
  • CSS Stats : Statistique concernant CSS (nb de sélecteurs, couleurs, …) d’un site
  • Critical Path CSS Generator : Générateur de Critical Path. Critical Path est une technique qui consiste à injecter, directement dans votre code HTML(inline, dans le header) le code CSS minimal afin d’accélérer la vitesse de rendu de votre page. Le reste du code CSS est à charger via des fichiers CSS classique en fin de page. Cet outils permet d’extraire le code CSS à injecter en fonction d’une page.
  • Flexplorer : un générateur et outils de test de flexbox
  • une cheatsheet sur la propriété flexbox en css3

JavaScript

Divers

Outils CSS3 – HTML5 – JavaScript : Episode 8

Html

  • Une liste d’articles sur l’utilisation d’Emmet(part 1, 2, 3 et 4) (mon article de présentation d’Emmet qui s’appelait à l’époque Zen coding) Toujours sur le même sujet, une cheat sheet de emmet assez complète.
  • Un article qui présente l’api de vibration
  • Responsinator : Permet de visualiser le rendu d’un site en mode responsive sur différents terminaux (iPhone 3/4, iPhone 5, iPad, Android, …) en portrait et paysage. Un exemple avec mon site.

CSS

  • Spinkit : Animations d’attente en CSS3
  • Myth : Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s like a CSS polyfill.
  • CSS Zen Garden : La nouvelle version HTML5 Zen Garden.
  • lesshat.com : collection de mixins less
  • extractCSS : permet d’extraire les styles inlines d’un code HTML
  • Stitches : un générateur de Sprites
  • CSS Animate : Outil de génération d’animations CSS

JavaScript

Divers

Outils CSS3 – HTML5 – JavaScript : Episode 7

L’épisode 7 des outils liés aux technologies du web …

JavaScript

  • Une liste de plugins essentiels JQuery
  • jsdb.io : Un site qui répertorie les librairies JavaScript regroupés par thèmes avec recherche.
  • SnapSvg : une librairie pour gérer du SVG. Créée par Adobe (qui s’y connaît en vectoriel) en open-source, un des principaux développeurs est le concepteur de la librairie Raphael.js, une autre librairie qui permet de gérer du SVG.
  • Un article concernant la détection et l’avertissement lors d’une déconnexion d’un utilisateur
  • Normes de codage JS de airbnb (le site de réservation d’appartement entre particuliers)

CSS

  • Topcoat : une librairie CSS par adobe
  • Create CSS3 : Un générateur de règles CSS (assez complet, support des préfixes)
  • Koala : Une interface pour générer du CSS à partir de  LESS/SASS/Compass et du JavaScript à partir de CoffeeScript. Compatible Windows, Linux et Mac

HTML

  • Un très bon article sur sitepoint.com concernant la géolocalisation.
  • Real favicon generator : générateur de favicon (image représentant un site. Permet de générer également des icons pour Win 8, tablettes (iOS, Android, Windows Phone).
  • Ionicons : la police d’icône du framework ionic, pour créer des applications mobile en HTML5.
  • Runnable.com : permet de rechercher du code et de le tester (compatible avec pas mal de technos web (PHP, .NET, Ruby, NodeJs, …)
  • Une très bonne présentation (en anglais) sur l’automatisation de la partie front d’un projet
  • Un très bon article sur le Responsible Web design avec une boite à outils

Outils CSS3 – HTML5 – JavaScript : Episode 6

Une petite liste d’outils/librairies/… pour les développeurs web trouvés ici et là …

JavaScript

CSS

  • CSS3 Flexible Box Layout Explorer : Comprendre le layout flexbox de CSS3
  • Preboot : une collection de fonctions utiles (mixins, variables) pour less
  • CSS3 Click Chart : Exemple d’utilisation des propriétés CSS3
  • Stylify Me : Affichez facilement les couleurs, police, dimensions d’un site web.
  • Tridiv : Un éditeur CSS pour créer des formes 3D
  • CSSLisible : CSSLisible va réindenter vos blocks de code, ordonner vos propriétés, afin de fournir un code CSS Lisible et plus maintenable. Attention, les commentaires internes aux sélecteurs sont retirés !

HTML

Tout ce qu’il faut savoir les favicons

Font

Fontello : Un Générateur de police d’icône.

Divers

Une liste de points à vérifier lors de vos développements web :

DevDocs : un site regroupant la documentation pour HTML/CSS/JavaScript/DOM/JQuery/… bien fait avec la compatibilité par navigateur.

CSS : Tuile Responsive

J’ai dans un article précedent parler de responsive design afin d’adapter un site en fonction des devices des visiteurs. Nous allons voir comment faire des tuiles responsive.
Nous allons repartir de l’exemple d’un article précédent montrant comment tronquer du texte en CSS. L’exemple montrait des tuiles carrées. Nous allons adpater le design pour avoir des tuiles rectangulaire si la largeur est inférieure à 480px.

Une tuile est définie par un titre, une description et une image.
Le code html d’une tuile est le suivant :

<li>
<a class="tile" title="Partager avec un Ami" href="#">
<h1>Partager avec un Ami</h1>
<img src="share.png" alt="">
<p>Partager sur Twitter, Facebook, ...</p>
</a>
</li>

Voici le code CSS qui permet d’afficher les tuiles sous formes d’un carré.

div#home[role="main"] ul#tiles-panel li {
	display: inline-block;
	list-style: none outside none;
	margin: 0 8px 8px 0;
	vertical-align: top;
}

.tile {
	-moz-box-sizing: border-box;
	background: none repeat scroll 0 0 #F0F1F4;
	border-bottom: 3px solid #7B4F9D;
	display: inline-block;
	height: 176px;
	text-decoration: none;
	vertical-align: top;
	width: 176px;
}

.tile h1 {
	color: #253340;
	display: block;
	font-family: "Segoe UI",Segoe,"Trebuchet MS",Tahoma,Geneva,sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 148%;
	margin: 0;
	padding: 10px;
	text-decoration: none;
	white-space: nowrap;
	text-overflow : ellipsis;
	overflow : hidden;
	text-align : center;
}

.tile img {
	left: 50%;
	margin: 5px 0 10px -25px;
	position: relative;
}

.tile p {
	color: #6A747E;
	font-family: "Segoe UI",Segoe,"Trebuchet MS",Tahoma,Geneva,sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 148%;
	margin: 0;
	padding: 0 10px;
	text-align: center;
}

Voici la démo de cet écran sans adaptation.

On peut voir qu’avec un petit écran, cet affichage n’est pas du tout adapté. Nous allons le modifier afin d’optimiser l’affichage sur les petites résolutions. Pour cela, nous allons :

  • afficher les tuiles sous formes rectangulaires les unes à la suite des autres
  • réduire l’image et la placer à la gauche de la tuile

Voici le code qui permet d’adapter le résultat pour une utilisation pour petits écrans avec l’utilisation d’une média queries ciblant les écrans ayant une largeur maximum de 480px :

@media only screen and (max-width: 480px) {
    h1 {
	font-size : 24px;    
    }
	
    div[role=main]#home   ul#tiles-panel  li {
	display: block; /*passage en block pour affichage les uns en dessous des autres */
	position : relative;        
    }
	
    /*Tiles*/
    ul {
        padding : 0;   
    }
    
    .tile {
        width : 100%;
        height : 55px;    
        display : block;
        border-bottom : 0px;
        border-left: 3px solid #7B4F9D;
    }
	
    .tile  h1 {
        padding : 0;    
    }

    .tile  h1, .tile p {
        margin-left : 50px;    
    }
	
    .tile img {
        position: absolute;
        top : 5px;
        left : 5px;
        width : 45px;
        height : 45px;
        margin : 0 1px; 
    }
}

Et voici le résultat avant/après (utilisation de la vue adaptative de Firefox pour tester) :

Tuile non Responsive

Tuile Responsive

La page de démo

Dans cet exemple, j’utilise les mêmes images pour les 2 versions alors qu’il serait mieux d’avoir des images adaptées en fonction de la résolution, ce qu’on appelle responsive images. Il faut savoir qu’il sera bientôt possible de définir plusieurs sources d’image afin de gérer ce cas (via l’attribut srcset de la balise image ou via l’élément picture) et qu’il existe déjà des polyfills comme srcset-polyfill. Pour en savoir plus, je vous conseille responsiveimages.org.

Firefox/Chrome : Forcer l’état d’un élément

Les navigateurs modernes possèdent aujourd’hui des outils pour développeurs très puissant que ça soit pour le HTML, CSS, JavaScript, profiling, … En CSS, la possibilité d’éditer les styles en « live » est très pratique mais peut s’avérer complexe dans certains cas comme la gestion des états (hover, focus, …). Voyons comment debugger plus facilement ce cas avec les consoles web de Chrome, Firefox et Firefug (extension pour Firefox bien connue des développeurs web). (Je n’ai pas trouver comment faire sous IE et n’utilise pas d’autres navigateurs comme Opera ou Safari …)

En effet il est possible de forcer un état sur un élément avec ces outils, ce qui est très pratique notamment pour l’état :hover (survol d’un élément).

Chrome

Il faut faire un clic droit sur l’élément dans l’inspecteur d’élément (Onglet Elements dans la barre d’outils développeur. F12 pour l’ouvrir) et choisir l’état dans le menu Force element state.

Les états gérés sont :

  • active
  • hover
  • focus
  • visited

Forcer un état sous Chrome

Firefox

Sous Firefox, cela fonctionne de la même façon que sous Chrome à la seule différence que l’état visited n’est pas disponible.

Forcer un état sous Firefox

Firebug

Avec Firebug, l’activation est un peu plus difficile à trouver. Une fois l’élément sélectionné dans l’explorateur HTML, il faut cliquer sur la flèche de l’onglet Style pour pouvoir activer l’état voulu. Firebug ne gère que les états :hover, :active et :focus comme Firefox.

Forcer un état avec Firebug

CSS : Tronquer du texte

Voici une petite astuce afin de tronquer un texte en CSS si celui-ci dépasse de son conteneur.

Voici le code CSS qui permet d’effectuer cet « effet » qui est très bien supportée même sous IE ;).

h1 {
    white-space : nowrap; //permet de forcer le non retour à la ligne
    overflow : hidden; //permet de masquer si ça dépasse
    text-overflow : ellipsis; //permet de rajouter ... si ça dépasse
}

Une petite démo avec des boites style Modern UI (Windows 8).

Texte tronqué

Références

Ressources et Outils pour Twitter Bootstrap

J’ai déjà évoqué rapidement dans un précédent article sur les outils CSS3, HTML et JavaScript, Twitter BootStrap, boite à outils/template/Framework pour HTML/CSS/JavaScript permettant de démarrer un projet rapidement. Il inclut de base une feuille de style riche ainsi que des composants d’interface vous permettant de designer un site rapidement.

Voici quelques ressources/outils concernant Bootstrap que j’ai pu trouver sur le net :

Outils CSS3 – HTML5 – JavaScript : Episode 5

Divers

  • overapi.com : une liste de cheatsheet pour pratiquement chaque technos/librairies …enfin presque
  • The Code Player est un site qui permet d’apprendre des techniques HTML5/CSS/JavaScript en vidéo interactives. Le code apparaît en live à gauche et la partie droite affiche le résultat de ce code.
  • Ressource Modern UI : Une liste de ressources concernant l’interface Modern UI de Windows 8.

JavaScript

  • FooTable : un plugin JQuery qui permet des tableaux responsives pour gérer l’affichage sur des téléphones, tablettes et desktop.
  • JQuery Enable Disable Plugin : Un plugin qui permet d’activer / désactiver des éléments de formulaire en fonction d’un autre élément (case à cocher, radio bouton ou listbox)
  • cdnjs.com : Un CDN avec une liste impressionnante de librairies disponibles
  • multiselect : Une librairie qui permet de transformer un select multiple en 2 listes
  • JSLint errors ou JSHintErrors pour avoir les explications concernant une erreur JSLint ou JSHint (validateur de code JavaScript).

CSS

Outils CSS3 – HTML5 – JavaScript : Episode 4

HTML

Savez-vous qu’il est possible d’utiliser des caractères Unicode en tant qu’icône. Voici un tableau des différentes Icones web Unicode.

CSS

Les sélecteurs CSS

On retient souvent dans les nouveautés CSS3 ce qui concerne l’affichage (transformation, gradients, …) mais de nouveaux sélecteurs puissants ont également été introduits (:nth-child(expression), :contains(value), :checked, …). Voici un article qui explique les différents sélecteurs en CSS3 et une librairie selectivizr qui permet de supporter ces sélecteurs dans IE de la version 6 à 8.

Framework CSS

  • KNACSS : développé par Alsacréations
  • Ratchet : Un framework dédié au mobile. Idéal pour du prototypage.

Outils CSS

Divers

2 articles sur Smashing Magazine concernant des techniques JS/CSS qui peuvent s’avérer utiles (le premier et le deuxième). Voici 2 techniques/outils qui ont retenus mon attention :

JavaScript

Fuites Mémoires

Google a sorti Leak Finder un outil JavaScript open source pour trouver les fuites de mémoire dans vos applications

Framework MVC

TodoMVC : comparateur de framework JS MV*(M ou VM). Une application de gestion de tache (todo list) est implémentée avec différents framework (angular, ember, blackbone, knockout, …). A vous de choisir en fonction du type de la philosophie à adopter pour votre projet; Cela permet de comparer le code et d’avoir des bonnes pratiques pour débuter.

LINQ Pour JavaScript

Ceux qui travaillent dans le monde .NET doivent probablement connaitre LINQ qui est une technologie qui permet de requéter des sources de données hétérogène (base de donnée, objet, fichier XML, …). Il existe plusieurs librairies JavaScript qui permette d’effectuer des requêtes LINQ sur des objets JSON :

Librairies

Quelques librairies qui peuvent s’avérer pratique :

Jster : Catalogue de librairie JavaScript (plus de 750 à l’heure actuelle)

Mobilité

10 outils pour le Web mobile sur Alsacreations