[b.....j]

#webmastering #webdev #webstuff
Robię swój pierwszy projekt PSD to HTML przy wykorzystaniu Bootstrap'a (też pierwszy kontakt).
Mam kilka pytań, bo utknąłem w pewnym momencie i prosiłbym Was o pomoc:

1. Projekt w PSD ma określoną szerokość - 1020px. I teraz zastanawiam się czy zakodować długości/szerokości elementów i odległości pomiędzy nimi dokładnie według tej szerokości projektu PSD czy tworzyć na swojej szerokości ekranu, a wymiary elementów ustalić jakoś proporcjonalnie? Jak w PS wyznaczyć odległości między elementami (slice'ami)? (PS CS6)

2. Mam wykonany w tym momencie szkielet projektu w HTML. Będę się zabierał teraz za stylizację. Tu pojawia się taka kwestia: załóżmy, że mam element, który ma przypisane 3 klasy CSS z Bootstrapa (np. button). Chciałbym go wystylizować wg swoich wytycznych. Którą klasę mam nadpisywać w custom(main).css? Pierwszą z lewej? Czy tworzyć 'id' i jego stylizować? Podejrzewam, że jest tu jakaś zasada.

3. Mam div (.container), który ma mieścić w swoim obrębie tylko obrazek. Lepszym rozwiązaniem jest wstawienie w CSS w tym divie background-image czy w obrębie div'u umieścić ![]()?

Z góry dzięki.

[D.....k]

czy zakodować długości/szerokości elementów i odległości pomiędzy nimi dokładnie według tej szerokości projektu PSD czy tworzyć na swojej szerokości ekranu, a wymiary elementów ustalić jakoś proporcjonalnie

@byynajmniej:

1. Ustal to z klientem, ale jeżeli ma być Full RWD to +/- kilka pikseli nie robi większej różnicy (uznaje, że to nie jest jakiś wielki projekt, skoro to Twój pierwszy).

3. ...ogólnie zawsze lepiej dać ![](), ale skoro zadajesz takie pytania,

[kmiasko]

@byynajmniej: Nie znam się, ale się wypowiem.

1. Ja bym poszedł w proporcje. W końcu i tak będziesz musiał dostosować to do urządzeń mobilnych. Ewentualnie możesz nadpisać max-width w .container i .container-fluid. Przy zaznaczaniu prostokątem podaje Ci wysokość i szerokość prostokąta - z tego co widziałem na jutube ;)
2. Dodaj swoją w htmlu (jako ostatnią) i w niej stylizuj.
3. Zależnie od tego, czy obrazek ma jakieś znaczenie, czy

[b.....j]

@Michaukso: Faktycznie, wybacz, nie zauważyłem, że to autorski tag.
2. OK. Czy kolejność klas wewnątrz znacznika html ma znaczenie?

@Dreszczyk:
1. Projekt robię dla siebie, żeby się poduczyć. Będzie responsywny. Czyli sprawdzać dokładnie odległości między elementami i ich wymiary?

3. J.W - robię na potrzeby własne, a wolę się spytać tutaj o szczegóły (lub oczywistości) niż potem robić błędy w poważnych projektach. Ale dzięki za uwagę.

[vanot]

@byynajmniej: A najlepiej to idź do pracy, nigdzie wincyj się nie nauczysz jak w projektach komercyjnych z bardziej doświadczonymi work-cumplami (⌐ ͡■ ͜ʖ ͡■)

[D.....k]

Czyli sprawdzać dokładnie odległości między elementami i ich wymiary?

@byynajmniej: Jak dla siebie, to Ty decyduj ( ͡° ͜ʖ ͡°) Ja bym robił na oko, albo projektował specjalnie pod bootstrapa. A z tego, co czytam to projekt nie jest pod bootstrapa zrobiony.

[vanot]

@byynajmniej: ja np. lubię cisnąć pixel perfect, jest na to nawet plugin do chrome'a (PerfectPixel), który nakłada Ci dany obrazek na stronę, można go przemieszczać, zmieniać opacity. Od kiedy to odkryłem to nie mogę bez tego pracować :D

@Dreszczyk: na oko powiadasz ( ͡º ͜ʖ͡º)

[D.....k]

na oko powiadasz ( ͡º ͜ʖ͡º)

@vanot: ... do dypy se nasyp (✌ ﾟ ∀ ﾟ)☞

[b.....j]

@vanot: Jak ktoś ma ofertę pracy w Poznaniu to chętnie przyjmę.
@Dreszczyk: Dla siebie, ale już zdecydowałem, że chciałbym zrobić wg oryginalnego projektu. Co masz na myśli pisząc, że projektowałbyś specjalnie pod Bootstrapa? Bo właśnie robię w Bootstrapie.
@vanot: dzięki za info o tej wtyczce, sprawdzę czy jest na Firefoxa.
@kmiasko: dzięki.

[D.....k]

Co masz na myśli pisząc, że projektowałbyś specjalnie pod Bootstrapa

@byynajmniej: Zdecyduj na początku czy to ma być mobile-first czy desktop-first, zaprojektuj każdą możliwość (lg, md, sm, xs), ściągnij sobie szablon linijek bootstrapa w psd i tego się trzymaj przy projektowaniu.
W sumie jak chcesz to ja mam gdzieś przy sobie szablon do LG, czyli widok duży (desktopowy), na jego podstawie robie wszystkie widoku oprócz mobilnego - to mogę Ci

[D.....k]

Którą klasę mam nadpisywać w custom(main).css

@byynajmniej: Nie nadpisuj bootstrapa... Dodaj jakąś swoją klase (np. jeżeli przycisk ma być czerwony a nie niebieski, to daj .btn-red i dodaj w swoim stylu klase).

[b.....j]

@Dreszczyk: OK. możesz gdzieś wrzucić, projektuję dla szerokości powyżej 970 czyli same col-md-*

[y.....e]

@byynajmniej:

1. Naciśnij ctrl + ; w PS i zobacz czy grafik korzystał z linii pomocniczych bootstrap'a. Jeśli nie to napisz w normalnych proporcjach takich jakie daje bootstrap, na normalnym desktopie rozmiar conta to 1170px. Kodujesz responsywny projekt więc kilka px różnicy nie będzie robić problemu.

Tu masz na przyszłość templatki z

[D.....k]

@byynajmniej: już kolega wyżej dał

[b.....j]

@Dreszczyk: @yyyeee: dzięki za porady. chciałbyś jeszcze wiedzieć skąd u was rozbieżność zdań dot. nadpisywania/tworzenia swoich klas?

[D.....k]

Możesz nadpisać te klasy, które są już w bootstrap'ie (obojętnie które w kolejności). Tylko musisz pamiętać, żeby były wczytywane po tych z bootstrapa

@byynajmniej: mam tak naprawde to samo zdanie co @yyyeee - mi chodzi głównie o to, żebyś pliki bootstrapa zostawił w spokoju, nadpisywał je albo swoimi dodatkowymi klasami albo używając klas bootstrapowych nadpisywał je w swoim pliku

[b.....j]

@Dreszczyk: ok. dzięki, pewnie jeszcze znowu o coś zapytam za jakiś czas.

[b.....j]

Podbijam temat ponownie, bo nasunęła mi się jeszcze jedna sprawa.
Robiąc stronę responsywną dla urządzeń o szerokości większej niż 992px (czyli samo col-md-12) w sytuacji gdy stylizuje się elementy mając szerokość ekranu załóżmy 1070px, przy większej szerokość elementy się rozjeżdżają. Należy wtedy za każdym razem dodawać @media query dla poszczególnych szerokości i elementów, które się 'rozjeżdżają'? czy jest na to jakiś prostszy sposób?

[b.....j]

czy samo dodanie klas col-lg-* już dużo poprawi?

[b.....j]

@Dreszczyk, @yyyeee, @kmiasko, @vanot wołam Was, pomoglibyście z pytaniem wyżej? dzięki