de Henrik Ståhl

Recent am decis să încerc un cadru CSS. Ca jurnalist, am fost învățat să lucrez de la bază, să fac lucrurile temeinic și să nu „împrumut” niciodată lucruri de la alții (în industria știrilor, asta este considerat plagiat). Prin urmare, am fost destul de reticent în a folosi cadre de când am început călătorie de codificare. Pur și simplu pentru că am simțit că ar fi ca înșelăciunea, dacă știi la ce mă refer.

Nu aș fi putut să mă înșel mai mult.

Să începem cu începutul. După ce am experimentat un pic pe cont propriu cu filmul ca fundal pe ecran complet – apropo, o provocare foarte distractivă și interesantă – am vrut mai mult conținut real cu care să lucrez înainte de a mă scufunda mai întâi Bulma, un cadru modern bazat pe Flexbox creat de Jeremy Thomas.

De aceea am decis în cele din urmă nu să experimentez cu Bulma pe mine Mai Codul site-ul web.

În schimb, am ales să reproiectez un site web pe care l-am creat pentru formația mea de rock suedeză acum dispărută Evangeliet (suntem într-o pauză din 2014).

În această poveste, vă voi spune de ce m-am simțit agresat de PHP, cum am eșuat și am eșuat din nou în ciuda citirii documentației de mai multe ori și ce am învățat în cele din urmă, înșelând totul.

Noua pagină de start

Implementasem deja o primă iterație a unei pagini frontale cu videoclip pe ecran complet ca fundal și o simplă bară de navigație, așa că primul lucru pe care l-am făcut a fost să înlocuiesc bara de navigare oarecum urâtă cu o navigație Bulma.

Adăugarea navului nu a fost deosebit de grea. Cel puțin nu după ce ați citit documentație de o grămadă de ori. Dar videoclipul pe ecran complet ca fundal a fost puțin mai complicat. După câteva experimentări infructuoase cu diferite elemente de aspect Bulma, cum ar fi .hero și .container is-fluid, Am creat un CSS personalizat pentru a gestiona fundalul ecranului complet:

Calatoria mea in cadrul Bulma CSS
CSS-ul meu personalizat.

A mers! Cel puțin pe desktop. De îndată ce mi-am luat telefonul pentru a-l verifica într-o fereastră de vizualizare mai mică, am aflat rapid că fusesem pedepsit brutal de abordarea mea învechită pentru prima dată pe desktop:

Calatoria mea in cadrul Bulma CSS
Imaginea GIF pe care am făcut-o nu a suprascris videoclipul de pe mobil.

Și, după cum puteți vedea, am pus accidental bara de navigare și videoclipul de fundal pe ecran complet separat sections în documentul HTML, rezultând ca primul să fie detașat de acesta din urmă.

Cu toate acestea, am fost motivat să merg mai departe, așa că l-am lăsat așa cum era deocamdată.

Pagina audio

Apoi, am vrut să creez o pagină audio îngrijită. Pagina în sine este destul de simplă: este compus din trei „blocuri” de albume cu liste Spotify. În primul rând, am creat un fluid container cu o imagine:

<div class="container is-fluid">  <figure class="image">    <img src="https://www.freecodecamp.org/smoke.jpeg" alt="Evangeliet">  </figure></div>

Apoi, am scanat Bulma documentație în speranța de a găsi o componentă care să se potrivească nevoilor mele. În cele din urmă m-am stabilit pe un card:

<div class="card">          <div class="card-image">            <figure class="image is-square">              <img src="https://www.freecodecamp.org/Konturen.jpeg" alt="Konturen av en dröm">            </figure>          </div>          <div class="card-content">            <div class="media">              <div class="media-left">              </div>              <div class="media-content">                <p class="title is-4">Konturen av en dröm</p>                <p class="subtitle is-6">2013</p>              </div>            </div>

Am cuibărit apoi o .card-content clasa din interiorul card componentă:

<div class="content">              <iframe src="https://open.spotify.com/embed?uri=spotify:album:2bXUzHUmEZpXpTc6mNbQgH&theme=white" width="100%" height="380" frameborder="0" allowtransparency="true"></iframe>              <br>              <small><strong>UPC:</strong> 0885014300335</small>              <small><strong>Catalog Number:</strong> RU 27130</small>              <br>              <small><strong>Release date:</strong> 18 Dec 2013</small>            </div>          </div>        </div>

Pentru a obține un frumos Player Spotify, Am preluat un cod de încorporare de pe Dezvoltator Spotify documente. (Am schimbat lățimea din 300px la 100%, și tema de la negru la alb implicit, care se potrivește mai bine cu designul meu.)

Am creat trei cărți, am adăugat câteva informații despre album și le-am combinat column elemente. Rezultatul a fost plăcut:

Calatoria mea in cadrul Bulma CSS

Grila de imagini

După aceea, am vrut să creez un fel de pagină care să conțină imagini ale trupei. Am vrut ceva mai provocator decât o pagină standard „biografii ale membrilor trupei”, care nu s-ar fi diferit atât de mult de pagina audio.

Am scanat documentație încă o dată și am decis să fac ceva cu tiles element. Acest element este

„[a] țiglă unică element pentru a construi rețele bidimensionale de tip Metro, Pinterest sau orice altceva. ”

Am citit și am contemplat documentele de mai multe ori și am ajuns la o concluzie: deoarece încă mă consider un începător de markup, trebuia să fac niște experimente practice pentru a-mi înfășura capul în jurul plăcilor Bulma. Pentru că citind … ei bine, nu m-a dus nicăieri.

Așa că am copiat practic unul dintre exemplele din documente și am modificat conținutul. Am răsturnat lucruri, rupând efectiv Tot. Învățând înșelător, nu? 🙂

După ce m-am amestecat cu diferitele clase, am optat pentru o structură de grilă cu 3 coloane, compusă din diverse elemente de țiglă. Iată un exemplu de marcaj:

<div class="tile is-ancestor">        <div class="tile is-parent">          <article class="tile is-child box">            <figure>              <img src="https://www.freecodecamp.org/bilder/molotov.jpg">              <figcaption>                Henrik lägger mjuka riff i <strong>Molotov Studios</strong> 2010. Inspelningen rattades av Martin Karlsson.              </figcaption>            </figure>          </article>        </div>        <div class="tile is-parent">          <article class="tile is-child box">            <p class="title">Stadsmissionen&lt;/p>            <p class="subtitle">2009</p>            <figure>              <img src="/bilder/duo.jpg">              <figcaption>                På den här tiden var <strong>Evangeliet</strong> fortfarande en duo.                <br>                FOTO: Noelia Ivars Rico              </figcaption>            </figure>          </article>        </div>        <div class="tile is-parent">          <article class="tile is-child box">            <figure>              <img src="/bilder/bandbild2.jpg">              <figcaption>                Cristóbal, David, Henrik R och Henrik S i replokalen i Fruängen, januari 2011.              </figcaption>            </figure>          </article>        </div>      </div>

Exemplul de mai sus este trei imagini de top pe pagina web. Structura tile boxes pe pagină sunt mai mult sau mai puțin la fel ca în documente, cu excepția faptului că am adăugat imagini în toate casetele, cu excepția uneia. De asemenea, am inserat column elements și a adăugat trei imagini într-una din cutii.

Ceea ce a necesitat un pic de răbdare, dat fiind faptul că:

  1. Încă mă amețesc destul de ușor cu toate etichetele și etichetele finale când cuibăresc lucruri și
  2. Nu eram conștient de caracteristica vizuală din Atom evidențierea deschiderii și închiderii etichetelor HTML. ?? ‍

Aș fi putut alege pentru oricare dintre structurile diferite pe care le-am testat în timpul fazei experimentale, dar am considerat că aspectul furnizat în documentele Bulma este cel mai potrivit. De ce să remediem ceva care nu este stricat?

Și sincer, îmi place faptul că utilizatorii de dispozitive mobile văd câteva imagini inainte de ajungând la fragmentul de text. De aceea, am revenit la structura curentă după ce am oglindit inițial a doua coloană și am plasat cele cinci casete în partea de sus a paginii, poziționând efectiv caseta verticală înaltă în colțul din stânga sus de pe desktop.

1611307150 430 Calatoria mea in cadrul Bulma CSS

Pagina de contact

Nu în ultimul rând, am vrut o pagină de contact. Cu un formular de e-mail și totul.

Din nou, documentație a furnizat tot ce am nevoie în ceea ce privește marcarea. Un nebun. Din fericire, am încercat deja să învăț doar un pic de PHP cu singurul scop de a crea un formular online (pentru un alt site web, totuși).

Și eu nu reușisem. Greu.

Nu știu de ce alte persoane par să urască PHP, cred că este din diverse motive. Dar știu că personal, nu-mi place PHP pentru că m-am simțit agresat de asta.

Mă simțeam de parcă aș fi încercat Tot. Am citit o grămadă de postări pe blog și am analizat întregul W3Schools tutorial. Dar încă nu am înțeles o fracțiune din PHP.

Oricum, în timpul scurtei mele perioade de marauder PHP, am dat peste Formspree, un serviciu de formulare online creat de Rohit Datta.

Așa cum am folosit anterior Formspree atât pe Mai Codul site-ul web cu rezultate excelente, știam că va funcționa și pentru site-ul trupei mele.

Am adăugat field și label clasele necesare, precum și cele necesare form action=”https://formspree.io/[email protected]" method=”POST" clasa – și asta a fost!

După trimiterea formularului și confirmarea e-mailului meu, totul a funcționat ca un farmec.

1611307151 51 Calatoria mea in cadrul Bulma CSS

Am remediat dimensiunea formularului pe desktop cu câteva linii de CSS în foaia mea de stil personalizată, dar nu mult mai târziu. Formularul funcționa și am fost fericit.

Dar despre ??

Acum am rămas cu o singură provocare: cum pot face ca meniul hamburger de pe mobil să funcționeze efectiv? ?

Documentația Bulma a furnizat doar marcaje. Funcționalitatea în sine depindea de mine de remediat.

De atunci, Jeremy a actualizat documentele și le-a înlocuit pe cele vechi nav componentă cu noul navbar componentă. Iată un exemplu al celui vechi:

<!-- This "nav-toggle" hamburger menu is only visible on mobile -->  <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->  <span class="nav-toggle">    <span></span>    <span></span>    <span></span>  </span>  <!-- This "nav-menu" is hidden on mobile -->  <!-- Add the modifier "is-active" to display it on mobile -->  <div class="nav-right nav-menu">    <a class="nav-item">      Home    </a>    <a class="nav-item">      Documentation    </a>    <a class="nav-item">      Blog    </a>

Am câștigat mult teren în câteva luni, dar nu sunt încă suficient de confortabil cu HTML și CSS pentru a face saltul către o programare reală, așa că am vrut foarte mult să fac acest lucru fără să mă scufund în marea vastă de JavaScript.

Habar n-aveam cum.

De aceea, am optat pentru o bară de meniu orizontală până la cele mai mici puncte de vizualizare, după ceea ce s-au simțit ca ore de investigații. Tot ce trebuia să fac este să adaug is-mobile modificator la nav-item clasă:

<nav class="nav has-shadow">    <div class="container">      <div class="nav-left">        <a class="nav-item is-tab is-mobile" href="https://www.freecodecamp.org/">Hem</a>        <a class="nav-item is-tab is-mobile" href="http://www.freecodecamp.org/musik">Musik</a>        &lt;a class="nav-item is-tab is-mobile" href="http://www.freecodecamp.org/bandet">Bandet</a>        <a class="nav-item is-tab is-mobile is-active" href="http://www.freecodecamp.org/kontakt">Kontakt</a>      </div>  </nav>

Aș putea face acest lucru, deoarece meniul meu consta din doar patru componente: prima pagină, pagina audio, pagina benzii și pagina de contact. Din această cauză, totul era vizibil – și accesibil – chiar și în spații de vizualizare mai mici.

Peste o săptămână mai târziu, m-am împiedicat acest mare fir pe GitHub. Utilizatorul rudedogg am avut exact aceeași problemă ca și mine. Multe soluții diferite sunt furnizate în fir, cum ar fi

Da, pur și simplu aveți nevoie de un eveniment JS pentru a gestiona clicul și „adăugați” sau „eliminați” clasa „.is-active” din „# nav-menu”.

și

Reactează fragmentul (fără jQuery) asupra unui element cu className="nav-toggle" onClick={() => { let toggle = document.querySelector(".nav-toggle"); let menu = document.querySelector(".nav-menu"); toggle.classList.toggle("is-active"); menu.classList.toggle("is-active"); }}

Nimic nu părea să îmi satisfacă complet nevoia. Până când am derulat în jos și am găsit acest comentariu incredibil de umil, scurt și strălucit de shaneturner:

Un pic mai succint asupra articolului nav în sine: <span class="nav-toggle" onclick="document.querySelector('.nav-menu').classList.toggle('is-active'); “>

Nu sunt în poziția de a determina dacă aceasta este cea mai bună soluție, nici dacă este de fapt mai bună decât orice altă sugestie din firul GitHub. Dar am încercat-o și a funcționat imediat, chiar din cutie.

1611307152 744 Calatoria mea in cadrul Bulma CSS
Fotografie de Mike Wilson pe Unsplash.

Iteratii

Am terminat. Misiune completa.

S-a simțit atât de bine! Nu numai că am reușit să construiesc un întreg site web folosind Bulma – am învățat foarte multe despre scanarea HTML și CSS prin documentație și experimentarea diferitelor elemente.

Ceea ce se simțise mai întâi ca un munte de urcat s-a transformat într-un deal de dimensiuni medii și aici stăteam în vârf.

Nu am fost pe deplin mulțumit. Acum știam cum să folosesc Bulma pentru a construi un site web, dar site-ul pe care l-am construit nu era oricum aproape perfect. Apoi, am vrut să urc pe următorul deal, cel mai înalt, și să mă apropii puțin de perfecțiune. Cu alte cuvinte: folosind Bulma pentru a construi un site web de care sunt de fapt mândru.

Și am făcut.

Dar asta este o altă poveste.

Henrik Ståhl este un jurnalist cu mai mult de 15 ani de experiență, a devenit recent Product Owner la Bonnier News, colaborând cu dezvoltarea digitală a Dagens industri și Dagens Nyheter. În timpul liber, încearcă să învețe programarea.