Wie Sie wissen, ist es nicht die Geburtszeit des Internets und die Leute haben Websites mit einzelnen Absatztexten und einigen Hyperlinks fast vergessen. Wenn Sie mit den aktuellen Webstandards weitermachen wollen, müssen Sie Ihre Website angenehm und nicht offen sichtbar machen. Unabhängig von der Programmiersprache wie z HTML or PHP zum Aufbau der Benutzeroberfläche verwendet, CSS wird Ihr Werkzeug sein, um die Webseite stilvoll aussehen zu lassen. Wenn wir eine Webseite mit einem menschlichen Körper vergleichen, fungiert HTML als Ihr Knochen, während CSS etwas ist, das Haut und Muskeln nahe kommt und Form und Struktur verleiht.
Wie alle anderen Dinge in der Welt des Designs und der Entwicklung hat CSS auch kleinere und größere Updates erhalten, die es für CSS3 geeignet machen, das beste Paar, wenn HTML5 die Reise begleitet. Der Star des Spiels ist jedoch der CSS-Trend oder das CSS-Muster, das Sie verwenden möchten! Wie Sie wissen, stehen Ihnen verschiedene CSS-Frameworks mit unterschiedlichen Looks und Features zur Verfügung, wie zum Beispiel Bootstrap, Zurb usw. Was wir Ihnen heute vorstellen, ist Reines CSS, ein einfach coolgrid-basiertes CSS-Framework von Yahoo!, dem führenden Internetriesen. Glücklicherweise können Sie dieses Framework verwenden, ohne einen einzigen Cent zu bezahlen.
Reines CSS
Möglicherweise haben Sie andere Frameworks wie die Zurb-Stiftung verwendet, um attraktive Webseiten und Websites zu erstellen. Die Verwendung des CSS-Frameworks ist sehr nützlich, da Sie Vorlagen für verschiedene Elemente auf der Seite wie Abteilungen, Formulare, Menüs usw. erhalten können. Dies ist die gleiche Funktion wie bei Reines CSS von Yahoo! Anstatt Dateien herunterzuladen und zum 'CSS'-Ordner hinzuzufügen, kann Pure CSS wie folgt funktionieren Google Fonts, wo Sie eine einzige Codezeile hinzufügen müssen, um das Framework in HTML zu integrieren. Da es sich um ein neuestes Framework handelt, ist es vollständig responsive. Darüber hinaus ist Pure CSS eines der einfachsten Frameworks, die Sie im Web finden können. Sie können das Framework entweder zum Betreiben Ihrer Website verwenden oder spezielle Module zum Gestalten von Abschnitten wie Formularen, Menüs usw. herunterladen. Es stehen sechs einzelne Module kostenlos zur Verfügung. Module von Pure CSS sind wie folgt, die beim Extrahieren eine geringe Größe (weniger als 2 Kb) zu haben scheinen.
- Basis: Basis-Webseitenelemente wie Überschriften, Absätze, Typografie
- Buttons: Diverse Buttons mit Effekten wie aktiv, beim Hover etc.
- Tabellen: Basistische erhältlich mit Rand etc.
- Menüs: Horizontal, Vertikal, Dropdown.
- Gitter: Reaktionsfähige Gitter.
- Formen: Gruppierte Eingabe, mehrspaltig etc.
SIEHE AUCH: Lesezeichen für subtile Muster: Vorschau von Hintergrundmustern auf Ihrer Website.
Warum reines CSS verwenden?
- Weniger ungenutzter Code: Es ist sehr üblich, dass Sie bei der Verwendung anderer CSS-Frameworks eine große Anzahl von nicht verwendetem Code sehen. Auf der anderen Seite werden Sie im Falle von Pure CSS nie mit diesem Problem konfrontiert, da Sie die spezifische Version des Frameworks verwenden und sie zum Gestalten bestimmter Abschnitte der Webseite verwenden können. Weniger Code scheint natürlich noch toll zu sein!
- Alle drinnen: Zumindest in einigen anderen Frameworks verwenden sie JavaScript-Plugins und -Codes von Drittanbietern, um die visuelle Wirkung zu verbessern. Pure CSS verwendet jedoch keine Art von JS-Plugins, mit Ausnahme des Falles, der im Dropdown-Effekt verwendet wird. Weniger Code von Drittanbietern kann Ihnen schnellere Seitenladezeiten und einen sauberen Code ermöglichen.
- Vorlagen: Wenn Sie kein Experte für die Gestaltung Ihres eigenen Layouts für Ihre Website sind, kann Pure CSS in diesem Abschnitt helfen. Die Website enthält eine Reihe von Layoutbeispielen, passende Websites mit unterschiedlichen Absichten wie Marketing, Landingpage usw.
- Skin-Builder: Falls die Vorlagen und Stile den kreativen Designer in Ihnen zufriedenstellen können, können Sie den Skin Builder von Pure CSS verwenden, um Ihre eigene Skin zu erstellen. Wie Sie sich vorstellen können, berücksichtigt der Skin Builder Ihre Kenntnisse auf der Codierungsebene nicht.
SIEHE AUCH: Icon Fonts: Vor- und Nachteile des Font Awesome Generators.
Verwenden von reinem CSS
Wie bereits erwähnt, hat Pure CSS viele Vorteile im Vergleich zu anderen Frameworks. Wenn Sie sich an das zuvor Gesagte erinnern, können Sie Pure CSS mit der gleichen Methode wie Google Fonts verwenden. Sie müssen eine einzelne Zeile eines externen Dateilinks hinzufügen, um Ihrer Webseite Stil zu verleihen. Diese Funktion ist sehr nützlich, wenn Sie Webseiten mit einer einzelnen Datei erstellen müssen und wenn Sie nicht genügend Platz haben, um alle CSS-Dateien abzulegen (das wird wohl nie passieren). Als Yahoo! Dreht das Rad des Projekts das Projekt, wollen Sie sich nicht über Ladefehler oder technische Ausfälle ärgern.
Wenn Sie die vollständigen CSS-Vorlagen von Pure CSS verwenden möchten, können Sie der Hauptseite den folgenden Code hinzufügen. Sie können auch auf den Link zur CSS-Datei klicken und die CSS-Datei herunterladen, um sie zu verwenden.
[html]
[/ html]
Für den Fall, dass Sie nur bestimmte CSS-Versionen wie Menüs, Formulare usw. verwenden möchten, stehen spezielle Codes zusammen mit speziellen CSS-Dateien zur Verfügung. Die Liste der URLs lautet wie folgt:
Die Verwendung des Skin-Builders von Pure CSS ist auch eine einfachere Aufgabe, da Sie die Eigenschaften von Elementen mithilfe der intuitiven Steuerschaltflächen der Skin-Builder-Seite steuern können. Wir empfehlen Ihnen jedoch, die CSS-Dateien herunterzuladen, um die Namen der Elemente zu verstehen. Wie bereits erwähnt, verbraucht das Ablegen dieser Dateien mit weniger als 2 KB nicht Ihren Speicherplatz.
Die Website von Pure CSS ist so aufgebaut, dass selbst ein Neuling Pure CSS-basierte Elemente in ihre Websites einfügen kann. Auf der linken Seite sehen Sie eine einfache Seitenleiste, die Abschnitte wie Formulare, Schaltflächen usw. auflistet. Auf jeder Seite sind Vorschauen zusammen mit HTML-Code verfügbar, um diesen Effekt in Ihre Website zu bringen. Daher ist es sehr einfach, solche Elemente in Ihre Webseite einzufügen. Unten sehen Sie die Vorschau und den Code eines einzelnen Anmeldeformulars.
Zusammenfassung
Bei der Analyse aller Features von Pure CSS ist dies einer der optimalen Beiträge von Yahoo! Welt zu gestalten. Yahoo! Die Benutzeroberfläche, allgemein bekannt als YUI, unterstützt alle Strings, die an Pure CSS angehängt sind, was das Framework zum besten macht, wenn es einen Vergleich gibt. Neben der Verwendung voreingestellter Elemente können Sie Pure CSS auch anpassen. Sie müssen sich zur Pure CSS-Website führen, um das einfach kompakte Framework zu verwenden und mehr darüber zu erfahren. Teilen Sie uns Ihre Meinung zu diesem Framework mit, nachdem Sie sich Beispiele angesehen und in Ihrem Projekt verwendet haben.
Rakesh Kumar
Vielen Dank für die Veröffentlichung dieser wunderbaren Rezension von reinem CSS. Da ich versuche, meine eigenen WordPress-Themes für die Community zu entwickeln, denke ich, dass dieses neue CSS von yahoo.com mir sehr helfen kann.
Hari
Ich finde es wirklich sehr nützlich. Werde jeden von ihnen später erkunden.
Cassie
Beeindruckend. Das ist wirklich interessant. Vielen Dank für das Teilen dieser Informationen.
Raymond Sam
Würden Sie an dieser Stelle Pure über Bootstrap oder Foundation empfehlen? Ich habe festgestellt, dass Bootstrap als Erstbenutzer etwas weniger als optimal dokumentiert ist.
Sajesch
Hallo Abhijith N Arjunan, ich muss dir sagen, dass du großartige Arbeit geleistet hast und danke für die Aufklärung meiner Kenntnisse und Fähigkeiten.
Santosh
Toller Artikel Abhijit. Ich habe PureCSS verwendet, um ein Thema für ein neues Content-Management-System namens PyroCMS zu erstellen. Sehen Sie sich [PyroPure] an).
Es hat großen Spaß gemacht, das Thema zu entwickeln. Ich denke, es war viel leichter als andere Frameworks da draußen. Auch das Styling ist sehr anpassbar.
Erwin
Wow .. Das ist interessant zu lernen, ich weiß, ich bin nicht talentiert in Programmierung und Design, aber es war interessant. Das PureCSS brauche ich wohl etwas, sehr.
Marcus
Hallo, ich habe (PureCss) Pureness von Yahoo bei 3 Projekten verwendet und es ist wirklich ein tolles leichtes Framework, im Vergleich zu Bootstrap oder Foundation liegt der Fokus darauf, dass es leicht ist und das Design zum Entwickler zurückbringt und sich auf ein 300-kb-UI-Kit verlässt dass Sie sowieso nicht 70% der Elemente verwenden, und wenn Sie Teile aus Bootstrap herausnehmen, benötigt es immer noch Java, es ist immer noch im 200-KB-Bereich. Ganz zu schweigen davon, dass jede Website Bootstrappy aussieht, weshalb ich Bootstrap niemals verwenden werde, um eine Website oder eine Zurb-Stiftung zu erstellen, die alle schwer sind und Sie ihr 12-Spalten-Raster verwenden müssen, das wirklich langweilig wurde. Ich sehe Websites, die alle nett und cool aussehen, aber sie sehen einfach so kastenförmig und gut aus Bootstrap-Foundation, Yahoo PureCss ist erstaunlich UI-Kit leicht zu bedienen einfach zu ändern und funktioniert vor allem sehr schnell mit WordPress als Thema! Ich habe es für 4 WordPress-Projekte mit YUI PureCss verwendet und der Kunde war nach dem Wechsel von Bootstrap erstaunt, der erste war die Geschwindigkeit der Site, der zweite das schöne FLAT-Design standardmäßig.