Zoals u weet, is het niet de geboortetijd van internet en zijn mensen websites bijna vergeten, met tekst in één alinea en enkele hyperlinks. Als u verder wilt gaan met de huidige webstandaarden, moet u uw website plezierig maken in plaats van eerlijk zichtbaar. Ongeacht de codeertaal zoals: HTML or PHP gebruikt voor het bouwen van de gebruikersinterface, CSS zal uw hulpmiddel zijn om de webpagina er stijlvol uit te laten zien. Wanneer we een webpagina vergelijken met een menselijk lichaam, werkt HTML als je botten, terwijl CSS iets is dat dicht bij huid en spieren ligt, gemaakt om vorm en structuur te geven.
Net als alle andere dingen in de wereld van ontwerp en ontwikkeling, heeft CSS ook kleine en grote updates gekregen waardoor het geschikt is om CSS3 te bereiken, wat het beste paar is wanneer HTML5 de reis vergezelt. De ster van het spel is echter de CSS-trend of -patroon dat u kiest om te gebruiken! Zoals u weet, zijn er verschillende CSS-frameworks voor u beschikbaar met verschillende looks en functies, zoals: Bootstrap, ZURB enz. Wat we vandaag aan u voorstellen is: Puur css, een eenvoudig coolgrid-gebaseerd CSS Framework van Yahoo!, de toonaangevende internetgigant. Gelukkig kun je dit framework gebruiken zonder ook maar een cent te betalen.
Puur css
Je hebt misschien andere frameworks zoals Zurb Foundation gebruikt voor het bouwen van aantrekkelijke webpagina's en websites. Het gebruik van CSS-framework is erg handig omdat u sjablonen kunt krijgen voor verschillende elementen op de pagina, zoals divisies, formulieren, menu's enz. Dit is dezelfde functie van Pure CSS door Yahoo! In plaats van bestanden te downloaden en toe te voegen aan de map 'CSS', kan Pure CSS werken als: Google Fonts, waar u een enkele regel code moet toevoegen om het framework in HTML te integreren. Omdat het framework de nieuwste is, is het volledig responsive. Bovendien is Pure CSS een van de eenvoudigste frameworks die je op internet kunt vinden. U kunt het framework gebruiken om uw website van stroom te voorzien of specifieke modules downloaden voor het stylen van secties zoals formulieren, menu's enz. Er zijn zes afzonderlijke modules gratis beschikbaar. Modules van Pure CSS zijn als volgt, die licht lijken te zijn (minder dan 2 Kb) wanneer ze worden geëxtraheerd.
- Baseren: Basiswebpagina-elementen zoals koppen, alinea's, typografie
- Knoppen: Verschillende knoppen met effecten zoals actief, op hover etc.
- tabellen: Basistafels verkrijgbaar met rand etc.
- menu's: Horizontaal, Verticaal, Vervolgkeuzelijst.
- grids: Responsieve rasters.
- formulieren: Gegroepeerde invoer, meerdere kolommen enz.
ZIE OOK: Subtiele patronen Bookmarklet: voorbeeld van achtergrondpatronen op uw website.
Waarom pure CSS gebruiken?
- Minder ongebruikte code: Het is heel gebruikelijk dat u een groot aantal niet-gebruikte code kunt zien wanneer u andere css-frameworks gebruikt. Aan de andere kant, in het geval van Pure CSS, zul je dit probleem nooit tegenkomen, omdat je de specifieke versie van het framework kunt gebruiken en het kunt gebruiken voor het stylen van specifieke delen van de webpagina. Minder code lijkt natuurlijk zelfs geweldig!
- Allemaal binnen: In ieder geval in sommige andere frameworks gebruiken ze JavaScript-plug-ins en codes van derden om de visuele impact te verbeteren. Pure CSS gebruikt echter geen enkele vorm van JS-plug-ins, met uitzondering van het geval van degene die wordt gebruikt in het drop-down-effect. Minder code van derden kan ervoor zorgen dat pagina's sneller worden geladen en dat de code overzichtelijk is.
- Sjablonen: Als u geen expert bent in het ontwerpen van uw eigen lay-out voor uw website, kan Pure CSS u daarbij helpen. De website bevat een aantal lay-outvoorbeelden, bijpassende websites met verschillende intenties zoals marketing, landingspagina etc.
- Huidbouwer: Als de sjablonen en stijlen de creatieve ontwerper in jou tevreden kunnen stellen, kun je de skinbuilder van Pure CSS gebruiken om je eigen skin te bouwen. Zoals u kunt raden, houdt de skinbuilder geen rekening met uw coderingsniveau-expertise.
ZIE OOK: Pictogramlettertypen: voor- en nadelen van de Font Awesome Generator.
Pure CSS gebruiken
Zoals eerder gespecificeerd heeft Pure CSS veel gunstige eigenschappen in vergelijking met andere frameworks. Herinnerend aan wat we eerder zeiden, kunt u Pure CSS gebruiken via dezelfde methode als Google Fonts. U moet een enkele regel externe bestandslink toevoegen om stijl aan uw webpagina te geven. Deze functie is erg handig als je webpagina's met één bestand moet bouwen en als je niet genoeg ruimte hebt om alle CSS-bestanden te plaatsen (denk dat dit nooit zal gebeuren). Als Yahoo! draait aan het stuur van het project project, u wilt niet gespannen raken over laadfouten of technische storingen.
Als u de volledige CSS-sjablonen van Pure CSS wilt gebruiken, kunt u de volgende code toevoegen aan de hoofdwebpagina. U kunt ook op de CSS-bestandslink klikken en het CSS-bestand downloaden om het te gebruiken.
[Html]
[/ Html]
Als u alleen gebruik wilt maken van specifieke CSS-versies zoals menu's, formulieren enz., zijn er speciale codes beschikbaar naast speciale CSS-bestanden. De lijst met URL's is als volgt:
Het gebruik van de skinbuilder van Pure CSS is ook een eenvoudigere taak omdat u de eigenschappen van elementen kunt regelen met behulp van intuïtieve bedieningsknoppen van de skinbuilder-pagina. We raden u echter aan de CSS-bestanden te downloaden om de namen van de elementen te begrijpen. Zoals we al zeiden, zal het plaatsen van deze bestanden van minder dan 2 Kb uw schijfruimte niet in beslag nemen.
De website van Pure CSS is zo opgezet dat zelfs een newbie op Pure CSS gebaseerde elementen in hun websites kan invoegen. U kunt een eenvoudige zijbalk aan de linkerkant zien, met een lijst van secties zoals formulieren, knoppen enz. Op elke pagina zijn voorbeelden beschikbaar samen met HTML-code om dat effect in uw website te brengen. Daarom is het heel eenvoudig om dergelijke elementen in uw webpagina in te voegen. Hieronder wordt het voorbeeld en de code weergegeven van een formulier met één inlogtype.
Conclusie
Bij het analyseren van alle functies van Pure CSS is dit een van de optimale bijdragen van Yahoo! wereld te ontwerpen. Yahoo! Gebruikersinterface, algemeen bekend als YUI, ondersteunt alle strings die aan Pure CSS zijn gekoppeld, waardoor het raamwerk het beste is als er een vergelijking is. Naast het gebruik van vooraf ingestelde elementen, kunt u Pure CSS ook aanpassen. Je moet jezelf naar de Pure CSS-website leiden om meer te weten te komen over het eenvoudig compacte framework. Laat ons uw mening over dit raamwerk weten nadat u voorbeelden heeft bekeken en het in uw project heeft gebruikt.
Rakesh Kumar
Bedankt voor het plaatsen van deze prachtige recensie van pure css. Aangezien ik mijn eigen wordpress-thema's voor de gemeenschap probeer te ontwikkelen, denk ik dat deze nieuwe css van yahoo.com me veel kan helpen.
Hari
Ik vind het echt heel handig. Zal ze later allemaal onderzoeken.
Cassie
Wauw. Dit is echt interessant. Bedankt voor het delen van deze informatie.
Raymond Sam
Zou u Pure op dit moment aanbevelen boven Bootstrap of Foundation? Ik heb gevonden dat Bootstrap iets minder dan optimaal gedocumenteerd is als een eerste gebruiker ervan.
Sajesh
Hallo Abhijith N Arjunan, ik moet je zeggen dat je geweldig werk hebt geleverd en bedankt voor het verlichten van mijn kennis en vaardigheden.
Santosh
Geweldig artikel Abhijit. Ik heb PureCSS gebruikt om een thema te maken voor een nieuw contentmanagementsysteem genaamd PyroCMS. Kijk eens bij [PyroPure]).
Het was erg leuk om het thema te ontwikkelen. Ik denk dat het veel lichter was dan andere frameworks die er zijn. De styling is ook zeer aanpasbaar.
Erwin
Wow.. Dit is iets dat interessant is om te leren, ik weet dat ik niet getalenteerd ben in programmeren en ontwerpen, maar het was interessant om te doen. De PureCSS is waarschijnlijk iets dat ik nodig heb, heel erg.
Adam
Hallo, ik heb (PureCss) puurheid van Yahoo gebruikt op 3 projecten en het is echt een geweldig licht raamwerk om zo te zeggen, vergeleken met Bootstrap of foundation is de focus dat het licht is en het ontwerp terugbrengt naar de ontwikkelaar en vertrouwt op 300kb UI-kit dat je toch geen 70% van de elementen gebruikt, en als je onderdelen uit Bootstrap haalt, heeft het nog steeds Java nodig, het is nog steeds in het 200kb-gedeelte. Om nog maar te zwijgen over het feit dat elke website er Bootstrappy uitziet, daarom zal ik Bootstrap nooit gebruiken om een website of Zurb-fundering te bouwen, ze zijn allemaal zwaar en je moet hun 12-kolomsraster gebruiken, wat echt saai werd. Ik zie websites, ze zien er allemaal leuk en cool uit, maar ze zien er gewoon zo boxy en goed uit Bootstrap-foundation, Yahoo PureCss is geweldig UI-kit licht snel gemakkelijk te gebruiken aan te passen en het beste van alles werkt erg snel met WordPress als thema! Ik gebruikte het voor 4 WordPress-projecten met YUI PureCss en de klant was verbaasd na het overschakelen van Bootstrap, het eerste wat opviel was de snelheid van de site en het tweede standaard het prachtige FLAT-ontwerp.