Matérialiser - Un framework CSS de conception de matériaux
Google Conception matérielle vise à bien fonctionner sur le Web et également sur les applications mobiles. Il gagne en popularité auprès des développeurs et si vous souhaitez également l'adopter, il existe de nombreuses façons d'implémenter Material Design sur votre site. Vous pouvez utiliser Polymer ou Angular, ou vous pouvez utiliser Materialise.
Materialise est un Framework CSS basé sur les principes de conception de matériaux avec support Sass pour un meilleur développement. Il porte le style par défaut pour une utilisation facile et dispose d'une documentation détaillée.
Vous pouvez trouver de nombreux composants utiles dans: dialogue, modal, sélecteur de date, boutons matériels, parallaxe, cartes, etc. Il propose également de nombreuses options de navigation parmi lesquelles vous pouvez choisir, telles que les menus déroulants, les menus déroulants et les onglets. Materialise utilise également un Système à 12 grilles avec 3 requêtes de média de taille d'écran par défaut: une largeur maximale de 600 pixels est un appareil mobile, une tablette de 992 pixels et plus de 992 pixels est considéré comme un appareil de bureau.
Commencer
Il existe deux manières de se lancer dans Materialize: utiliser CSS standard ou Toupet. Les deux sources peuvent être téléchargées ici. Vous pouvez également les obtenir avec Bower à l'aide de la commande suivante:
bower installer se matérialiser
Après avoir obtenu les sources, assurez-vous de les lier correctement sur votre fichier de projet ou de les compiler si vous utilisez la version Sass..
Caractéristiques
Dans cette section, je vais expliquer certaines fonctionnalités offertes par Materialise..
1. Sass Mixins
Ce framework contient Sass Mixins qui ajoute automatiquement tous les préfixes du navigateur lorsque vous écrivez certaines propriétés CSS. C'est une excellente fonctionnalité à avoir pour assurer compatibilité entre tous les navigateurs, avec le moins de problèmes possible et le code, autant que possible.
Jetez un coup d'œil aux propriétés d'animation suivantes:
-webkit-animation: 0,5 s; -moz-animation: 0.5s; -o-animation: 0.5s; -ms-animation: 0.5s; animation: 0.5s;
Ces lignes de code peuvent être réécrites avec une seule ligne de Sass mixin comme ceci:
@include animation (0.5s);
Il y a environ 19 mixins principaux disponible. Pour voir la liste complète, rendez-vous dans la catégorie Sass du Mélanges languette.
2. Texte de flux
Alors que d'autres infrastructures frontales utilisent un texte fixe, Materialize implémente un texte réellement réactif. La taille du texte et la hauteur de trait sont également mises à l’échelle afin de préserver la lisibilité. En ce qui concerne les écrans plus petits, la hauteur de ligne est réduite.
Pour utiliser le texte de flux, vous pouvez simplement ajouter le flux-texte classe sur votre texte souhaité. Par exemple:
C'est du texte d'écoulement.
Consultez la démonstration ici dans la section Flux de texte.
3. Effet d'ondulation avec vagues
Material Design vient également avec des commentaires interactifs, un exemple notable étant l'effet d'entraînement. Dans Materialise, cet effet s'appelle Vagues. En gros, lorsque les utilisateurs cliquent ou touchent un bouton, une carte ou tout autre élément, l’effet apparaît. Des vagues peuvent être facilement créées en ajoutant effet de vagues classe sur vos éléments.
Cet extrait vous donne l'effet des vagues.
Soumettre
Les ondulations sont grises par défaut. Mais dans une situation où vous avez un arrière-plan de couleur sombre, vous souhaiterez peut-être modifier la couleur. Pour ajouter une couleur différente, ajoutez simplement vagues- (couleur) à l'élément. Remplace le "(couleur)" par le nom d'une couleur.
Soumettre
Vous pouvez choisir parmi 7 couleurs: lumière, rouge, jaune, orange, violet, vert et turquoise. Vous pouvez toujours créer ou personnaliser vos propres couleurs si ces couleurs ne correspondent pas à vos besoins..
4. Ombre
Pour concevoir des relations entre les éléments, Material Design recommande d’utiliser l’élévation sur les surfaces. Materialise répond à ce principe avec ses z-profondeur- (nombre) classe. Vous pouvez déterminer la profondeur de l'ombre en modifiant le nombre (nombre) de 1 à 5:
Profondeur de l'ombre 3
Toutes les profondeurs d'ombre sont illustrées avec l'image ci-dessous.
5. Boutons et icônes
Dans Material Design, il existe trois types de boutons principaux: bouton en relief, fab (bouton d'action flottant) et bouton plat.
(1) Bouton en relief
Le bouton en relief est le bouton par défaut. Pour créer ce bouton, ajoutez simplement un btn classe à vos éléments. Si vous voulez lui donner l'effet d'onde lorsque vous cliquez dessus ou que vous appuyez dessus, procédez comme suit:
Bouton
Alternativement, vous pouvez également donner au bouton une icône à gauche ou à droite du texte. Pour l'icône, vous aurez besoin d'ajouter des personnalisations balise avec le nom et la position de la classe d'icône. Par exemple:
Télécharger
Dans l'extrait ci-dessus, nous utilisons mdi-fichier-fichier-télécharger classe pour l'icône de téléchargement. Il y a environ 740 icônes différentes vous pouvez utiliser. Pour les voir, rendez-vous sur la page Sass dans l'onglet Icônes.
(2) Bouton flottant
Un bouton flottant peut être créé en ajoutant btn-flottant classe et l'icône de votre choix. Par exemple:
Dans Material Design, le bouton plat est souvent utilisé dans la boîte de dialogue. Pour le créer, ajoutez simplement btn-flat à votre élément comme suit:
Déclin
De plus, les boutons peuvent être désactivés avec le bouton désactivée classe et fait plus grand en utilisant btn-large classe.
6. grille
Materialise utilise un standard Grille réactive à 12 colonnes système. La réactivité est divisée en trois parties: petit (s) pour mobile, moyen (m) pour tablette et grand (l) pour le bureau.
Pour créer des colonnes, utilisez s, m ou l pour indiquer la taille, suivie du numéro de la grille. Par exemple, lorsque vous souhaitez créer une présentation demi-dimensionnée pour un appareil mobile, vous devez inclure un s6 classe dans votre mise en page. s6 représente petit-6 ce qui signifie 6 colonne sur petit appareil.
Vous devez également inclure un col classe dans la mise en page que vous créez et mettez-le à l'intérieur d'un élément qui a la rangée classe. Ceci afin que la disposition puisse être correctement mise en colonnes. Voici un exemple:
J'ai 12 colonnes ou pleine largeur ici4 colonnes (un tiers) ici4 colonnes (un tiers) ici4 colonnes (un tiers) ici
Voici les résultats:
Par défaut, col s12 est de taille fixe et optimisée pour toutes les tailles d'écran, essentiellement la même chose que col s12 m12 l12. Mais si vous voulez spécifier la taille des colonnes pour différents périphériques. Tout ce que vous avez à faire est de lister les tailles supplémentaires comme ceci:
Ma largeur a toujours 12 colonnes partoutJ'ai 12 colonnes sur mobile, 6 sur tablette et 9 sur bureau
Voici à quoi cela ressemble:
Ce ne sont que quelques caractéristiques de Materialise. Pour en savoir plus sur leurs autres fonctionnalités, rendez-vous sur la page de documentation.
