Parhaat avoimen lähdekoodin CSS-kehykset

Vaikka suurin osa verkkosivustoista toimii sisällönhallinnan alaisuudessa, on paljon sanottavaa portaalin luomisen puolesta. Ja joka tapauksessa, sisällönhallinnoijat tarvitsevat myös jonkun huolehtimaan heidän ulkonäöltään. Tässä viestissä käymme läpi joitain parhaita työkaluja CSS-tyylitaulukoiden luomiseen.

Aloitetaan alusta. Mikä on CSS?

Millainen unelmiesi talo olisi? Olisiko sillä yksi tai kaksi kerrosta? Haluatko alakerran makuuhuoneet ja yläkerran keittiön? Mikset aseta kylpyamme makuuhuoneeseen?

Ja kun tämä on ratkaistu, minkä värisen maalaat huoneet? Teetkö kivestä etuosan?

Voimme tehdä analogian verkkosivuston ja talon välillä. Toisaalta meillä on sivuston rakenne ja toisaalta visuaalinen puoli.  Tällöin rakenne määritetään suunnitelmalla ja visuaalinen ulkonäkö katsomalla koriste-näytteitä.

CSS on lyhenne sanoista Cascading Style Sheets. HTML: ää käytetään verkkodokumentin rakentamiseen (esimerkiksi sivujen, otsikoiden määrittely ja kuvien, videoiden ja muun median upottamisajankohta) CSS asettaa sivun asettelutyylin, värit ja typografian.

CSS: n kanssa voit määrittää tyylin jokaiselle HTML-elementille. Elementit ovat verkkosivun yksittäisiä HTML-komponentteja.

Tyylitaulukot ne voivat olla ulkoisia, sisäisiä tai verkossa. Jos haluat käyttää niitä ulkoisesti, sinun on tallennettava ne .css-tiedostoina ja kerrottava .html-tiedostosta, mistä ne löytyvät.

Sisäisessä tilassa ohjeet kirjoitetaan tietyn .html-sivun otsikkoon, mikä tekee sivun latautumisesta hitaampaa ja muokkaukset monimutkaisempia.

Online-tilassa ulkoista tyylitaulukkoa isännöidään eri palvelimelle. Ne ovat erityisen sopivia, kun haluamme käyttää niitä useita kertoja.

Mikä on CSS-kehys?

CSS-kehykset ne ovat työkaluja, joita käyttöliittymäkehittäjät tekevät työnsä nopeuttamiseksi. Sen sijaan, että luodaan ratkaisuja tyhjästä joka kerta, kun uusi projekti tulee esiin, lkehykset antavat kehittäjille työkalut luoda nopeasti käyttöliittymiä, joita voidaan säätää ja toistaa tarpeen mukaan.

Muutamalla sanalla voimme määritellä kehykset muodossa kokoelma CSS-tyylisivuja, jotka on valmistettu ja käyttövalmis erilaisissa tilanteissa.

Ajan säästäminen ei ole ainoa etu, joka saadaan CSS-kehysten käytöstä. Niitä käyttämällä mallit ovat standardoituja ja niiden avulla kehittäjä voi helposti lukea toisen kehittäjän koodin.

Parhaat avoimen lähdekoodin CSS-kehykset

Bootstrap

Itsensä mukaanBootstrap on suosituin HTML-, CSS- ja JS-kehyksistä. Se on ihanteellinen mobiiliystävällisten (ensin mobiili) ja reagoivien sivustojen suunnitteluun.

perusta

Näyttää siltä, ​​että ihmisillä, jotka tekevät kehyksiä, ei ole isoäitiä.
perusta Se on kuvattu "Maailman edistynein mukautuva kehys"

Se on hyödyllinen työkalu verkkosivustojen ja verkkosovellusten luomiseen painottaen liiketoiminnan tarpeita. Facebook, eBay, Mozilla, Adobe, HP, Cisco ja Disney ovat sen käyttäjien joukossa.

löytää

löytää on ilmainen ja avoimen lähdekoodin CSS-kehys perustuu Flexboxiin ja sitä käyttää yli 200.000 XNUMX kehittäjää.

Flexbox on suunniteltu auttamaan jakamaan tilaa käyttöliittymän kohteiden välillä ja parantamaan kohdistusominaisuuksia. Flexbox käsittelee asettelun vain yhdessä ulottuvuudessa kerrallaan - joko rivinä tai sarakkeena. Tämä on ristiriidassa CSS Grid Layoutin kaksiulotteisen mallin kanssa, joka käsittelee sarakkeita ja rivejä samanaikaisesti.

Semanttinen käyttöliittymä

Semanttinen käyttöliittymä on kehys, joka auttaa luomaan kauniita ja reagoivia ulkoasuja ihmisystävällisellä HTML: llä.

Tämän kehyksen avulla voimme rakentaa kauniita malleja yli 3000 temaattisella muuttujalla ja yli 50 käyttöliittymäkomponentilla.

Se integroituu myös monien kolmansien osapuolten kirjastojen, kuten React, Angular, Meteor tai Ember, kanssa.