Kuinka käynnistää HTML-koodisi
Kaikkien kehittäjien ensisijainen tavoite on nopeampi kehitystyö, varsinkin pikakäynnistys. Viime vuosien aikana on saatavilla kymmeniä kehyksiä, joiden tavoitteena on saada prototyyppejämme muutamassa minuutissa.
Valitettavasti monet näistä kehyksistä päivittyvät nopeasti, koska hankevaatimukset kehittyvät ja niitä on päivitettävä tai vaihdettava.
Jos etsit äskettäin kehystä, joka ratkaisee ongelmat, joissa vanhemmat ratkaisut kohtaavat, mutta silti maksimoivat työnkulkuasi, et voi mennä paljon vikaan HTML Kickstart.
Grid
Verkko on yksi puitteiden tärkeimmistä näkökohdista, varsinkin kun joustava verkko määrittelee, miten sivusto voi olla reagoiva.
HTML Kickstart tarjoaa meille mahdollisuuden joustavaan verkkoon tai vakiomuotoiseen (ei-joustavaan) verkkoon - vaikka ei ole selvää, kun käytät jälkimmäistä, kun otetaan huomioon mobiililaitteiden lisääntyvä hallitseva asema.
Jos haluat luoda joustavan verkon, jossa on kaksi samanarvoista saraketta, käytämme:
Content HereContent HereKuten näette, kaikki, mitä olemme tehneet, on lisätä joitain yksinkertaisia luokkia kolmeen div: een. Jos haluat mieluummin joustamattoman verkon, sinun tarvitsee vain poistaa flex-luokan nimi ulkoisesta divista.
(Huomaa, että taipuisa verkko ulottuu koko näytön leveydelle, kun taas ei-joustavassa ruudukossa on maksimileveys 1024 pikseliä.)
Edellä mainittujen luokkien lisäksi on useita avustajia, joita voimme käyttää esimerkiksi:
- näytä työpöydälle ja piilota työpöydälle näiden luokkien kanssa, voit päättää, haluatko nähdä ruudukon näkyvän pöytätietokoneessa.
- show-tabletti ja piilotabletti, sama käsite koskee täällä, mutta tablet-laitteissa.
- show-puhelimeen ja piilotettuun puhelimeen , nämä luokat edellyttävät näkyvyyttä tällä kertaa älypuhelimissa.
Jos halusimme piilottaa kaksi pylväsverkostoamme esimerkiksi älypuhelimilla, käytämme esimerkiksi tätä koodia:
suunnistus
HTML Kickstart antaa meille kolme valikkovaihtoehtoa: pysty vasen, pystysuora oikea ja vaaka.
Haluttu versio on useimmiten horisontaalinen valikko. Sen koodaamiseksi tarvitsemme vain järjestämättömät luettelot:
Jos haluat pystysuoran vasemman valikon, lisää vain pystysuora avautumaan ul, ja jos haluat pystysuoran oikean valikon, lisää pystysuorat oikeudet seuraavasti :
Se on todella yksinkertaista koodata reagoivat valikot HTML Kickstartilla.
Oletustyylit
HTML Kickstart antaa sinulle erinomaiset perustyylit pois käytöstä. On selvää, että haluat tarkentaa niitä projektiin, mutta nopean prototyypin tekemiseen ne ovat enemmän kuin tarpeeksi.
Kun kyseessä on typografia HTML KickStart käyttää Steve Matteson n Arimo oletuksena. Näet koko valikoiman asetuksia tässä.
Button-tyylit ovat aina keskittymiskeskuksen kaikessa kehyksessä, ja HTML Kickstartissa on painikkeita kaikissa muodoissa ja kokoina. Sinun ei tarvitse edes käyttää luokkia tähän, luo vain painiketunniste ja tyylejä käytetään automaattisesti.
Jos haluat, että nappityylejä käytetään ankkurointitunnisteessa, sinun tarvitsee vain lisätä siihen painikeryhmä :
On olemassa myös useita erilaisia tyylejä, joita voimme soveltaa:
Lopuksi meillä on myös mahdollisuus luoda napinpalkki, jossa on samanlainen syntaksi kuin vaakasuorassa valikossa:
kuvat
HTML Kickstart auttaa parantamaan UX: ia luomalla ponnahdusikkunoita gallerioille ja kuville. Se on paljon parempi ratkaisu kuin uuden ikkunan avaaminen.
Täysin toimivan JavaScript-pohjaisen ponnahdusikkunan luominen tarvitsemme vain seuraavan koodin:
Se on helppo toteuttaa, etkä tarvinnut yhtä JavaScript-riviä.
Kuvia on myös hienoja avustajia, kuten kuvatekstiä. Tämä kuva luokassa oleva kuva näyttää kuvan otsikon tyylikkäisenä kuvatekstinä:
Meillä on myös oikeanpuoleiset ja vasemmanpuoleiset luokat, joiden avulla voimme flooida kuvia vasemmalle ja oikealle. (HTML Kickstart lisää hieman marginaalia niin, että kuvat eivät vastaa tekstiä.)
Ja tietenkin myös HTML Kickstart tarjoaa yksinkertaisia kuvaesityksiä. Se käyttää BXSlider liukusäädin käsittelemään tätä.
Yksinkertaisen liukusäätimen koodi näyttää jotain tällaiselta:
A Content Slider
This slider handles HTML content as well as images.
Liukusäädin on kosketusnäyttö mobiililaitteille, ja uudestaan et tarvinnut yhtä JavaScript-riviä.
Lomakkeet
Viimeinen asia, jonka haluan esitellä, on lomakkeita. Lomakkeet ovat elintärkeitä mille tahansa kehykselle, koska ne ovat yksi vaikeimmista asioista verkkosivuilla.
HTML Kickstart säilyttää yksinkertaisuutensa lomakkeiden suhteen ja pystysuora muoto voidaan luoda yksinkertaisesti:
Kuten näette, minulla ei ole tuskin tarvinnut käyttää mitään luokkia tällä lomakkeella. Kaikki, mitä olen tehnyt, on lisätä luokan pystysuora yläosaan niin, että lomakekomponentteja ei käsitellä inline-muodossa.
Yksi suosituimmista HTML Kickstart -osista on yksinkertaisia virheilmoituksia, joita käytetään lomakkeiden kanssa:
johtopäätös
On olemassa runsaasti vaihtoehtoja, jotka tulevat HTML Kickstartilla, olemme todella naarmuuntaneet pelin; on valtava joukko kuvakkeita, työkaluvideoita ja jopa välilehtiä.
HTML Kickstartin todellinen vahvuus on sen koodin yksinkertaisuus. Ulkomaalaisten divien ja luokkien puuttuminen tekee siitä erinomaisen ajan säästämisen, vähemmän koodia tarkoittaa vähemmän virheitä. Jos aiot aloittaa oman HTML-koodin koodaamisen tyhjästä, tai jos etsit yksinkertaista kehystä, joka nopeuttaa prototyyppien suunnittelua HTML Kickstart on erinomainen vaihtoehto.
Oletko käyttänyt HTML Kickstartia? Haluatko eri puitteet? Kerro meille kommentit.