CSS Grid, czyli kolejna seria filmów dla web developerów

Skończyłem dziś kolejną serię krótkich i zwięzłych filmów dla programistów. Tym razem CSS Grid - stosunkowo nowa funkcja CSS, przydatna przy kodowaniu szablonów. 5 filmów, 30 minut i same konkrety. #bezzbędnegogadania.

[Psychopathy_Red]

( ͡° ͜ʖ ͡°)

[Mikoziq]

@Psychopathy_Red: Dzisiaj taką mam zabawę z ustawianiem tabelek ( ͡° ͜ʖ ͡°)

[adrian__23]

spoko bardzo fajnie opisane, merytorycznie nie moge sie przyczepic bo sie na tym nie znam :) ale podoba mi sie szybkosc, brak muzyczki w tle, wytlumaczenie na poczatku i zabawa z kodem. dobra robota !! . Na drugim filmiku slychac brak pop filtra przymikrofonie - ale to takie czepianie sie dla samego czepiania :)

[overment]

@adrian__23: najs! dzięki :) Dokładnie o to mi chodziło.

[overment]

@wykopowybaltazar:
Obecnie nie mam w planach tworzenia filmów uczących podstaw. Tym często zajmuje się wiele innych twórców. Mi zależy na tym, aby poruszać tematy o których nie mówią już inni.

[simperium]

@overment, A gdzie informacja o tym, by subskrybować kanał i obowiązkowo nacisnąć na dzwoneczek, i że jak będzie 400 łapek w górę, to dasz kolejny odcinek? ( ͡° ͜ʖ ͡°)

[overment]

@simperium: content, no bullsh*t :)

Wrzucałem w niektórych odcinkach na końcu informacje o subskrypcji. Ale na koniec dnia - jak komuś się spodoba, będzie wiedział co robić :)

[overment]

@simperium: tak jak pisałem - w niektórych filmach jest, w niektórych nie ma.

Pewnie z marketingowego punktu widzenia robię to źle, ale najważniejsza jest dla mnie treść, nie promocja.
Wzmianki o lajkach, subach i komentarzach być może pojawią się ale w nie przeszkadzającej formie graficznej.

Myślałem jeszcze o tym aby zrobić "outro" - max 5 sekund, które będzie dołączane na końcu każdego filmu. Każdy będzie miał okazję do skipnąć, bez

[S.....y]

Grid jest z jednej strony fajny, ale ma też swoje ograniczenia i powiem szczerze nie wyobrażam sobie stawiać całej witryny na grid`zie. Co innego poszczególne elementy szczególnie jak navbar czy stopka to jest do tego idealny.

[overment]

@SquirrelsCanFly: całkowicie się zgadzam. Grid to fajne uzupełnienie flexboxa i dobrze znanych floatów. Dodaje kilka nowych możliwości ale nie rozwiązuje wszystkich problemów.

[S.....y]

floatów

@overment: A to nie jest przypadkiem traktowane jako błąd? W sensie, z tego co wiem, float domyślnie służy do pozycjonowania elementów w tekście i nie powinien być raczej używany do pozycjonowania elementów na stronie. Mogę się mylić, ale nie zmieni to faktu, że używanie floatów jest bardzo niewygodne.

[shpyo]

Tylko flex!!!!1111oneoneonejedenjedn

[Zajec5]

@overment: "stylów" a nie "styli" :) 1:21

[overment]

@Zajec5: o matko! Znowu to zrobiłem! :(

:D

[uiconstructor_com]

Korzystając z tematu, chciałbym pokazać swoją appkę, która umożliwia zmianę wizualnej wersji strony na kod html/css. Aplikacja jest darmowa, obecnie w fazie beta. Posiada dużo gotowych komponentów z Bootstrap4, które można łatwo dodać do projektu. Zapraszam -> https://www.uiconstructor.com/

[Septio]

@uiconstructor_com: jak prosto zrobić takie animacje CSSowe zależne od scrollowania, bo nie mogłem nigdzie znaleźć?

[uiconstructor_com]

@Septio: Jeśli nie chce CI się pisać samemu, możesz skorzystać z gotowca, wiele ciekawych efektów -> https://michalsnik.github.io/aos/

[t.....i]

CSS grid jest super. To jest coś co powinno być w CSS od samego początku.

Pomyśleć, że nadal tworzy się layouty użwyając floatów - czyli w zasadzie "hacka" ponieważ w zamyśle twórców CSS floaty miały być używane głównie do tego, żeby "opływać" elementy tekstem.

[feroze_adrien]

powinno być w CSS od samego początku.

@tylkostrimi: było na samym początku - tabelki, hahahaha(╥ ͜ʖ╥)

[t.....l]

@tylkostrimi: Czyli to samo co miałem na myśli tylko pomyliłem procent. Często stosowałem np. w stopce jeśli tekst miał być wyrównany bo coś obok rozciągąło w pionie (np. menu z ikonami). Teraz wole używać align-items center, ale metoda pozostanie w użyciu bo nie zawsze można lub trzeba używać flexboxa.

[Septio]

Preferuje XY w zurb foundation for sites, tyle, że jeszcze nie ma pełnego wsparcia przeglądarek. Uważam, że jest szansa na wygryzienie bootstrap'a https://foundation.zurb.com/sites/docs/xy-grid.html

[jacqbus]

@overment: a jak wygląda sytuacja z centrowaniem wertykalnym w gridzie? Pierwszy raz spotykam się z praktycznym zastosowaniem i zastanawiam się, czy w przypadku np. projektowania góry strony (logo + menu z elementami + menu językowe + social icons) lepiej pozostać przy flex które idealnie utrzymuje wszystkie elementy wertykalnie wyrównane i jednocześnie "rozstrzelone" na całą szerokość, czy może w tym przypadku grid sprawdził by się lepiej? Pytam o praktykę, bo w

[overment]

@jacqbus:

Zależy od sytuacji. Tak, z pomocą grida można centrować elementy ale IMO bardziej użyteczny w tym temacie wydaje się flex.