Petit Kiwi : web, high-tech & cie

Metro UI CSS : votre site web au look Windows 8

La nouvelle interface de Microsoft, anciennement appelée Metro, sous forme de petites tuiles réparties sur tout l’écran, on aime ou on n’aime pas. Mais pour ceux qui aiment, voilà une bonne nouvelle, puisque vous pouvez dès à présent développer un site web qui reprend trait pour trait le design de Windows 8. Metro UI CSS est un framework développé par Sergey Pimenov et proposé gratuitement sous license MIT. J’entends par framework une batterie de pages HTML toutes prêtes que vous pouvez modifier à votre gré.

Metro UI CSS n’utilise pas uniquement les CSS mais également du JavaScript via des frameworks tels que jQuery pour des fonctionnalités plus avancées. Par exemple, on peut déplacer les tuiles horizontalement en glissant l’écran avec la souris ou bien avec la molette. Le tout donne des effets visuels sympas et une ergonomie assez poussée.

Page de démarrage au look Windows 8

Comme vous pouvez le voir ci-dessous, le framework propose des pages toutes prêtes pour afficher des images, créer des boutons et des formulaires.

Metro UI CSS Images

Metro UI CSS Boutons

Metro UI CSS Formulaires

Seul bémol, Metro UI CSS est fourni tel quel. Je n’ai pas trouvé de documentation (si je me trompe faites moi savoir). Mais si on relativise, ça reste des pages HTML modifiables à la volée pour les adapter à vos besoins. Bon courage :D

6 commentaires

  1. oro77

    Je trouve le design de Windows 8 plutôt réussi mais après je ne suis pas sur de vouloir avoir mon site avec un design identique à mon OS.

    Réagir

    • NotoOn

      Je trouve aussi le design réussi, mais je suis un peu sceptique sur ce type d’interface dans windows. Par contre sur un site ça passe plutôt bien.

      Réagir

  2. Maniac058

    Franchement,
    je n’arrive pas a le mettre sur un site. Je ne comprend pas.

    Réagir

  3. Laolao

    Bonjour,
    Je rencontre un problème avec ce framework : je m’explique ; tant qu’il est en ligne tout va bien mais des lors qu’il est en local certains effets comme les slides ne fonctionnent pas avec chrome, ie11 et peut-être d’autre ; firefox ça marche. Une explication?Merci.

    Réagir

    • Alain

      En effet, pour le mettre en local il faut aussi placer (en local) des modules (fichiers) qu’il va habituellement rechercher en ligne) il faudra donc aussi changer les adresses de ces fichiers importés.
      Attention, il semblerait qu’à chque usage il essaie de signaler son passage sur un site externe (pour statistiques ?)

      Réagir

  4. hamada

    Bonjour; en premier lieu , je m’excuse si j’ai écrit ce commentaire ici et deuxièmement merci pour le script de pagination.

    Dans cet exemple, la table s’appelle pagination, et les données sont issues de la colonne p_text; ou pourrais je avoir ce contenu de la table pour essayer de le mettre en œuvre ce script localement.

    Si vous pouvez m’aider en m’indiquant le contenu de la base çà serait sympa

    Merci

    Réagir

Commenter