de ZAYDEK

0-60 în 1.9s?

Cum să construiești un? Pagina de lansare Tesla receptivă cu Bulma CSS

A accelera apariția designului web durabil

Înainte de a ajunge la articol, vreau doar să vă spun că construiesc un produs și mi-ar plăcea să colectez câteva date despre cum să servesc mai bine dezvoltatorii web. Am creat un chestionar scurt pentru a verifica înainte sau după citirea acestui articol. Vă rugăm să verificați – mulțumesc! Și acum, înapoi la programarea noastră programată obișnuită.

Buna internet! (Bună, Elon!)

Sunt aici pentru a vă dezabuza de convingerea că crearea de site-uri web trebuie să fie dificilă. Mai mult, în doar câteva minute, noi, muritorii, vom învăța cum să construim o pagină de lansare Tesla frumoasă și (!) Receptivă folosind Bulma.

Bulma ?! Bulma este un cadru CSS și creat de @jgthms. ?

Am predat, de asemenea, un curs gratuit Bulma CSS complet pe Scrimba.com, unde construim aceste ️? modele. Clinge aici pentru a te înscrie gratuit! ?

Scrimba.com este o platformă de generație următoare pentru dezvoltatorii front-end pentru a înregistra și partaja site-urile lor web ca screencasts interactive! ?

Bulma? ¯ _ (ツ) _ / ¯

Bulma rezolvă o mulțime de probleme – multe. Fie că aveți nevoie de o componentă vizuală, fie că doriți să înțelegeți cum ar putea fi codificată o componentă, cu cele mai bune practici și cea mai bună documentație din clasă, Bulma este aici să vă ajute! ? ‍?

Bulma nu este nici măcar versiunea 1.0 și are adoptare majoră cu 150K + descărcări o lună și 26K + stele pe GitHub. Gândiți-vă la Bulma ca la un concurent al Bootstrap, în ciuda faptului că este * doar * CSS. ? Uite ma, nu YavaScript!

Cum acționează Bulma?

Bulma folosește mai multe tehnici pentru a crea o interfață coezivă pentru dezvoltatori. Trebuie doar să ne preocupăm să descriem designul site-ului nostru web folosind clase semantice – nu elemente – sau cu alte cuvinte, șabloane idiomatice.

Aceste șabloane semantice pot fi considerate ca elemente de interconectare folosite pentru a construi site-uri web rapid! ⚡️ Aceste componente sunt, de asemenea, receptive imediat, ceea ce înseamnă că ne putem concentra mai mult pe conținutul nostru decât pe cod.

Confuz? Start ? here pentru a învăța mai întâi fundamentele Bulmei.

Ce zici de asta ? proiecta?

Acest design poate fi mai bine înțeles ca trei părți:

☝️Fundal receptiv
✌️ Componente Bulma + modificatori
? CGrila SS

Uită-te puțin mai aproape … vezi ceva? fundal nu este continuu! ? Aceasta nu este o greșeală; echipa Tesla optimizată pentru desktop, tabletă și mobil. Având ca bază, vom adăuga Bcomponente și modificatori ulma, apoi folosiți CGrila SS pentru a realiza un design complex și receptiv pentru specificații.

☝️ Fundal receptiv

Acestea sunt real imagini de fundal I ??????? din tesla.com! ? ‍☠️ Sooo … cum construim un fundal receptiv? Folosind interogări media, obv-uri! Interogările media ne permit, în anumite circumstanțe, să înlocuim CSS.

Și interogările media sunt puternice; putem suprascrie CSS în funcție de raportul de aspect redat al site-ului, de raportul de aspect al dispozitivului sau simplu și simplu: lățimea redată a site-ului web. Da – hai să mergem cu asta.

În primul rând, începem cu una dintre componentele Bulma, .heroși utilizați unul dintre modificatorii săi, is-fullheight, pentru a crea o secțiune pe ecran complet. Apoi, alocăm diferite medii pentru lățimi comune folosind interogări media:

Excelent – așa că acum site-ul nostru schimbă fundaluri la 1024px și 768px. Uneori, când se întâmplă acest lucru, există un fulger de alb, deci black îl ascunde. Și center și cover doar ajută la alinierea și focalizarea imaginii.

Crezi sau nu, background este prescurtare pentru 8 proprietăți CSS😕

1.️ background-clip
2. background-color
3. background-image
4. background-origin
5. background-position
6. background-repeat
7. background-size
8. background-attachment

Am folosit -color, -image, -position, și -size!

✌️ Componente Bulma + modificatori

Aici devine interesant Bulma. Care este pagina de lansare reală ?!

…

…

…

Cea stângă este autentic! ٩ (; ʘ¿ʘ;) ۶ Așteptați … cum poate Bulma să fie atât de versatilă? Ei bine – îți amintești modificatorii? Da, cu suficient modificatori la dispoziția noastră, putem crea o estetică variată, chiar și fără a edita sursa Bulma.

Acum, fără alte întrebări, vă prezint pagina de lansare ca artă ASCII! ??

Puteți ignora ID-urile împachetate cu paranteze pentru moment. În afară de asta, acestea sunt câteva dintre cele disponibile Componente Bulma. Și imaginați-vă asta? Componentele Bulma sunt receptive, de asemenea! Whoa.

Rețineți că acest lucru este mult mai puțin concis decât implementarea efectivă, Vezi aici. Amestec modificatorii și codurile HTML străine pentru a arăta cum funcționează Bulma; conectăm componente împreună, la fel ca LEGO, dar pentru a proiecta o pagină web!

Și modificatorii sunt modul în care putem obține o estetică asemănătoare Tesla, în ciuda faptului că Bulma nu are nimic de-a face cu Tesla. Pe tot parcursul Codul, observați utilizarea * extinsă a has-* și is-*; asta ne oferă o estetică variată.

Puteți face clic? here pentru a afla mai multe despre componentele Bulma.

? Grila CSS

Avem nevoie de CSS Grid? Nu sunt sigur, （> ﹏

Hehehe … deci avem acte de identitate #a prin #e, cu #a fiind ceva marketing și #e fiind butonul „Rezervați acum”. Efectul dorit este că pe mobil ascundem butonul „Rezervă acum” de sub #b, #c, și #d.

3 …

2 …

1 …?

În primul diapozitiv, atribuim identificatori fiecăruia dintre ID-urile folosind grid-area. Apoi, comunicăm cu #grid * forma * grilei noastre folosind arta ASCII! ? Aceasta este grila implicită; pentru desktop și tabletă.

Ultimul – vă amintiți interogările media? DA! Tot ce trebuie să facem este să comunicăm forma rețelei noastre pentru mobil. Imaginați-vă acest lucru … scriem o singură interogare media pentru a anula forma grilei noastre pentru mobil. ? ⚡️

Codul interactiv complet este disponibil în cursul Bulma? here.

Sau … CUM SUNT DESPRE PORSCHE? !!? ?

Nikita Rudenko @rdnkta, care este nou în # 100DaysOfCode (!), a creat acest lucru după terminarea cursului și mi-a distribuit-o! Noroc! ?

Felicitări! Mulțumesc pentru lectură! 6 (^ ω ^) 9

Acum este un moment fenomenal ca nimeni altul pentru a intra în dezvoltarea front-end. Odată cu introducerea specificațiilor CSS precum Flexbox și Grila CSS, și cadre precum Bulma, construirea pentru web nu a fost niciodată mai accesibilă!

Îți place acest articol ?! Mai este încă un articol la fel! Faceți clic? hinainte!