Polub bloga na fejsie!

Semantic UI tutorial #1 – wprowadzenie

14

Dziś pierwsza część cyklu na temat frameworka Semantic UI. Jest to jednocześnie kolejny wpis, którego autorem jest Kacper Tylenda – być może zapowiada nam się dłuższa współpraca… A tym czasem zapraszam do lektury wpisu!

Jeśli wcześniej nie słyszeliście o Semantic UI (tutaj strona projektu) to jest to Bootstrap… Tylko, że większy. Bardziej „umięśniony”. Bardziej kolorowy. Sprytniejszy, łatwiejszy w nauce i prostszy w użytkowaniu. Tak naprawdę wszystko bardziej. Jak myślę sobie o tej parze to widzę dwóch ludzi – jeden całkiem wysportowany a drugi to „hardkorowy koksu” CSS 🙂

Nie chciałem w pierwszym zdaniu pisać „Bootstrap” ale ciężko uniknąć porównania podczas gdy „cały” Internet jest bootstrapowy a informacji o Semantic UI nie ma zbyt wiele w sieci. Według mnie całkiem niesłusznie… a to dlatego, że Semantic UI ma coś do zaoferowania wszystkim web developerom – od początkujących (dzięki niskiej barierze wejścia) aż po zaawansowanych (możliwość budowania swojej wersji frameworka za pomocą npm).

Wstęp

Mamy kilka opcji żeby odpalić Semantic UI w naszym projekcie. Najprostsza to oczywiście podlinkowanie odpowiednich plików z CDN. I tutaj spotka nas pierwsze zaskoczenie. Dostępnych będziemy mieli wiele wersji – każdy element, kolekcję czy moduł możemy dodać do naszego projektu oddzielnie. Co jest świetnym rozwiązaniem bo bardzo często zdarza się, że używamy Bootstrapa tylko i wyłącznie dla wbudowanego tam grida. Tutaj możemy wybrać co będzie nam potrzebne.

Całość lekka nie jest bo pliki CSS i JavaScript ważą łącznie ok 800KB ale coś za coś… Instalacja za pomocą npm pozwala na dobór „składników” naszej semantycznej mieszanki, a sam proces opiszę w części trzeciej tego kursu.

projektowanie designu

Ogólnie, nasza praca będzie wyglądała tak jak przy projektach z użyciem Bootstrapa – dodajemy klasy do elementów HTML, a resztę robi za nas framework. Różnica jaką można bardzo szybko zauważyć to same nazwy klas. Kończymy z „col-4” od teraz klasa ta nazywa się „four wide column”. Jak sam widzisz nazwy klas bardziej przypominają naturalny język jakiego używamy na co dzień.

Czym jeszcze różnią się oba frameworki?

Kolory, rozmiary

Zanim przejdziemy do konkretów warto zwrócić uwagę, że Semantic UI daje nam bardzo duże możliwości formatowania poszczególnych elementów. W Boostrapie mamy dostępne cztery klasy opisujące wielkość – Semantic UI dostarcza ich aż 7!

Nazwy klas są również łatwe do zapamiętania – mini, tiny, small, medium, large, huge, massive. Jeśli chodzi o kolorystykę mamy do dyspozycji cztery podstawowe klasy – primary, secondary, positive, negative, a do tego jeszcze 12 dodatkowych kolorów!

Zresztą sprawdźmy jak będzie wyglądał kod przykładowego guzika:

Na samym początku zawsze musimy dodać klasę ui, następnie określamy kolor/typ i wielkość, a na samym końcu element, który ma być utworzony.

Jak możesz zauważyć, dużo łatwiej operuje się klasami z Semantic UI niż tymi z Bootstrapa – klasy mówią: „utwórz podstawowy (primary) wielgachny (massive) przycisk (button)”. Oczywiście możemy pominąć typ i wielkość przycisku i dalej wszystko będzie działać.

Jak wspomniałem, dostępnych jest 12 podstawowych kolorów. Tak wygląda cała ich lista:

POLUB BLOGA NA FACEBOOKU!

Chcesz być na bieżąco informowany o nowościach na blogu oraz innych ciekawych treściach? Polub fanpage bloga na Facebooku!

Wszystko wygląda bardzo ładnie, a to dopiero początek! Tak jak wspominałem Semantic jest naprawdę bogate w opcje formatowania. Wydaje mi się, że możemy spokojnie stworzyć stronę internetową bez dotykania CSS!

Grid w podejściu ekstremalnym

Czy wspominałem wcześniej, że w Semantic UI wszystkiego jest więcej? Oczywiście tak samo jest z gridem, który udostępnia nam 16 kolumn do naszej dyspozycji. Kwestią sporną jest czy w rzeczywistości 4 dodatkowe kolumny są nam potrzebne…

Problem pojawi się gdy będziemy chcieli podzielić ekran na trzy równe części. Jednak w większości przypadków nie odczujemy różnicy pomiedzy 12 a 16 kolumnami.

Przy tworzeniu kodu mamy dość dużą swobodę:

Da nam taki sam efekt jak:

Jak widzisz, korzystanie z grida rozpoczynamy poprzez dodanie klas ui grid. Następnie dzielimy ekran klasami (ile kolumn) + (wide) + (column). Możemy również określić ile kolumn będzie w rzędzie – tak jak w przykładzie numer dwa.

Grid w Semantic UI daje nam ogromne pole manewru, a używanie go wygląda na bardzo proste. Nie jestem w stanie przedstawić Ci wszystkiego w tym artykule, dlatego zapraszam do przejrzenia oficjalnej dokumentacji, która jest przejrzysta i prosta w użytkowaniu.

Elementy, kolekcje i moduły

Większość składników Semantic UI wygląda naprawdę świetnie. Wystarczy spojrzeć w dokumentacji na przycisk, któremu możemy przypisać ikonę (FontAwesome wbudowane we framework), zmienić kształt czy pogrupować.

Opisywanie każdego elementu zajęłoby mi prawdopodobnie wieki więc zostawię sobie (mam nadzieję) tę przyjemność na odcinek drugi tego tutorialu. Zbuduję w nim prostą stronę z użyciem Semantic UI. Za pomocą elementu reveal dodamy (bardzo szybko i bez żadnej ingerencji w CSS) dobrze wyglądające efekty hover. Każdy składnik tego frameworka wygląda na rozbudowany i dopracowany. Jeszcze raz polecam sprawdzić dokumentację!

Semantic UI dla zaawansowanych

Tak jak wspominałem wcześniej za pomocą npm możemy zbudować nasz własny pakiet. Jest to bardzo ważne w sytuacji kiedy prawdopodobnie do naszego projektu będzie nam potrzebne tylko kilka elementów, kolekcji czy modułów.

web design

Semantic UI został stworzony z pomocą LESS, co może stanowić lekką przeszkodę ponieważ, wydaje mi się, że po przejściu Bootstrapa na Sass to właśnie ten pre-procesor CSS jest najbardziej popularny. Jednak różnice są na tyle niewielkie, że szybko powinnismy być w stanie przestawić się na LESS.

Po zainstalowaniu pakietu mamy dostęp do zmiennych, dzięki którym możemy dostosować style do naszych potrzeb. Wszystko obsługiwane jest przez Gulp. Proces instalacji i pracy z pakietami opiszę w części trzeciej tego tutoriala.

Podsumowanie

Mam nadzieję, że wystarczająco Was przekonałem do zapoznania się z tym ciekawym projektem. W kolejnych częściach postaram się przedstawić główne opcje dostępne w Semantic UI oraz „workflow” dla tego frameworka. Obiecuję, że będzie ciekawie!


Wpis ten jest częścią większej serii postów na temat Semantic UI. Poniżej linki do wszystkich części serii:

REACT, REDUX, REACT-ROUTER - KURSY ON-LINE

Chcesz od podstaw poznać tajniki React, Redux oraz react-router? Zapraszam do moich szkoleń on-line:

Przejdź do szkoleń

Uwaga! Obecnie trwa przedsprzedaż kursów - premiera 1 sierpnia 2017!

  • O tak, to trza przyznać: Semantic UI jest bardziej od Bootstrapa. Bardziej zły.

    Same założenia może i są dobre, ale ich implementacja po prostu masakruje wynikowy kod CSS, tworząc potwora, którego niemal nie da się okiełznać:

    Tego kodu można by użyć w każdym podręczniku jako antyprzykład dobrego CSS-a.

    Semantic UI próbuje coś robić na przekór wszystkim innym frameworkom i każdej sensownej metodologii. Niemniej w tym przypadku bunt prowadzi w złą stronę…

    • Kamil Rogala

      O widzisz- a ja nawet nie zajrzałem do plików źródłowych- czytam, patrze ze Bartek poleca i jakieś 10 minut po przeczytaniu myślę „a dobra, akurat mam trochę czasu na naukę to sobie przetestuje”.
      I bym się oszukał!

      • przypominam, że to wpis gościnny – a temat… mimo, że kontrowersyjny to myślę, że dla wielu interesujący – miałem już trochę zapytań o niego 😉

        • Wiem, że Semantic UI jest bardzo popularne ostatnim czasem, tylko… czemu? Przecież to nie jest dobry framework, no po prostu nie jest…

          Swego czasu pamiętam, że był w stanie nawet położyć Presto z powodu bezsensownego nagromadzenia klas w elementach.

          • Kacper Tylenda

            Popularny jest dlatego, że daje świetnie wyglądające wodotryski przy niskim nakładzie pracy 😉

          • Ach, czyli to taki Angular wśród frameworków CSS… :v

          • myślę, że każdy tego typu framework kusi przede wszystkim tym, że pewne rzeczy dostaje się na tacy i nie trzeba ich robić samemu – każdy chyba sam musi dojść do tego, że to nie tędy droga

        • Kamil Rogala

          Już nie zrzucaj na Kacpra niedobrzelcu! 😉 To pewnie Twój pseudonim artystyczny 😉

          Ale śmiechy śmiechami- warto nawet i o sprawach kontrowersyjnych pisać- webdev to przecież nie tylko idealnie dopracowane narzędzia, ale też i alternatywne tool’e, dziurawce z potencjałem czy znane i lubiane buble.
          Przykładowo dużo osób (w tym i ja) stosuje jQuery, w którym są podatności typu XSS
          https://www.cvedetails.com/vulnerability-list/vendor_id-6538/Jquery.html

          • No, są… w wersjach starszych od tego wszechświata 😉

          • Kamil Rogala

            niekoniecznie aż tak stare 😉 aczkolwiek fakt- najwięcej podatności jest w starych wersjach
            https://snyk.io/test/npm/jquery/2.2.3
            przypominam, ze obecnie mamy wersję 3.21
            3.2.1
            3.2.0
            3.1.1
            3.1.0
            3.0.0
            2.2.4
            2.2.3
            jak widać- aż tak strasznie wiele wersji to to nie jest 🙂 dokładnie 2.2.3 wydana była 5 kwietnia 2016, czyli względnie niedawno jeszcze

          • Kacper Tylenda

            W następnym odcinku stanę sam na sam w szranki z Semantic – zobaczymy jak to wyjdzie. Pojedyncze komponenty wyglądają ciekawie a czy praca z tym frameworkiem jest możliwa to już się przekonam niedługo 😉

          • no więc właśnie – może ta seria będzie case study, z którego wyjdzie jakie są faktycznie wady i zalety tego rozwiązania…

  • Budzik94

    Miałem nieszczęście pracować w semantic przy projekcie w pracy. Źle wspominam tego frameworka. Praca z gridem była potwornie zajmująca, nie intuicyjna i łatwo było o literówki. Siedem rozmiarów przycisków wygląda fajnie ale gdy dowiadujemy się ze dropdowny mają tylko jeden rozmiar i nie możemy łatwo zrobić małego przycisku z małym dropdownem to coś się w nas gotuje. Jeszcze większym rozczarowaniem jest fakt ze inputy mają rozmiary ale traf chciał ze przy inputach zgubiła się wielkość tiny. Zdecydowaliśmy się na semantica z względu dużej ilości gotowych elementów. Okazało się jednak ze nie ma ich tak sporo gdy przyszedł czas na kontrolki wybierania daty czy też color pickery. Gdy decyduje się na framework wolał bym mieć wszystko w jednym standardzie niż szukać potem dodatkowych zależności które nie się zgodne ze sobą i robią bałagan w projekcie.

    Podejście semantyczne jest dobre w programowaniu ponieważ program to historia którą można opowiedzieć. W CSS nie ma to moim zdaniem zastosowania ponieważ jedno zdanie (wygląd jednego div) nie tworzy historii.

    Artykuł fajny jako wprowadzenie gdy ktoś będzie zmuszony do używania tej technologi. Lecz sama technologia szału nie robi.

    • Kacper Tylenda

      Staram się zrobić kolejną część tutoriala i muszę przyznać, że idzie to dosc opornie. Miałem nadzieję udowodnić, że można zrobić prostą stronę bez użycia CSS ale raczej się to nie uda 😉

      Gotowe komponenty wyglądają bardzo dobrze jednak użycie i ogarnięcie sprawia tyle kłopotów, że być może łatwiej byłoby je napisać samemu 😉

Google Analytics Alternative