18 maja 2018

Frontend: Wykonanie szablonu strony korzystając z bootstrap 4

Witam, nie cierpię frontendu.

Zastanawiałem się, dlaczego ? Być może winna jest temu moja poprzednia firma która katowała nas frontendem ? W której ludzie bez znajomości technicznych, bez zmysłu i talentu kazali nam kodować jakieś bazgroły ? Pewnie tak 😉 Ale nie tylko dlatego.

Parę dni temu dostałem projekt do zakodowania. Tylko nie chcę znowu wchodzić w to samo bagno co kiedyś. Osoba zlecająca dała jasne wytyczne, między innymi szablon powinien przejść walidację W3C. Musi korzystać z najnowszego bootstrapa itd.

Fakt, że przez moje doświadczenie z frontendem, znienawidziłem go. W konsekwencji stałem się jaskiniowcem w tej dziedzinie.

Musiałem wyszukać kilka pomocnych informacji na google nim zacząłem prace nad nowym zleceniem 🙂

Poniżej opiszę wszystko dla takich jak ja, noobów frontendowych.

Zaczynamy:

1. Ściągam bootstrap 4 https://getbootstrap.com

– dla ultranoobów

2. Wykonujemy polecenia:

sudo apt-get install npm
npm install -g gulp-cli

3. Wchodzimy na adres: https://hackerthemes.com/kit/ i ściągamy paczkę.

4. Po rozpakowaniu możemy przejść w terminalu do katalogu z projektem i wpisumemy:

npm install

gulp watch

5. Gotowe

Okazuje się że wykonanie szablonu html + css może być szybkie i przyjemne.

Jeśli jesteś totalnie zielony w temacie kodowania stron, tworzenia szablonów, powyższe informacje mogą okazać się przydatne. Dzięki wykonaniu powyższych kroków będziemy mogli wykorzystać kilka bardzo przydatnych sztuczek, ale wszystkiego dowiesz się na stronie hackerthemes.com

Na koniec jedna informacja parafialna:

Pamiętaj, zaczynaj kodowanie od wersji mobile 😉 Gotowe klasy w bootstrapie opierają się o mobile, te zostają nadpisane odpowiednikami dla wyższych rozdzielczości.

Kończę szybki wpis o niczym oraz dla nikogo… Pozdrowienia.