Lähestyä

Aloitussivuilla esitellään projektia ja sen tarjontaa, mutta tässä asiakirjassa keskitytään siihen, miksi teemme asioita, joita teemme Bootstrapissa. Se selittää filosofiaamme rakentaa verkkoa, jotta muut voivat oppia meiltä, ​​osallistua kanssamme ja auttaa meitä kehittymään.

Näetkö jotain, mikä ei kuulosta oikealta, tai kenties voitaisiin tehdä paremmin? Avaa ongelma – keskustelemme siitä mielellämme kanssasi.

Yhteenveto

Sukellaan jokaiseen näistä tarkemmin läpi, mutta korkealla tasolla, tämä ohjaa lähestymistapaamme.

• Komponenttien tulee olla responsiivisia ja mobiiliensimmäisiä
• Komponentit tulee rakentaa perusluokilla ja laajentaa modifier-luokilla
• Komponenttien tilojen tulee noudattaa yhteistä z-indeksiasteikkoa
• Aina kun mahdollista, suosi HTML- ja CSS-toteutusta JavaScriptin sijaan
• Aina kun mahdollista, käytä apuohjelmia mukautettujen tyylien sijaan
• Aina kun mahdollista, vältä tiukkojen HTML-vaatimusten pakottamista (lapsivalitsimet)

Responsiivinen

Bootstrapin responsiiviset tyylit on rakennettu reagoiviksi, lähestymistapaa, jota usein kutsutaan mobiililähtöisyydeksi . Käytämme tätä termiä asiakirjoissamme ja olemme suurelta osin samaa mieltä sen kanssa, mutta toisinaan se voi olla liian laaja. Vaikka kaikkien komponenttien ei tarvitse olla täysin responsiivisia Bootstrapissa, tämä reagoiva lähestymistapa tarkoittaa CSS-ohitusten vähentämistä pakottamalla sinua lisäämään tyylejä näkymän kasvaessa.

Bootstrapissa tämä näkyy selkeimmin mediakyselyissämme. Useimmissa tapauksissa käytämme min-widthkyselyitä, jotka alkavat päteä tietystä keskeytyskohdasta ja jatkavat korkeampien keskeytyskohtien läpi. Esimerkiksi a .d-nonekoskee min-width: 0äärettömään. Toisaalta a .d-md-nonekoskee keskipitkästä keskeytyskohdasta ylöspäin.

Joskus käytämme, max-widthkun komponentin luontainen monimutkaisuus vaatii sitä. Toisinaan nämä ohitukset ovat toiminnallisesti ja henkisesti selkeämpiä toteuttaa ja tukea kuin ydintoimintojen uudelleenkirjoittaminen komponenteistamme. Pyrimme rajoittamaan tätä lähestymistapaa, mutta käytämme sitä aika ajoin.

Luokat

Lukuun ottamatta Rebootia, selainten välistä normalisointityylitaulukkoa, kaikki tyylimme pyrkivät käyttämään luokkia valitsimina. Tämä tarkoittaa, että vältät tyyppivalitsimia (esim. input[type="text"]) ja ylimääräisiä yläluokkia (esim. .parent .child), jotka tekevät tyyleistä liian erityisiä ohitettavaksi.

Sellaisenaan komponentit tulisi rakentaa perusluokilla, joissa on yhteisiä, ei ohitettavia ominaisuus-arvo-pareja. Esimerkiksi .btnja .btn-primary. Käytämme .btnkaikkia yleisiä tyylejä, kuten display, paddingja border-width. Käytämme sitten muokkaajia, kuten .btn-primaryvärin, taustavärin, reunuksen värin jne. lisäämiseen.

Muokkausluokkia tulisi käyttää vain, kun useissa muunnelmissa on useita muutettavaa ominaisuuksia tai arvoja. Muokkaukset eivät aina ole välttämättömiä, joten varmista, että todella tallennat koodirivejä ja estät tarpeettomat ohitukset niitä luodessasi. Hyviä esimerkkejä muuntajista ovat teemaväriluokat ja kokovariantimme.

z-indeksi asteikot

Bootstrapissa on kaksi z-indexasteikkoa: komponentin sisällä olevat elementit ja peittokomponentit.

Komponenttielementit

• Jotkut Bootstrapin komponentit on rakennettu päällekkäisillä elementeillä kaksoisreunusten estämiseksi ominaisuutta muokkaamatta border. Esimerkiksi painikeryhmät, syöttöryhmät ja sivutus.
• Näillä komponenteilla on yhteinen z-indexstandardiasteikko 0.3
• 0on oletusarvo (alkuperäinen), 1on :hover, 2on :active/ .active, ja 3on :focus.
• Tämä lähestymistapa vastaa odotuksiamme korkeimmasta käyttäjäprioriteettista. Jos elementti on kohdistettu, se on näkyvissä ja käyttäjän huomiossa. Aktiiviset elementit ovat toiseksi korkeimmat, koska ne osoittavat tilaa. Hover on kolmanneksi korkein, koska se osoittaa käyttäjän aikomusta, mutta lähes mitä tahansa voidaan siirtää.

Päällystyskomponentit

Bootstrap sisältää useita komponentteja, jotka toimivat jonkinlaisena peittokuvana. Tämä sisältää suurimman järjestyksessä z-indexpudotusvalikot, kiinteät ja tarttuvat navigointipalkit, modaalit, työkaluvihjeet ja ponnahdusikkunat. Näillä komponenteilla on oma z-indexasteikkonsa, joka alkaa 1000. Tämä aloitusnumero valittiin mielivaltaisesti ja se toimii pienenä puskurina tyyliemme ja projektisi mukautettujen tyylien välillä.

Jokainen peittokuvakomponentti lisää z-indexhieman arvoaan siten, että yleiset käyttöliittymäperiaatteet sallivat käyttäjälle kohdistetut tai leijuvat elementit pysyvät näkyvissä koko ajan. Esimerkiksi modaali estää asiakirjan (esim. et voi tehdä muita toimia paitsi modaalin toimintoa), joten laitamme sen navigointipalkkiemme yläpuolelle.

Lisätietoja tästä on z-indexasettelusivullamme .

HTML ja CSS JS:n yli

Aina kun mahdollista, kirjoitamme mieluummin HTML:n ja CSS:n JavaScriptin sijaan. Yleisesti ottaen HTML ja CSS ovat tuotteliaampia ja saatavilla useammille ihmisille eri kokemustasoilla. HTML ja CSS ovat myös nopeampia selaimessasi kuin JavaScript, ja selaimesi tarjoaa yleensä paljon toimintoja sinulle.

Tämä periaate on ensiluokkainen dataattribuutteja käyttävä JavaScript API. Sinun ei tarvitse kirjoittaa lähes mitään JavaScriptiä käyttääksesi JavaScript-laajennuksiamme. kirjoita sen sijaan HTML. Lue lisää tästä JavaScript - esittelysivultamme .

Lopuksi tyylimme perustuvat yleisten verkkoelementtien peruskäyttäytymiseen. Aina kun mahdollista, käytämme mieluummin sitä, mitä selain tarjoaa. Voit esimerkiksi laittaa .btnluokan lähes mille tahansa elementille, mutta useimmat elementit eivät tarjoa semanttista arvoa tai selaimen toimintoja. Joten sen sijaan käytämme kirjaimia <button>s ja <a>s.

Sama koskee monimutkaisempia komponentteja. Vaikka voisimme kirjoittaa oman lomakkeen vahvistuslaajennuksen lisätäksemme luokkia yläelementtiin syötteen tilan perusteella, jolloin voimme muotoilla tekstin esimerkiksi punaiseksi, käytämme mieluummin jokaisen selaimen tarjoamia :valid/ :invalidpseudoelementtejä.

Apuohjelmat

Utility-luokat – entiset Bootstrap 3:n apulaiset – ovat tehokas liittolainen torjuttaessa CSS:n turvotusta ja huonoa sivun suorituskykyä. Hyödyllisyysluokka on tyypillisesti yksi, muuttumaton ominaisuus-arvo-pari, joka ilmaistaan ​​luokkana (esim. .d-blockedustaa display: block;). Niiden ensisijainen vetovoima on käytön nopeus HTML-kirjoituksen aikana ja kirjoitettavan mukautetun CSS:n määrän rajoittaminen.

Erityisesti mukautetun CSS:n osalta apuohjelmat voivat auttaa torjumaan tiedostokoon kasvamista vähentämällä yleisimmin toistuvat ominaisuus-arvo-parit yksittäisiksi luokiksi. Tällä voi olla dramaattinen vaikutus projekteissasi.

Joustava HTML

Vaikka se ei ole aina mahdollista, pyrimme välttämään liian dogmaattisia komponentteja koskevissa HTML-vaatimuksissamme. Siksi keskitymme yksittäisiin luokkiin CSS-valitsimissamme ja yritämme välttää välittömiä lapsivalitsimia ( >). Tämä antaa sinulle enemmän joustavuutta toteutuksessa ja auttaa pitämään CSS:n yksinkertaisena ja vähemmän täsmällisenä.

Koodisopimukset

Koodiopas (Bootstrapin yhteisluojalta, @mdo) dokumentoi, kuinka kirjoitamme HTML- ja CSS-koodimme Bootstrapiin. Se määrittelee ohjeet yleiselle muotoilulle, tervettä järkeä oleville oletuksille, ominaisuus- ja attribuuttijärjestyksille ja muille.

Käytämme Stylelintiä näiden ja muiden standardien täytäntöönpanoon Sass/CSS:ssämme. Mukautettu Stylelint-kokoonpanomme on avoimen lähdekoodin ja muiden käytettävissä ja laajennettavissa.

Käytämme vnu-jaria standardin ja semanttisen HTML:n pakottamiseen sekä yleisten virheiden havaitsemiseen.