CSS, Tailwind ili Bootstrap: šta da odaberem da stilizujem svoj veb projekat

CSS, Tailwinds i Bootstrap

Prije nekog vremena, moj kolega Diego je napisao nekoliko članaka (npr ovo) o okvirima za kreiranje web sadržaja, tačnije onima koji su odgovorni za obezbjeđivanje dizajna. Na kraju, web pretraživači razumiju HTML samo zbog strukture, CSS za dizajn i JavaScript da, kao što je moj učitelj rekao o ovome, animiraju sadržaj, iako postoje okviri kao što su Laravel ili Django koji izgleda govore suprotno. Izgledaju kao. Ono što ćemo danas uraditi je da objasnimo kada treba da izaberemo jednu ili drugu opciju za oblikovanje HTML sadržaja.

Iako su Tailwind i Bootstrap spomenuti u naslovu, ono što mislim pod tim nazivima je prije ono što neki smatraju sredinom između čistog CSS-a i odgovarajućeg okvira i kompletnog okvira. Oba su okvira, ali Bootstrap ima gotovo sve već urađeno, a Tailwind omogućava mnogo više prilagođavanja. Već predviđam jedan od razloga za izabrati jednu ili drugu opciju, ali počnimo s tim kada koristiti CSS.

Kada odabrati čisti CSS za svoju web stranicu

Čisti CSS je kada pišete sva pravila ručno koristeći selektore. Na primjer, kada želim da navigacijska traka ima crvenu pozadinu i veze da budu različite boje i centrirane, napisao bih nešto poput sljedećeg, pod pretpostavkom da ciljni pretraživač podržava ugniježđena pravila.

nav { background-color:red; boja:plava; margin:0; text-align: centar; a { padding: 10px; boja:bijela } }

Gore navedenom ipak bismo morali nešto dodati ako želimo da ta vrlo jednostavna – i mora se reći loše dizajnirana – navigacijska traka bude zalijepljena uz rubove, a to je neka tijelo dokumenta nema margine. Inače, pretraživači pokazuju granicu oko svega.

I tako sa svime.

  • Dobro:
    • Koristeći čisti CSS imamo potpunu kontrolu nad onim što stvaramo.
    • Ne moramo da dodajemo nekoliko fajlova da bi sve funkcionisalo, a još manje da instaliramo okvir u naš projekat.
  • Loše:
    • Ručno pisanje cijelog CSS-a može biti dobro za JEDAN JEDNOSTAVAN projekat, ali ne toliko ako je projekat složen ili moramo kreirati mnogo web stranica. Uvijek počinjati od nule je skupo, neplaćeno i zato postoje okviri.

Kada odabrati Bootstrap (ili neki drugi "pun" okvir)

Bootstrap i većina CSS – i ne-CSS – okvira su kreirani razmišljanje o produktivnosti. Obično imaju na umu filozofiju poznatu kao „piši manje, radi više“. Kao opšte pravilo, to su CSS fajlovi, a možda i JavaScript, koji imaju sve spremno za korišćenje.

Za razliku od čistog CSS-a, koji radi sa selektorima, Bootstrapom i drugim sličnim opcijama koriste klase koje su uključene u tag elementa. Na primjer, ako želimo da kreiramo zaglavlje tipa 1 (h1) sa plavim tekstom, crvenom pozadinom i unutrašnjim razdvajanjem, trebali bismo napisati nešto ovako:

Ovo je tekst

Ne znam da li ste primijetili da sam koristio "primarni" i "opasnost" za boje, a Bootstrap ih ima nekoliko za menije, dugmad i poruke. Ako želimo koristiti druge, moramo koristiti vlastiti CSS i prepisati Bootstrap pravila. To ili uredite .css datoteku okvira.

  • Dobro:
    • Postoji dokumentacija i primjeri za brzo kreiranje elemenata.
    • Odgovara i prvo mobilni.
    • Web stranice se mogu kreirati brzo, čak i bez znanja o Bootstrapu, ako uzmete primjere iz njegove dokumentacije.
  • Loše:
    • Kreiranje stranice sa Bootstrap-om i to brzo daje do znanja šta ste koristili za njen dizajn.
    • Vrlo malo prilagodljiv ako ne primjenjujete vlastita pravila i podešavanja.

Kada odabrati Tailwind

Tailwind je također okvir, ali mnogi ga stavljaju između čistog CSS-a i ostatka okvira jer nema svoj karakterističan stil. Čim ga instaliramo, vidjet ćemo stvari kao da su sva zaglavlja iste veličine, a to je zato što ima dobru resetovati tako da korisnik kontroliše sve. Da dobijemo zaglavlje tipa 1 iz primjera Bootstrap-a, Tailwinds od nas traži nešto poput ovoga:

Ovo je tekst

Postoje sličnosti i razlike s Bootstrap combo klasom. Na primjer, unutrašnja margina ili punjenje Isti je, svaka ima svoje veličine, ali istu sintaksu i klasu za centriranje teksta. Već što su boje različite. Dok Bootstrap podrazumevano uključuje samo neke boje koje su primarne, sekundarne, opasnost, upozorenje, itd., Tailwind nudi mnogo raznovrsniji raspon i možete postaviti boju sa do 9 različitih tonova. Da biste ih sve upoznali, vrijedi pročitati službena dokumentacija.

  • Dobro:
    • Kaže se da je lakši od drugih okvira.
    • Imamo svu kontrolu nad onim što dizajniramo; ne zavisimo od definisane baze.
    • Imena klasa više liče na čisti CSS.
  • Loše:
    • Njegova instalacija nije najjednostavnija. Iako se može koristiti sa CDN dodanim u oznaku glava, ovo se ne preporučuje za ozbiljan projekat.
    • Tailwind CSS je djelimično tekstualni predprocesor poput Sass-a i potrebna nam je ulazna datoteka koja će sve kompajlirati i prevesti u čisti CSS.
    • HTML nije baš čist; Element s mnogo stilova može imati ogromnu klasu, ali ovo ima rješenje, iako morate nauči to.

rešetka y savijati sa CSS okvirima

Ovo je i pozitivna stvar kod okvira i negativna stvar kod čistog CSS-a. Postoje lakša izdanja od drugih, i kontrolirati rešetka y savijati CSS može biti komplikovan. Frameworks je razmišljao o tome, a na primjer Bootstrap ima jednostavno rješenje bazirano na 12 kolona.

Pretpostavimo da imamo meni ili nešto slično sa 6 elemenata i želimo da budu raspoređeni u zavisnosti od širine ekrana, takođe poznatih kao vidno polje. Da biste to učinili sa čistim CSS-om, morate koristiti medijske upite, što je poput upita koje pretraživač postavlja o vrsti ekrana sa kojeg posjećujemo sadržaj. CSS bi uključivao @media za svaku širinu ekrana, a u svakom od njih bismo morali ponovo podesiti "mrežu". Bootstrap ovo rješava ovako:

tekst tekst tekst tekst tekst tekst

Prethodni razredi bi ukazivali na:

  • col-12: u "normalnoj" veličini, koju Bootstrap uzima za mobilne ekrane kao takve, svaki element će zauzimati ukupno (12/12), što će učiniti da postoji šest redova jedan ispod drugog koji zauzimaju cijelu širinu ekrana. Može se izostaviti, jer je to zadano ponašanje.
  • col-md-6- Na srednjim ekranima svaki element će zauzimati polovinu (6/12), tako da će biti dva na vrhu, dva u sredini i dva na dnu.
  • col-lg-4- Na velikim ekranima svaki element će zauzimati trećinu (4/12), tako da će biti tri na vrhu i tri na dnu.
  • col-xl-2- Na većim ekranima svaka stavka će zauzimati jednu šestinu (2/12), pa pošto postoji 6 stavki, biće prikazan red sa svih šest.

Mreža u Bootstrapu

Više informacija o grid-u u Bootstrapu.

zaključak

Okviri i ove vrste alata Oni su stvoreni da budu bolji, a imaju smisla, prije svega, kada trebamo efikasno proizvoditi. Kada morate da koristite mali CSS, verovatno je najbolje da se ne zaokupljate previše i da ga zalepite rukom. Kada želimo nešto brzo, a da ne brinemo previše o prilagođavanju, nešto poput Bootstrapa može biti rješenje. A ako želimo da imamo potpunu kontrolu, čak i ako moramo da radimo malo više, srednja tačka, Tailwind.


Ostavite komentar

Vaša e-mail adresa neće biti objavljena. Obavezna polja su označena sa *

*

*

  1. Odgovoran za podatke: AB Internet Networks 2008 SL
  2. Svrha podataka: Kontrola neželjene pošte, upravljanje komentarima.
  3. Legitimacija: Vaš pristanak
  4. Komunikacija podataka: Podaci se neće dostavljati trećim stranama, osim po zakonskoj obavezi.
  5. Pohrana podataka: Baza podataka koju hostuje Occentus Networks (EU)
  6. Prava: U bilo kojem trenutku možete ograničiti, oporaviti i izbrisati svoje podatke.