Ogrom do ogarnięcia. Jak się nie zniechęcić?

Question

Lubię projektować layouty i umiem też je zakodować. Problem pojawia się, gdy ma być on responsywny. Ogrom powtarzania w @media screen. Patrzyłem na Bootstrapa, ale coś mnie w nim odpycha. Czy warto do strony składającej się z kilku podstron ładować Bootstrapa? Jak w nim nadpisywać klasy? np. żeby zrobić szerokość bloków pod swoje wymagania, zmienić wygląd menu itp. Może gdybym umiał go poznać lepiej...

Answer 1

Dlatego warto znać zasadę mobile-first. Na początku kodujesz wersję mobilną strony, później wracasz do normalnej rozdzielczości komputera i zmieniasz elementy - ale tylko te, które musisz. 

• [KURS BOOTSTRAPA]

• Jak stworzyć stronę w Responsive Web Design?

Te dwa linki powinny Ci pomóc - z czego ten drugi polecam obejrzeć kilka razy.

Answer 2

 Czy warto do strony składającej się z kilku podstron ładować Bootstrapa?

Odpowiedź brzmi: to zależy. Niemniej tego typu frameworki raczej są dla większych projektów albo w chwili, gdy chcemy na szybko postawić coś działającego. Sam BS nie zastąpi wiedzy o RWD, którą i tak trzeba mieć, żeby móc cokolwiek sensownego zrobić.

 Jak w nim nadpisywać klasy?

Najlepiej poznać używany w nim preprocesor, czyli Less/Sass. 

Answer 3

Dokładnie tak jak wyżej. Też nie chciałem zaczynać się uczyć Bootstrapa ale na szczęście się zmobilizowałem i są tego wyraźne efekty.

Osobiście mogę Ci polecić tą stronkę:

https://kursbootstrap.pl/category/bootstrap-3-2/

Na niej znajdziesz wszystko co potrzebne do pracy. Sam z niej korzystam do dziś. Myślę że najtrudniejsze to zrozumieć jak on dokładnie działa. Potem już z górki. Poświęć jakieś 2-3 dni na ogólne zrozumienie i powoli koduj! :)

Powodzenia!

Answer 4

Patrzyłem na Bootstrapa, ale coś mnie w nim odpycha.

Sam rzadko używam Bootstrapa i ciebie w pełni rozumiem. Kod potem w HTML to masakra. Najczęściej szablony tworzę w CSS od zera, dołączam tylko Normalize.css, a kod CSS piszę tak aby od początku strona była responsywna używając wartości procentów, a dla wrappera np.: max-width: 1200px. To tak w skrócie. Media queries to dla mnie też nie problem. Mój kod jest czystszy, krótszy i czytelniejszy.

Bonus:

         <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>

A co do responsywności w Bootstrapie to jest to bardzo proste:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }