Création d'une page d'accueil de style métropolitain avec le plugin JavaScript Isotope

Microsoft Windows 8 n’est peut-être pas une réussite en ce qui concerne l’expérience utilisateur, mais il a certainement introduit le monde avec un nouveau concept: Metro.

Depuis son apparition en 2012, il est devenu extrêmement populaire avec ses looks plats, simples et colorés. Dans cet article, nous allons voir comment nous pouvons créer la page d'accueil d'un blog avec le concept de design de Metro..

Comment définir le langage de design "Metro"?

Metro est le nom de code du dernier guide de style de Microsoft, ou "langage de conception". Bien que son approche simple et minimaliste ait été introduite dans certains logiciels de Microsoft (tels que Windows Phone 7 et Windows 8), les concepteurs Web et graphiques ont rapidement adopté et intégré leurs conceptions..

Il ne serait pas controversé de dire qu’avec les concepts de design de Google, Metro a aidé le World Wide Web à créer le design plat tendance.

Bien que Wikipedia définisse Metro comme "un langage de conception basé sur la typographie", on pourrait dire que c'est plus que cela. À mon avis, le style de métro présente trois caractéristiques caractéristiques importantes:

• Simplicité: Avec ses simples boîtes carrées et rectangulaires et l'utilisation appropriée des espaces blancs, la principale caractéristique de Metro est la simplicité. La plupart des concepteurs graphiques et web avaient déjà tendance à concevoir de manière simple, et l’ultra-minimalisme de Metro était rapidement pris au piège..
• Typographie: La typographie est devenue un élément essentiel de la conception Web, en particulier après 2010. (Au fait, je tiens les concepteurs suisses à part - ces gars-là le savaient depuis le début!) communautés, faire de Metro un succès.
• La couleur L'une des plus grandes réalisations de Metro, à mon avis, est l'utilisation de couleurs mates. La bande était agonisante avec des dégradés argent / chrome, des effets de verre et des couleurs excessivement vives; et lorsque Metro est arrivé, les communautés de concepteurs de sites Web ont rapidement adopté leurs couleurs calmes et «plates»..

Plus que ces fonctionnalités, Microsoft définit Metro avec cinq principes:

1. Fierté de l'artisanat
2. Rapide et fluide
3. Authentiquement numérique
4. Faire plus avec moins
5. Gagner comme un

Une petite note sur le nom "Metro": en raison de problèmes de copyright, Microsoft a dû remplacer le nom de ce langage de conception par "Microsoft Design Language" ou "Modern Design". Les applications sont appelées "Modern Apps" au lieu de "Metro Applications"; Cependant, le nom est resté entre les concepteurs. Cet article continuera à définir le langage de conception avec son nom de code "Metro", mais gardez à l'esprit que le langage de conception s'appelle officiellement Modern Design..

Présentation de Isotope: Un plugin JavaScript pour Dispositions Magiques

Pour réaliser une mise en page de style Metro dans un blog WordPress, nous allons utiliser un fantastique plugin JavaScript appelé Isotope. Les options de disposition du plugin vont nous aider à créer une page d'accueil Metro élégante et réactive. (Le plugin fonctionne aussi comme un plugin jQuery, mais nous allons utiliser le JavaScript vanille.)

Dans ce tutoriel, nous allons utiliser une version bêta d'Isotope - version 2.0.0-beta.8, pour être exact. C'est différent de la version un, mais il devrait se comporter de la même manière dans les versions stables de la version deux à l'avenir.

Le PHP et HTML

Si nous faisions un tutoriel HTML, je collerais le code suivant:

 
Un article sur l'isotope, peut-être?
 
WordPress est le meilleur!
 
Que penses-tu de moi?
 
À propos de l'événement olympique de Sotchi
 
Aidez-moi!
 
Je ne peux pas créer beaucoup de titres de post!
 
HTML5 Rocks, je le dis à Ya!
 
Quelqu'un se souvient de César 3?
 
J'aime la table.
 
J'aime la lampe.
 
Je ne fais pas toujours de démos sur CodePen… 
 
… Mais quand je le fais, ils sont simplement beaux!
 

Mais nous avons besoin de code WordPress! Voici comment nous le faisons dans WordPress:

Quelques notes sur le code:

• Remarquez le js-isotope la classe et la données-isotope-options attribut dans notre conteneur DIV. Celles-ci nous aident à lancer le plugin Isotope sans code JavaScript.
• Si vous souhaitez que l’un de vos articles se démarque, vous pouvez doubler sa largeur en ajoutant une méta-article avec la clé métro double et la valeur Oui.
• Vous pouvez ajouter plus de couleurs au tableau (et au code CSS). J'ai utilisé les couleurs que j'ai trouvées ici.

Le CSS

*, *: before, *: after -moz-box-sizing: border-box; -webkit-box-sizing: border-box; dimensionnement de la boîte: border-box; body background: #EEE; font- famille: Segoe UI, Arial, sans-serif; .container width: 50em; margin: 1em auto; padding: .1999em; .item width: 12em; hauteur: 12em; couleur de fond: blanc; float: left ; margin: .2em; background-size: cover; padding: 1em; .item-double width: 24.4em; .item-teal background-color: # 008299; .item-blue background-color: # 2672EC; .item-purple couleur de fond: # 8C0095; .item-darkpurple couleur de fond: # 5133AB; .item-rouge couleur de fond: # AC193D; .item-orange background- color: # D24726; .item-green background-color: # 008A00; .item-skyblue background-color: # 094AB2; .item-teal: survolez background-color: # 00A0B1; .item- bleu: survol couleur d'arrière-plan: # 2E8DEF;. élément-violet: survol une couleur d'arrière-plan: # A700AE;. élément-sombre pourpre: survol une couleur d'arrière-plan: # 643EBF;. élément-rouge: survol  -couleur: # BF1E4B;. élément-orange: survol couleur-fond: # DC572E;. élément-vert: survol colonne-fond ou: # 00A600; .item-skyblue: survol background-color: # 0A5BC4; .item a, .item .not-found color: #FFF; taille de la police: 2em; hauteur de la ligne: 1.3; texte -décoration: aucune; affichage: inline-block; largeur: 100%; hauteur: 100%; @média uniquement écran et (largeur maximale: 50em) .container width: 100%; margin: 0;

N'oubliez pas: ce didacticiel contient le code CSS de base permettant de créer une présentation de style Metro, mais pourrait ne pas fonctionner pour votre conception. Si vous pensez que quelque chose ne va pas, vous devriez jouer un peu avec le code pour le faire fonctionner pour votre propre thème..

Le javascript

Vous savez quoi? Nous n'avons besoin d'aucun code JavaScript! Depuis que nous avons ajouté le nom de la classe .js-isotope à notre conteneur DIV et fourni les options d'Isotope avec le données-isotope-options attribuer, nous ne devons rien faire d’autre. Isotope trouve juste le .js-isotope classe, obtient les options et se lance.

Neat, à droite?

Le résultat

Le résultat ci-dessous est en fait une sortie HTML, mais il en sera de même lorsque vous insérez le code WordPress ci-dessus dans votre thème:

Mots finaux

Une interface de type métropolitain n’est pas difficile à imiter dans la conception Web et, comme vous pouvez le constater, elle est magnifique. (Vous pouvez faire encore mieux que cela en améliorant mon code!)

En plus de cela, Isotope est un très joli plugin pour nous permettre de fournir une mise en page réactive à nos visiteurs. En fait, il comporte encore plus de fonctionnalités telles que le tri et le filtrage des éléments, mais naturellement, nous n'en avions pas besoin lors de la création d'une page d'accueil pour notre blog..

Que pensez-vous du langage de conception moderne? Que pensez-vous de l'isotope? Que pensez-vous de ce tutoriel? Partagez vos commentaires ci-dessous!