20 Paras etupään runko Bootstrap-vaihtoehdolle

• 2019

Kehykset ovat yksi hyödyllisistä edistyneiden kehittäjien työkalusta nopeammalle ja paremmalle kehitykselle. Kehysten avulla voit rakentaa hyvin jäsennellyn, ylläpidettävän ja porrastettavan verkkosivuston . Se auttaa myös säästämään paljon aikaa, koska käytettävissä on runsaasti helposti saatavilla olevia elementtejä.

Nykyään kehysten määrä on lisääntynyt huomattavasti, ja kuten ehkä tiedätte, Twitterin bootstrap on parhaillaan. Jotta voit valita sopivimman kehyksen käytettäväksi, olemme listanneet Bootstrap-vaihtoehdolle nykyisin saatavilla olevat 21+ parasta kehystä . Ne tarjoavat ainutlaatuisia ja kiusantekoisia ominaisuuksia, jotka eroavat toisistaan. Tarkista!

1. Puhdas

Jos aiot rakentaa web-sovelluksen, joka toimii sekä työpöydällä että mobiililaitteilla, kannattaa harkita Pure-ohjelman käyttöä Yahoo-palvelusta. Pureilla on paljon parempi suorituskyky mobiililaitteissa kuin Bootstrap. Kuten nimestä käy ilmi, Pure on vain puhdas CSS-kehys. Rakenna Normalize.css: n päälle, Pure on erittäin pienikokoinen, vain 4, 5KB (minified ja gzip) .

2. UI-paketti

UIkit on ilmainen, kevyt ja modulaarinen etukehys. LESS: llä kehitetyllä UIkitillä on hyvin jäsennelty, laajennettava ja ylläpidettävä koodi. Se tarjoaa myös ruudukkojärjestelmän, joka on reagoiva, nestemäinen ja kätevä. UIkitilla voit rakentaa navigointia, painikkeita, modaaleja, pudotusvalikkoa ja reagoivampaa. Sen kattava dokumentaatio helpottaa pääsyä UIkitiin.

3. MontageJS

MontageJS on ilmainen avoimen lähdekoodin kehys, joka on erikoistunut luomaan nykyaikaisia ​​yhden sivun sovelluksia (SPA) . Monta todistetun kehyssovelluksen perustaa hyödyntämällä Montage yksinkertaistaa kehitystyötäsi, kun taas ilmaisevat HTML-koodit ovat edelleen ylläpidettävissä. MontageJS: n avulla voit synkronoida DOM-päivitykset tasaisempaan käyttäjäkokemukseen, rakentaa ja laajentaa UI-komponentteja, joita voidaan käyttää uudelleen ja enemmän.

4. Perustelut

Pohjatyö on kevyt, joustava ja reagoiva eturakenne, jonka Gary Hepting luo ja ylläpitää. Sassin ja kompassin päälle rakennettu Groundwork tarjoaa suuren ruudukon järjestelmän, joka on joustava, nestemäinen ja kätevä . Ruudukon avulla voit rakentaa minkä tahansa ulkoasun tyypin, joka sopii mihin tahansa näytön kokoon.

5. Gumby

Gumby on joustava ja reagoiva kehys, joka on rakennettu Sassin voimalla nopeammin web-kehitykseen. Sen mukauttimen avulla voit helposti säätää ja muokata koko käyttöliittymäsarjan suunnittelua vastaamaan parhaita mahdollisuuksiasi. Gumbylla on useita erilaisia ​​verkkoja eri sarakkeiden muunnelmilla, mutta Gumby on oletusarvoisesti mukana 960 grid-järjestelmässä.

6. HTML5 Boilerplate

HTML5 Boilerplate tarjoaa HTML5-valmiusmallin, joka on optimoitu vastaamaan HTML-standardin uusimpia ominaisuuksia. Käyttämällä tätä mallia voit luoda nopean, kestävän ja reagoivan sivuston, joka pystyy mukautumaan mihin tahansa selaimeen, jopa vanhoihin, kuten Internet Exploreriin.

7. Luuranko

Skeleton on kevyt CSS-kehys, joka käyttää 12-sarakkeen verkkojärjestelmää. Toisin kuin Bootstrap tai säätiö, Skeleton tarjoaa sinulle vain muutamia perustekijäkomponentteja kuin painike, luettelot, taulukko, lomakkeet, joiden tarkoituksena on käynnistää kehitystyösi.

8. Bootflat

Bootflat on avoimen lähdekoodin CSS-kehys, joka on rakennettu tehokkaalla Bootstrap 3: lla. Bootflat on suunniteltu luomaan upea litteä web-muotoilu nopeammin, helpommin ja vähemmän toistuvasti . Siksi sen UI-paketissa on kaunis PSD-käyttöliittymäpaketti, jota voit käyttää sivustossasi, iOS- tai Android-projektissa.

9. Inuiitti

Inuit.css on toinen suuri CSS-työryhmä, joka keskittyy Mobile First -ratkaisuun ja jättää kaiken suunnittelun sinulle. Vaikka monet muut puitteet tulevat omalla rakennetulla CSS: llä, Inuit.css ei kuitenkaan. Inuit.css toimii OOCSS (Object Oriented CSS) tavalla, joka on nopea, skaalautuva ja ylläpidettävä menetelmä uudelleenkäytettävien CSS: ien kirjoittamiseksi.

10. 960 Grid-järjestelmä

960 Grid System on eturakenne, joka voi virtaviivaistaa Web-kehitystyönkulun 960px leveän kontin pohjalta. Säiliö on sitten viipaloitu 12, 16 tai jopa 24 sarakkeeseen sisällön helpottamiseksi.

11. Toteuta

Googlen materiaalisuunnitteluperiaatteiden pohjalta rakennettu Materializze on tullut nykyaikaiseksi reagoivaksi eturakenteeksi. Tämä kehys soveltuu hyvin niille, jotka haluavat toteuttaa materiaalisuunnittelun ulkoasun ja tuntuman omalle verkkosivulleen ilman monimutkaisuutta. Siinä on korttisuunnittelu, rippleefektien animaatio, Sass mixin, vedä mobiilivalikko ja paljon muuta.

12. Jeet

Jeet on nopea, joustava ja eniten etukäteen käytettävissä oleva verkkojärjestelmä. Jeet auttaa rakentamaan verkkoja lennossa hyvin intuitiivisesti, puhtaasti. Se tukee lähes kaikkia nykyaikaisia ​​ja vanhoja selaimia.

13. Susy

Susy on automaattinen verkkojärjestelmä, jonka avulla voit rakentaa web-asettelua mihin tahansa haluttuun sarakkeeseen. Se antaa sinulle vapauden ja joustavuuden rakentaa valintasi. Se pystyy käsittelemään, onko suunnittelussa 5, 12, 24, 48 tai eriarvoista saraketta.

14. Metro UI

Metro UI on 12-verkkoon perustuva kehys, joka on saanut inspiraationsa Windows 8 Metro -tyylistä käyttöliittymästä. Se on erittäin helppokäyttöinen ja siinä on tyyliä yhteisiä komponentteja, kuten painiketta, laattaa, valikkoa, päivämääränvalitsinta ja paljon muuta. Voit myös aloittaa helposti portaalin mallin.

15. HTML KickStart

HTML KickStart on erittäin vähärasvainen HTML-, CSS- ja Javascript-kotelo erittäin nopealle web-kehitykselle. HTML KickStart kehitettiin Twitterin käynnistysstrapin perusteella Font Awesome -kuvakkeen tuella. Valmiusvalikosta, luettelosta, taulukoista, painikkeista, ruudukkojärjestelmästä ja monista erinomaisista elementeistä voit tallentaa Web-projektin luomisprosessin jopa 10 tuntia tai jopa enemmän.

16. Simple Grid

Simple Grid on erittäin kevyt ja reagoiva verkkojärjestelmä. Se ei ole kuin muut kehykset, joissa on kyseinen hieno painike, valikko, pöytä jne., Simple Grid tarjoaa vain puhtaan ruudukon. Ruudukon ominaisuus perustuu 1140 px -näytön kokoon, jossa on 12 saraketta, joita voit muokata, jotta saat parhaan mahdollisen asettelun.

17. Säätiö

Säätiö on todennäköisesti Twitterin Bootstrapin kovin kilpailija. Se on hyvin dokumentoitu, vakaa, joustava ja avoimen lähdekoodin kehys. Siinä on monia hyödyllisiä työkaluja, jotka mahdollistavat nopeammin reagoivan ja mobiilin ensimmäisen web-projektin. Se tukee lähes kaikkea saatavilla olevaa selainta, paitsi IE7. Vaikka monet kehittäjät käyttävät enimmäkseen vain säätiötä HTML: lle ja CSS: lle, mutta sinulla on mahdollisuus siirtää se Sassin ja Railsin kanssa .

18. Materiaalin käyttöliittymä

Materiaalin käyttöliittymä on toinen kehys, joka toteuttaa materiaalisuunnittelua . Ainoa asia, joka erottaa sen materiaalista, on se, että rakentaa React Javascript -kirjaston rakkaus Facebookista. Siinä on monia kauniita käyttöliittymäkomponentteja, joita voit käyttää vapaasti Web-sivulla.

19. Pintamaali

TopCoat on Adobe-tiimin vankka etukäteen kehitetty kehys, jossa kehitetään mielessä nopeita web-sovelluksia. Jokainen TopCoatin yksityiskohta on optimoitu suorituskyvyn priorisointiin. Se tarjoaa myös muokattavan teeman, avoimen lähdekoodin fontin ja myös PSD-käyttöliittymän.

20. Muste

Ink on front-end-kehys, joka kehitetään nopeammalle käyttöliittymäkehitykselle HTML-, CSS- ja Javascript-ohjelmien avulla, aivan kuten Bootstrap tekee. Voit luoda moderneja asetteluja helposti joidenkin uudelleenkäytettävien liitäntäelementtien, kuten taulukon, välilehtien, datanvalitsimen, modaalin, lajiteltavan luettelon, puunäkymän, gallerian, lomakkeen validatorin ja muiden avulla. Se mahdollistaa myös DOM-manipulaation, viestintävälineet ja hienot sivuvaikutukset JS Core -moottorilla.

21. Onsenin käyttöliittymä

Onsen UI on hybridikehys, joka toimii hyvin PhoneGapin ja Cordovan kanssa. AngularJS, jQuery, Font Awesome ja TopCoat perustana, Onsen UI voi olla lupaava työkalu hämmästyttävien mobiilisovellusten kehittämiseen. Onsen-käyttöliittymä voi auttaa mobiiliohjelmien rakentamisessa helposti käyttämällä Web-komponenttien käsitettä.

Kumpi on suosikkisi Bootstrap-vaihtoehto? Kerro meille alla olevista kommenteista.