- Chcialem sie dowiedziec czy w dzisiejszych czasach, osoby zaczynajace uczyc sie front-endu powinny opanowac tworzenie stron rwd rowniez bez uzycia zadnych gridow czy raczej preferowana jest nauka jakiegos grida?
- Zaczalem uczyc sie html/css i napisalem swoja pierwsza stronke w ramach cwiczen. Probowalem napisac ją bez zadnych gridów, korzystajac jedynie z pozycjonowania i floatów. Jednak w pewnym momencie natknalem na problem, jak wycentrowac 2 divy obok siebie, zeby dzialaly jak przy uzyciu np bootstrapa, mianowicie zeby przy zmniejszeniu szerokosci okna, stackowały się. Mam duzy mętlik w głowie i nie mam pojecia jak osiągnąc taki efekt bez grida. Poniżej daję sekcję mojej stronki, w której ten problem występuje.
Formularz po prawej stronie, powinien reagowac poprawnie na zwężanie strony (tak jak przy bootstrapie), jednak w pewnym momencie inputy zaczynają wychodzic mi poza body. Jaki jest na to sposob, zeby przy mobile, cala sekcja stackowala sie w taki sposob, zeby na gorze byla api mapy googla a ponizej tej mapy formularz?
0
0
gotowy, przetestowany grid to dobre narzędzie wspomagające/przyspieszające budowę strony, nie widzę powodu aby go nie używać
0
czysteskarpety napisał(a):
gotowy, przetestowany grid to dobre narzędzie wspomagające/przyspieszające budowę strony, nie widzę powodu aby go nie używać
Ok, ale czy programista powinien umiec zbudowac strone tylko przy jego uzyciu? czy powinien tez umiec osiagnac taki sam efekt korzystajac jedynie z pozycjonowania, flexboxa czy floatowania?
2
Dobry programista powinien móc dogadać się z klientem (bądź analitykiem biznesowym lub innym kontaktem), by osiągnąć opłacalne i satysfakcjonujące rozwiązanie. Jeśli to co chce klient da się załatwić sprawdzonym gotowcem to używamy sprawdzonego gotowca. Jeśli nie to drążymy temat i robimy coś swojego. Inną kwestią jest nasza ambicja - możemy stwierdzić, że bez umiejętności ręcznego tworzenia grida jesteśmy słabi i robimy sobie grida, by poćwiczyć i polepszyć sobie nastrój. Jednak zawsze coś tam nie będziemy mieć opanowanego, więc przy specyficznej mentalności zawsze będziemy powątpiewać czy jesteśmy "dobrymi programistami".
Z drugiej strony jeśli zajmuję się czymś co mnie interesuje to szybciej to ogarniam niż coś do czego się zmuszam. Więc jeśli ręczne grzebanie w gridach cię jara to grzeb. Jeśli nie to opanuj jakiś inny przydatny bajer.
0
Wibowit napisał(a):
Dobry programista powinien móc dogadać się z klientem (bądź analitykiem biznesowym lub innym kontaktem), by osiągnąć opłacalne i satysfakcjonujące rozwiązanie. Jeśli to co chce klient da się załatwić sprawdzonym gotowcem to używamy sprawdzonego gotowca. Jeśli nie to drążymy temat i robimy coś swojego. Inną kwestią jest nasza ambicja - możemy stwierdzić, że bez umiejętności ręcznego tworzenia grida jesteśmy słabi i robimy sobie grida, by poćwiczyć i polepszyć sobie nastrój. Jednak zawsze coś tam nie będziemy mieć opanowanego, więc przy specyficznej mentalności zawsze będziemy powątpiewać czy jesteśmy "dobrymi programistami".
Z drugiej strony jeśli zajmuję się czymś co mnie interesuje to szybciej to ogarniam niż coś do czego się zmuszam. Więc jeśli ręczne grzebanie w gridach cię jara to grzeb. Jeśli nie to opanuj jakiś inny przydatny bajer.
A co jesli bede potrafic zrobic stronke tylko i wylacznie uzywajac grida, a bez grida bede lezal, kwiczal i nie bede potrafil sobie poradzic w pracy gdzie np. nie uzywa sie gridow?
0
No to będziesz musiał nauczyć się gridów. Proste. Na rekrutacji pokazujesz co potrafisz, jeśli pracodawcy się spodoba to cię rekrutuje. To normalne, że programista nie wie wszystkiego i musi się douczać w czasie pracy. W pracy zwykle też pracuje się w zespole, więc będziesz miał okazję pogadać o gridach z kolegami z zespołu.
Jeśli nad gridami spędzisz 3 m-ce i je w końcu obcykasz, a jednocześnie nie zdążysz z 50 innymi przydatnymi rzeczami, to możliwe że na rekrutacji wypadniesz gorzej w oczach pracodawcy, niż ktoś kto zna tylko gotowe gridy, ale za to opanował te 50 innych przydatnych bajerów.
Poza tym, jeśli skierujesz swoją uwagę na opanowanie 50 innych bajerów to możliwe, że po powrocie do gridów będzie ci łatwiej je opanować, bo po drodze potencjalnie może ci się rozjaśnić wiele kluczowych kwestii.
Aktualizacja:
Zauważyłem inny twój post: Jaki macie pomysl na taki LP bez grida?
Oczywiście jeśli jako zadanie rekrutacyjne dostałeś wprost zrobienie grida ręcznie to musisz go zrobić ręcznie, bo pracodawca ma taki kaprys. Natomiast jeśli nie uda ci się tego zrobić to świat się nie zawali - możesz spróbować się dostać do innego pracodawcy. Może inny nie będzie miał takich kaprysów.
0
Wibowit napisał(a):
No to będziesz musiał nauczyć się gridów. Proste. Na rekrutacji pokazujesz co potrafisz, jeśli pracodawcy się spodoba to cię rekrutuje. To normalne, że programista nie wie wszystkiego i musi się douczać w czasie pracy. W pracy zwykle też pracuje się w zespole, więc będziesz miał okazję pogadać o gridach z kolegami z zespołu.
Jeśli nad gridami spędzisz 3 m-ce i je w końcu obcykasz, a jednocześnie nie zdążysz z 50 innymi przydatnymi rzeczami, to możliwe że na rekrutacji wypadniesz gorzej w oczach pracodawcy, niż ktoś kto zna tylko gotowe gridy, ale za to opanował te 50 innych przydatnych bajerów.
Poza tym, jeśli skierujesz swoją uwagę na opanowanie 50 innych bajerów to możliwe, że po powrocie do gridów będzie ci łatwiej je opanować, bo po drodze potencjalnie może ci się rozjaśnić wiele kluczowych kwestii.
Ostatnio dostalem zadanie rekrutacyjne od firmy zeby zrobic landinga, ale zaznaczyli ze nie moge uzywac zadnych frameworkow. Czyli chodzi im, zebym sobie napisal grida recznie? (budowa strony 3 i 4 kolumnowa).
https://image.ibb.co/h7Ke9a/fff.jpg
Jak coś takiego zrobic bez grida powiedzcie mi?
0
Według mnie opanowywanie tworzenia stron RWD bez gridów nie ma sensu, ponieważ:
- gridy ułatwiają życie
- łatwiej wprowadzać poprawki
- gridy będą z nami długi długi czas
Ja widzę to tak:
- border-box
* {box-sizing: border-box;}
- Za pomocą klas przypisz szerokości elementom lub ich "kontenerom"
! UWAGA: Zwróć uwagę, na to, że część elementów ma jednakową szerokość, ewentualnie można opakować to w kontener
przykład: krótszy button, pole tekstowe (1 z 3 - to w linii) i kontener z ikonami social mają "tą samą" szerokość - powiedzmy 300px;
.klasa1 {width: 300px;}
<!-- KRÓTSZY BUTTON -->
<span id="button" class="klasa1"><!-- TEKST --></span>
<!-- POLE TEKSTOWE -->
<div class="klasa1">
<h1><!-- TYTUŁ --></h1>
<p><!-- TREŚĆ --></p>
</div>
<!-- SOCIAL -->
<div id="social" class="klasa1"><!-- SOCIAL MEDIA --></div>
Ważne: szerokość elementu / kontenera określa klasa w tym wypadku - klasa1
W ten sposób stworzysz takie 3-4 klasy i masz cały szablon podzielony na "sektory".
0
ściągnij sobie skeleton grid, ma 418 linijek, wykasuj buttony, komenty i inne pierdy, zostanie gdzieś połowa, resztę dostosuj pod siebie i tyle...
0
Ale jak dam stałą szerokość pudełek to przy pomniejszaniu okna przeglądarki pudełka te nie będą się zmniejszać tylko wychodzić poza przeglądarkę. Lepiej ustawić szerokość w tej klasie1 w procentach tak? Wtedy całość będzie się proporcjonalnie pomniejszac wraz z szerokością okna
Jeżeli kontenerowi nadasz stałą szerokość, to będą wyjeżdżać. Jeśli kontenerowi nadasz 100%, to boxy będą "spadać" jeden pod drugi.
Pokazany przez ciebie layout jest tak prosty, że ja tu nawet nie bardzo widzę miejsce na grida... Dla tych trzech kolumn? No kaman, tyle to powinieneś umieć bez bootstrapa...
A w twoim przykładzie (https://codepen.io/tubaris/pen/YQQewB/) problem leży o tutaj:
.input-data input, textarea, select {
position: relative;
left: 300px;
margin-left: 300px;
font-size: 70%;
font-family: 'Lato', 'Arial', sans-serif;
width: 40%;
border-radius: 5px;
border: 1px solid #d4d4d4;
padding: 5px;
margin: 10px 0;
}
Usuń left: 300px;
Generalnie nadużywasz position: relative, wygląda, jakbyś nie wiedział do czego to jest.
Przy okazji - wrzucanie każdego inputa w oddzielny form to też nie jest prawidłowe podejście.
0
A jaki miałbyś pomysł na zrobienie czegoś takiego, żeby mapa była na całą szerokość strony, a pudełko z formularzem żeby było po prawej stronie mapy i żeby miało transparent bckgrnd żeby lekko się spod spodu przebijala? Wtedy ciężko jest to tak ostylowac żeby przy zmniejszaniu szerokości przeglądarki, formularz od pewnego miejsca wskakiwal pod mapę i aby zarówno mapa jak i formularz były na 100% width. Czy do tego wystarcza breakpointy które określa mapę i formularz na 100% width gdy przeglądarkę się pomniejszy?
Komentarze służą do off-topicu, jeśli piszesz w temacie, to pisz normalnie posta - dyskusja jest wtedy bardziej przejrzysta.
O ile dobrze rozumiem to co opisałeś, to ja bym to rozwiązała tak:
- Kontener zawiera w sobie mapę i formularz
- Kontener ma position relative
- Formularz ma position: absolute, right: 0, top: 0
- Ani formularz, ani mapa nie powinny mieć w tej sytuacji żadnych floatów
- Dla rozdzielczości, w której chcesz by przeskakiwało pod spód, zmieniasz absolute formularza na relative i tyle.
0
@aurel bardzo schematycznie Ci to opisała.
- Kontener zawiera w sobie mapę i formularz
- Kontener ma position relative
- Formularz ma position: absolute, right: 0, top: 0
- Ani formularz, ani mapa nie powinny mieć w tej sytuacji żadnych floatów
- Dla rozdzielczości, w której chcesz by przeskakiwało pod spód, zmieniasz absolute formularza na relative i tyle.
Od siebie mogę dodać tylko, że wato byłoby lepiej poznać właściwości HTML i CSS - polecam webkod - wszystko jest w dość prosty i przejrzysty sposób opisane.
Ogólnie to zanim zabierzemy się za kodowanie szablonów warto nauczyć się robić układ na kolorowych divach - taka moja drobna sugestia :)