Présentation de Pure.CSS - Un cadre réactif léger

pure.css, un framework CSS rationalisé, simplifie la conception du site Web. Contrairement à des cadres plus lourds comme Bootstrap, Pure possède une empreinte compacte - sous 4KB minifiée et gzipped, ce qui en fait idéal pour les projets soucieux de la performance. Sa conception modulaire vous permet d'inclure uniquement les composants nécessaires, réduisant encore la taille du fichier.

Intégrer Pure.css avec une seule ligne:

<code class="language-html"><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"></code>

Caractéristiques de clé:

• Léger et réactif: Le système minimal de conception et de grille réactif de Pure garantit des temps de chargement rapide et une visualisation optimale sur les appareils.
• Système de grille unique: Pure utilise un système de grille fractionnaire (pur-g et pure-u- *) distinct des bootstrap, offrant une flexibilité dans la conception de la disposition.
• Menus personnalisables: Créer et personnaliser facilement les menus de navigation verticaux et horizontaux, y compris la fonctionnalité déroulante.
• Formes polyvalentes: Construisez divers styles de forme, y compris les formes empilées, alignées et multi-colonnes, en utilisant les modules de forme et de grille de Pure.
• Extensible et personnalisable: Étendez facilement la fonctionnalité et le style de Pure pour répondre à vos besoins de conception spécifiques. Combinez-le avec d'autres cadres sans conflit.

Présentation du système de grille:

Le système de grille de Pure utilise pure-g comme un wrapper et des classes pure-u-* pour les unités. Les largeurs sont définies comme des fractions (par exemple, pure-u-2-5 est de 40%). La conception réactive est réalisée à l'aide de requêtes multimédias (par exemple, pure-u-md-2-3).

Exemple:

<code class="language-html"><div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-5">One</div>
  <div class="pure-u-1 pure-u-md-2-5">Two</div>
  <div class="pure-u-1 pure-u-md-2-5">Three</div>
</div></code>

Menus de navigation:

Pure offre des menus verticaux simples, facilement convertis en horizontaux en utilisant pure-menu-horizontal. Les menus déroulants sont créés en ajoutant pure-menu-has-children et pure-menu-allow-hover.

Formulaires:

Utiliser pure-form pour les formulaires de base, pure-form-stacked pour les dispositions empilées et pure-form-aligned pour les formulaires alignés. Les formulaires multi-colonnes tirent parti du système de grille.

Personnalisation et extension:

Le style minimal de Pure permet une personnalisation facile. Créez des styles personnalisés et combinez pur avec d'autres frameworks comme Bootstrap.

Conclusion:

pure.css offre une solution puissante mais légère pour le développement Web. Sa simplicité et sa flexibilité en font une alternative convaincante aux cadres plus grands, en particulier lorsque les performances sont primordiales. Explorez son potentiel et contribuez à son développement en cours sur GitHub.

Questions fréquemment posées:

• Nature légère: La petite taille de Pure (3,8 kb minifiée et gzipied) assure des temps de chargement rapides.
• Réactivité: Construit sur la normalisation.css et en utilisant un système de grille réactif, Pure s'adapte parfaitement aux différentes tailles d'écran.
• Personnalisation: Personnaliser facilement les styles de Pure pour répondre à vos exigences de conception.
• Composants centraux: comprend les grilles, les formulaires, les boutons, les tables et les menus.
• Comparaison avec d'autres cadres: Pure hiérarte la simplicité et les performances légères sur les fonctionnalités étendues.
• Entreprise des débutants: sa nature simple le rend accessible aux débutants.
• Compatibilité JavaScript: Fonctionne de manière transparente avec les bibliothèques et les frameworks JavaScript.
• Maintenance active: maintenue et mise à jour en continu sur github.
• Open source et gratuit: Disponible sous la licence BSD pour une utilisation gratuite.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!