Einführung in Pure.css - ein leicht reaktionsschnelles Gerüst

Pure.css, ein optimiertes CSS -Framework, vereinfacht das Website -Design. Im Gegensatz zu schwereren Frameworks wie Bootstrap bietet Pure einen kompakten Fußabdruck-unter 4 KB Minified und Gziped-ideal für leistungsbewusste Projekte. Mit dem modularen Design können Sie nur die erforderlichen Komponenten einbeziehen und die Dateigröße weiter verringern.

integrieren Sie Pure.css in eine einzelne Zeile:

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

Schlüsselmerkmale:

• Leicht und reaktionsschnell: Pure's minimales Design und reaktionsschnelles Gittersystem sorgen für schnelle Ladezeiten und optimale Betrachtung über Geräte.
• Einzigartiges Gittersystem: rein verwendet ein fraktionelles Gittersystem (reines G-G und reines U-*), das sich von Bootstraps unterscheidet und Flexibilität im Layout-Design bietet.
• Anpassbare Menüs: Die vertikalen und horizontalen Navigationsmenüs, einschließlich Dropdown -Funktionen, leicht erstellen und anpassen.
• Vielseitige Formen: Konstruieren Sie verschiedene Formstile, einschließlich gestapelter, ausgerichteter und mehrspaltiger Form, unter Verwendung von Pure-Form- und Gittermodulen.
• Erweiterbar und anpassbar: Die Funktionalität und den Stil von Pure problemlos für Ihre spezifischen Designanforderungen ausdehnen. Kombinieren Sie es mit anderen Frameworks ohne Konflikt.

Gittersystemübersicht:

Das Grid -System von

Pure verwendet pure-g als Wrapper und pure-u-* Klassen für Einheiten. Breiten werden als Brüche definiert (z. B. pure-u-2-5 beträgt 40%). Responsive Design wird unter Verwendung von Medienabfragen (z. B. pure-u-md-2-3) erreicht.

Beispiel:

<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>

Navigationsmenüs:

Pure bietet einfache vertikale Menüs, die mit pure-menu-horizontal leicht in horizontal umgewandelt werden. Dropdown -Menüs werden erstellt, indem pure-menu-has-children und pure-menu-allow-hover.

hinzugefügt wird

Formen:

Verwenden Sie pure-form für grundlegende Formen, pure-form-stacked für gestapelte Layouts und pure-form-aligned für ausgerichtete Formen. Multi-Säulen-Formen nutzen das Netzsystem.

Anpassung und Erweiterung:

Das minimale Styling von

Pure ermöglicht eine einfache Anpassung. Erstellen Sie benutzerdefinierte Stile und kombinieren Sie Pure mit anderen Frameworks wie Bootstrap.

Schlussfolgerung:

Pure.css bietet eine leistungsstarke und dennoch leichte Lösung für die Webentwicklung. Seine Einfachheit und Flexibilität machen es zu einer überzeugenden Alternative zu größeren Frameworks, insbesondere wenn die Leistung von größter Bedeutung ist. Erforschen Sie sein Potenzial und tragen Sie zu seiner kontinuierlichen Entwicklung auf Github bei.

häufig gestellte Fragen:

• Leichte Natur: Pure's kleiner Größe (3,8 KB Minified und Gziped) sorgt für schnelle Ladezeiten.
• Reaktionsfähigkeit: basiert auf Normalize.css und Verwendung eines reaktionsschnellen Gittersystems, palidiert sich rein nahtlos an verschiedene Bildschirmgrößen.
• Anpassung: Anpassen Sie die Stile von Pure einfach so an Ihre Designanforderungen.
• Kernkomponenten: Enthält Gitter, Formulare, Schaltflächen, Tabellen und Menüs.
• Vergleich mit anderen Frameworks: Priorisiert die Einfachheit und die leichte Leistung über umfangreiche Funktionen.
• Anfängerfreundlichkeit: Die unkomplizierte Natur macht es Anfängern zugänglich.
• JavaScript -Kompatibilität: funktioniert nahtlos mit JavaScript -Bibliotheken und Frameworks.
• Aktive Wartung: kontinuierlich gepflegt und auf Github aktualisiert.
• Open Source und Free: verfügbar unter der BSD -Lizenz für die kostenlose Verwendung.

Das obige ist der detaillierte Inhalt vonEinführung in Pure.css - ein leicht reaktionsschnelles Gerüst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!