Qasje

Ndërsa faqet e fillimit ofrojnë një turne prezantues të projektit dhe çfarë ofron ai, ky dokument fokusohet në arsyen pse ne bëjmë gjërat që bëjmë në Bootstrap. Ai shpjegon filozofinë tonë për të ndërtuar në ueb në mënyrë që të tjerët të mund të mësojnë nga ne, të kontribuojnë me ne dhe të na ndihmojnë të përmirësohemi.

Shihni diçka që nuk tingëllon mirë, apo ndoshta mund të bëhet më mirë? Hapni një çështje - do të donim ta diskutonim me ju.

Përmbledhje

Ne do të zhytemi në secilën prej këtyre më shumë gjatë gjithë kohës, por në një nivel të lartë, ja çfarë e drejton qasjen tonë.

• Komponentët duhet të jenë të përgjegjshëm dhe të lëvizshëm
• Komponentët duhet të ndërtohen me një klasë bazë dhe të zgjerohen nëpërmjet klasave të modifikuesve
• Gjendjet përbërëse duhet t'i binden një shkalle të përbashkët të indeksit z
• Kur është e mundur, preferoni një zbatim HTML dhe CSS mbi JavaScript
• Kurdoherë që është e mundur, përdorni shërbime mbi stilet e personalizuara
• Kurdoherë që është e mundur, shmangni zbatimin e kërkesave strikte HTML (përzgjedhës për fëmijë)

Të përgjegjshme

Stilet e përgjegjshme të Bootstrap janë ndërtuar për të qenë të përgjegjshme, një qasje që shpesh referohet si mobile-first . Ne e përdorim këtë term në dokumentet tona dhe kryesisht pajtohemi me të, por ndonjëherë mund të jetë shumë i gjerë. Ndërsa jo çdo komponent duhet të jetë plotësisht i përgjegjshëm në Bootstrap, kjo qasje e përgjegjshme ka të bëjë me zvogëlimin e tejkalimeve të CSS duke ju shtyrë të shtoni stile ndërsa porta e shikimit bëhet më e madhe.

Nëpër Bootstrap, këtë do ta shihni më qartë në pyetjet tona të medias. Në shumicën e rasteve, ne përdorim min-widthpyetje që fillojnë të aplikohen në një pikë të caktuar ndërprerjeje dhe kalojnë nëpër pikat më të larta të ndërprerjes. Për shembull, a .d-nonezbatohet nga min-width: 0pafundësia. Nga ana tjetër, a .d-md-nonezbatohet nga pika e ndërprerjes mesatare e lart.

Nganjëherë do ta përdorim max-widthkur e kërkon kompleksiteti i natyrshëm i një komponenti. Ndonjëherë, këto tejkalime janë funksionalisht dhe mendërisht më të qarta për t'u zbatuar dhe mbështetur sesa rishkrimi i funksionalitetit bazë nga komponentët tanë. Ne përpiqemi ta kufizojmë këtë qasje, por do ta përdorim herë pas here.

Klasat

Përveç Reboot-it tonë, një fletë stili e normalizimit të ndër-shfletuesve, të gjitha stilet tona synojnë të përdorin klasa si përzgjedhës. Kjo do të thotë largimi nga përzgjedhësit e tipit (p.sh., input[type="text"]) dhe klasat e jashtme të prindërve (p.sh., .parent .child) që i bëjnë stilet shumë specifike për t'u anashkaluar lehtësisht.

Si të tillë, komponentët duhet të ndërtohen me një klasë bazë që strehon çifte të zakonshme, që nuk duhet të anashkalohen me vlerë pronë-vlere. Për shembull, .btndhe .btn-primary. Ne përdorim .btnpër të gjitha stilet e zakonshme si display, padding, dhe border-width. Ne përdorim më pas modifikues si .btn-primarypër të shtuar ngjyrën, ngjyrën e sfondit, ngjyrën e kufirit, etj.

Klasat e modifikuesve duhet të përdoren vetëm kur ka disa veti ose vlera për t'u ndryshuar në variante të shumta. Modifikuesit nuk janë gjithmonë të nevojshëm, prandaj sigurohuni që po ruani linjat e kodit dhe po parandaloni ndryshimet e panevojshme gjatë krijimit të tyre. Shembuj të mirë të modifikuesve janë klasat tona të ngjyrave të temës dhe variantet e madhësisë.

shkallët z-indeks

Ekzistojnë dy z-indexshkallë në Bootstrap - elementë brenda një komponenti dhe komponentë mbivendosje.

Elementet përbërëse

• Disa komponentë në Bootstrap janë ndërtuar me elementë të mbivendosur për të parandaluar kufijtë e dyfishtë pa modifikuar borderpronën. Për shembull, grupet e butonave, grupet e hyrjes dhe faqet.
• Këta komponentë ndajnë një z-indexshkallë standarde 0prej 3.
• 0është e paracaktuar (fillestare), 1është :hover, 2është :active/ .active, dhe 3është :focus.
• Kjo qasje përputhet me pritshmëritë tona për përparësinë më të lartë të përdoruesit. Nëse një element është i fokusuar, ai është në pamje dhe në vëmendjen e përdoruesit. Elementët aktivë janë të dytët më të lartë sepse tregojnë gjendjen. Hover është i treti më i lartë sepse tregon qëllimin e përdoruesit, por pothuajse çdo gjë mund të pezullohet.

Komponentët e mbivendosjes

Bootstrap përfshin disa komponentë që funksionojnë si një mbivendosje e një lloji. Kjo përfshin, sipas rendit më të lartë z-index, listën rënëse, shiritat e navigimit fiks dhe ngjitës, modalet, këshillat e veglave dhe popovers. Këta komponentë kanë z-indexshkallën e tyre që fillon në 1000. Ky numër fillestar u zgjodh në mënyrë arbitrare dhe shërben si një zbutës i vogël midis stileve tona dhe stileve të personalizuara të projektit tuaj.

Secili komponent i mbivendosjes e rrit z-indexpak vlerën e tij në mënyrë të tillë që parimet e përbashkëta të ndërfaqes së përdoruesit të lejojnë elementët e përqendruar ose të pezulluar nga përdoruesi të qëndrojnë në pamje gjatë gjithë kohës. Për shembull, një modal është duke bllokuar dokumentet (p.sh., ju nuk mund të bëni asnjë veprim tjetër përveç veprimit të modalit), kështu që ne e vendosim atë mbi shiritat tanë të navigimit.

Mësoni më shumë rreth kësaj në faqen tonë të z-indexparaqitjes .

HTML dhe CSS mbi JS

Kurdoherë që është e mundur, ne preferojmë të shkruajmë HTML dhe CSS mbi JavaScript. Në përgjithësi, HTML dhe CSS janë më pjellore dhe më të arritshme për më shumë njerëz të të gjitha niveleve të ndryshme të përvojës. HTML dhe CSS janë gjithashtu më të shpejtë në shfletuesin tuaj sesa JavaScript, dhe shfletuesi juaj në përgjithësi ofron një pjesë të madhe të funksionalitetit për ju.

Ky parim është API-ja jonë JavaScript e klasit të parë duke përdorur dataatribute. Ju nuk keni nevojë të shkruani pothuajse asnjë JavaScript për të përdorur shtojcat tona JavaScript; në vend të kësaj, shkruani HTML. Lexoni më shumë rreth kësaj në faqen tonë të përmbledhjes së JavaScript .

Së fundi, stilet tona bazohen në sjelljet themelore të elementëve të zakonshëm të uebit. Kur është e mundur, ne preferojmë të përdorim atë që ofron shfletuesi. Për shembull, mund të vendosni një .btnklasë në pothuajse çdo element, por shumica e elementeve nuk ofrojnë ndonjë vlerë semantike ose funksionalitet të shfletuesit. Pra, në vend të kësaj, ne përdorim <button>s dhe <a>s.

E njëjta gjë vlen edhe për komponentët më kompleksë. Ndërsa ne mund të shkruajmë shtojcën tonë të vërtetimit të formës për të shtuar klasa në një element prind bazuar në gjendjen e një hyrjeje, duke na lejuar kështu të stilojmë tekstin të themi të kuq, ne preferojmë të përdorim :valid/ :invalidpseudo-elementet që na ofron çdo shfletues.

Shërbimet komunale

Klasat e shërbimeve - dikur ndihmëse në Bootstrap 3 - janë një aleat i fuqishëm në luftimin e fryrjes së CSS dhe performancës së dobët të faqes. Një klasë e dobishme është zakonisht një çift i vetëm, i pandryshueshëm pronë-vlerë i shprehur si një klasë (p.sh., .d-blockpërfaqëson display: block;). Apeli i tyre kryesor është shpejtësia e përdorimit gjatë shkrimit të HTML dhe kufizimi i sasisë së CSS të personalizuar që duhet të shkruani.

Në mënyrë të veçantë në lidhje me CSS-në e personalizuar, shërbimet mund të ndihmojnë në luftimin e rritjes së madhësisë së skedarit duke reduktuar çiftet më të shpeshta të vlerës së pronës tuaj në klasa të vetme. Kjo mund të ketë një efekt dramatik në shkallë në projektet tuaja.

HTML fleksibël

Ndonëse nuk është gjithmonë e mundur, ne përpiqemi të shmangim të qenit tepër dogmatik në kërkesat tona të HTML për komponentët. Kështu, ne fokusohemi në klasat e vetme në përzgjedhësit tanë CSS dhe përpiqemi të shmangim përzgjedhësit e menjëhershëm të fëmijëve ( >). Kjo ju jep më shumë fleksibilitet në zbatimin tuaj dhe ndihmon për ta mbajtur CSS-në tonë më të thjeshtë dhe më pak specifike.

Konventat e kodit

Udhëzuesi i kodit (nga bashkë-krijuesi i Bootstrap, @mdo) dokumenton se si ne shkruajmë HTML dhe CSS tonë në Bootstrap. Ai specifikon udhëzime për formatimin e përgjithshëm, parazgjedhjet me sens të përbashkët, urdhrat e pronave dhe atributeve dhe më shumë.

Ne përdorim Stylelint për të zbatuar këto standarde dhe më shumë në Sass/CSS tonë. Konfigurimi ynë i personalizuar i Stylelint është me burim të hapur dhe i disponueshëm për t'u përdorur dhe zgjeruar nga të tjerët.

Ne përdorim vnu-jar për të zbatuar HTML standarde dhe semantike, si dhe për të zbuluar gabimet e zakonshme.