Polub bloga na fejsie!

Semantic UI tutorial #2 – strona bez użycia CSS?

2

Dziś druga część cyklu na temat frameworka Semantic UI. Jej autorem jest Kacper Tylenda, który kontynuuje swoją serię, a dziś pokaże czy da się, za pomocą Semantic UI, stworzyć stronę bez użycia CSS… Zapraszam do lektury wpisu!

W pierwszym odcinku tej serii opisałem Semantic UI z perspektywy teoretycznej. Czy początkowa fascynacja przetrwa zderzenie z realnym wykorzystaniem opcji dostępnych w tym frameworku? O tym dowiecie się dzisiaj!

Wstępne założenia

Semantic UI wygląda na kombajn, dzięki któremu da się tworzyć strony bez użycia CSS. Właściwie oprócz podstawowej znajomości HTML nie musimy wiedzieć nic więcej żeby stworzyć prostą stronę WWW.

Jako, że żywo jestem zainteresowany tematem poszukiwania pracy na pozycji junior front-end developer robiąc research natrafiłem na setki stron typu „portfolio” ludzi znajdujących się w mojej sytuacji. Znakomita większość tych stron wygląda bardzo podobnie. Dzisiaj spróbuję zrobić takie portfolio z pomocą Semantic UI. Żeby nie było zbyt łatwo, do wyzwania dodam kilka dodatkowych założeń:

  • Używam jak najmniejszej ilości własnego CSS. Tylko w przypadku gdzie jest to niezbędne
  • Dobór kolorów nie jest tutaj istotny
  • Będę się starał wykorzystać jak najwięcej elementów wbudowanych w Semantic UI by pokazać pełnię możliwości (lub braki)

Także zapnijcie pasy, bo zaraz…

Zaczynamy

Struktura projektu będzie bardzo prosta. W pliku index.html umieszczę cały kod strony. Plik script.js pozwoli nam uruchomić dynamiczne funkcje Semantic UI. Do katalogu img wrzucimy też niezbędną nam grafikę. W razie czego stwórzmy również plik style.css

W standardowym szkielecie strony HTML, w pliku index dodam, pomiędzy znacznikami <head>, pliki semantic.min.css i style.css:

Wewnątrz znacznika <body> dodaję wymagane pliki JavaScript jquery.min.js, semantic.min.js a także nasz script.js:

Teraz jesteśmy w pełni gotowi do rozpoczęcia projektu!

Nawigacja

Tworzenie strony zaczynam od górnej belki z nawigacją. Już na tym etapie pojawiły się pierwsze problemy

Bardzo ciężko było mi stworzyć strukturę odpowiednich klas dla gridu połączonego z guzikami żeby wszystko wyglądało tak jak bym chciał. Prawdopodobnie czas jaki włożyłem w opracowanie działającej nawigacji wystarczyłby żeby napisać wszystko samemu od podstaw. Jednak ostatecznie wszystko się udało i zawsze mogę zwalić winę na brak doświadczenia…

Semantic UI nie ma wbudowanej opcji „hamburgera” więc dla urządzeń mobilnych zastąpimy go modułem sidebar.  Sidebar będzie „wypychany” przy użyciu funkcji sidebar(). Aby wszystko działało jak należy, content naszego portfolio musimy owinąć w div i nadać jej klasę pusher (klasa ta będzie odpychana przez sidebar, dlatego umieszczam go poza tą klasą):

Stworzymy dwie wersje nawigacji:

  • dla komputerów
  • dla tabletów i telefonów

Całość nawigacji będzie znajdować się w znaczniku:

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!

W jego wnętrzu tworzymy dwa gridy – jeden dla komputerów, drugi dla urządzeń mobilnych.

Wersja dla komputerów

Wersja dla dużych ekranów wygląda w ten sposób:

Klasy computer only row działają w ten sam sposób co klasa hidden w Bootstrapie i będą ukrywać kod znajdujący się wewnątrz tego znacznika dla wybranych przez nas wielkości ekranu.

W divie znajdującym się wewnątrz ustawiam klasy:

  • wielkość – massive
  • kolor – violet i inverted
  • przyklejenie do góry ekranu – fixed

Klasa container działa w ten sam sposób co w Bootstrapie – ogranicza maksymalną szerokość wyświetlanych elementów.  Używając klas right menu przesuwamy elementy naszej nawigacji na prawą część ekranu.

Wersja dla urządzeń mobilnych

Przejdźmy jednak do ciekawszej części tej układanki czyli do wersji mobilnej:

Całość wygląda tutaj analogicznie do wersji dla większych ekranów. Jedyna różnica to jest taka, że zamiast linków nawigacji wyświetlam jeden link z ikoną „hamburgera”.

Wykorzystuję tutaj wbudowane ikony Semantic UI. Element <i> z klasami content icon pozwalają na wyświetlenie pożądanej, charakterystycznej ikonki (linia numer 6 w powyższym przykładzie).

Teraz musimy dodać do linku zdarzenie onclick, które „wypchnie” nasz sidebar (o tym jak go zrobić, za chwilę). Przejdźmy zatem do pliku script.js i dodajmy poniższy kod:

Korzystając z jQuery, po kliknięciu w link posiadającegy klasy item icon, odpalamy funkcje dostarczane przez sam Semantic UI! Mamy dostępnych sporo opcji dotyczących sposobu wysunięcia się sidebara, typu animacji, itd. Polecam przyjrzeć się opisowi w dokumentacji.

Sidebar

Wewnątrz znacznika <body> ale poza kontenerem z klasą pusher dodajemy sidebar zawierający nawigację dla urządzeń mobilnych:

Pierwszy div opisuje, za pomocą nadanych klas, nastepujące zachowania i opcje:

  • right vertical sidebar pionowy sidebar wysuwający sie z prawej strony
  • violet inverted – kolory
  • labeled icon menu – menu składające się z ikon i etykiet.

Ponownie wykorzystujemy wbudowane w Semantic UI ikony, których jest całe mnóstwo!

Nawigacja naszego Portfolio jest gotowa! Przechodząc dalej natkniemy się niestety na konieczność złamania zasady określonej we wstępie tego wpisu. Nie uda nam się bowiem obejść bez użycia CSS…

Przywitajmy się

Niestety przez użycie klasy fixed w naszej nawigacji (w celu „przyklejenia” jej do górnej krawędzi ekranu), kolejne elementy dodawane do naszego portfolio bedą znajdowały się pod nią. Musiałem więc użyć tutaj swojej klasy żeby przesunąć content w dół:

Jak widzisz, oprócz standardowej klasy container użyłem też własnej, którą nazwałem section-header. Jej style, zdefiniowałem w pliku style.css, a wyglądają one tak:

Dzięki temu tworzę przestrzeń wokół przywitania Gości na mojej stronie. Po raz pierwszy również stosuję tutaj formatowanie tekstu dodając klasy center aligned, których nazwy mówią (chyba) same za siebie…

Wykorzystuję też wbudowaną klasę sub header zmniejszając rozmiar fontów.

Ten etap był bardzo szybki i jeszcze mniej efektowny. Przejdźmy jednak do konkretów i przedstawmy się!

O mnie

Biały jest nudny! Zmienię zatem kolor tła dla sekcji aboutme!

Wewnątrz grida (klasy ui row grid) tworzymy kolumnę w kolorze zielononiebieskim (kolor: teal; kolumna: column). Teraz podzielmy nasz ekran na dwie kolumny wstawiając, wewnątrz powyższego, znacznik:

Kolumny te bedą wchodziły pod siebie na mniejszych ekranach (klasa stackable).  Wewnątrz utworzymy najpierw pierwszą, lewą kolumnę:

Wstawiłem do niej „moje” zdjęcie po lekkim retuszu w Photoshopie… Korzystamy z klasy fluid by rozciągnąć je na całą szerokość (oczywiście są tutaj dostępne również klasy dotyczące wielkości o których pisałem w pierwszej części tego tutoriala) i dodajemy klasę circular aby zdjęcie miało w pełni zaokrąglone rogi. Klasę możemy zamienić na rounded żeby rogi były tylko trochę zaokrąglone.

W prawej kolumnie wykorzystam grupowanie żeby uatrakcyjnić opis (więcej za moment). Całość składa się z czterech takich samych „modułów” więc pozwól, że przedstawię tutaj tylko ten, który pokazuje dodatkowe możliwości Semantic UI:

Najpierw tworzę nową kolumnę, a następnie dodaję do niej nagłówek w kolorze fioletowym (violet). Następnie otwieram grupę (klasy ui items) i dodaję pojedynczy element item. Po raz kolejny przegrałem tutaj ze wstępnymi założeniami i musiałem zastosować własną klasę item-icon. Niestety ikony nachodziły na nagłówki po prawej stronie i musiałem zwiększyć margines.

Najciekawszym fragmentem kodu wydaje się jednak zastosowanie klas clockwise rotated dla elementu <i>. Dzięki temu obrócimy naszą ikonę o 90 stopni zgodnie ze wskazówkami zegara. Alternatywnie możemy tutaj użyć również klas counterclockwise albo horizontally/vertically flipped

Strona bez użycia CSS – podsumowanie

Wpis strasznie się wydłużył i jestem zmuszony podzielić go na dwie części. Na pełne podsumowanie pracy z Semantic UI przyjdzie jeszcze czas po skończeniu projektu Portfolio. Jednak jak sam zapewne zauważyłeś, pojawia się tutaj kilka problemów:

  • Duża dowolność przy tworzeniu gridu zmniejsza czytelność kodu – istnieje kilka sposobów na określenie ilości kolumn i ich szerokości. Wstępnie nie stanowi to problemu jednak przy pracy w zespole albo po dłuższej przerwie w pisaniu kodu będzie to stanowiło doskonały sposób na utratę dużej ilości czasu i nerwów.
  • Nie mamy do dyspozycji klas opisujących marginesy i paddingi (tak jak w bootstrapie) więc stworzenie całej strony bez użycia CSS jest niemożliwe.
  • Stworzenie belki nawigacji przysporzyło mi sporo problemów i dopiero metodą prób i błędów doszedłem do poprawnej struktury.

Jeśli masz ochotę to tutaj możesz zobaczyć kodgithub, a także jak wygląda wynikowe Portfolio opisane powyżej – github pages.

W następnym odcinku opiszę powstawanie sekcji „Moje Projekty” i formularza kontaktowego, a następnie podsumuję swoją przygodę z Semantic UI.


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!

  • .computer.only.row vs .visible-lg – jak dla mnie to nawet Bootstrap miażdży SUI. .visible-lg jest zrozumiałe i jest JEDNĄ klasą, podczas gdy do tego samego SUI używa trzech klas, które same z siebie nie znaczą całkowicie nic. Podbijamy sobie specyficzność, żeby zrobić kod prozą. Szkoda tylko, że nie niesie to za sobą serio bardziej zrozumiałego kodu…

    A już .huge.violet.clockwise.rotated.cocktail.icon czy .ui.right.vertical.sidebar.violet.inverted.labeled.icon.menu to po prostu majstersztyki. Przecież to jest ACSS, tyle że z bezsensownym nazewnictwem.

    Zresztą sidebar('setting', 'mobileTransition', 'scale down') też niezłe. By ustawić opcję muszę zaznaczyć, że ustawiam opcję. To chyba najgorzej zaprojektowane API w jQuery, jakie widziałem.

    Poza tym schemat nazewniczy się rozpada, bo nagle w menu znajduje się .item. To wskazuje na to, że klasy są polimorficzne – a zatem musi tam być zgroza w kodzie CSS. No i… menu nie na liście? A może .item nie działa na li? 😀

    Ogólnie to SUI – wbrew swojej nazwie – jest zafiksowane na prezentacji, niczym więcej. Kod, który tworzymy, to tak naprawdę próba nadania stylom inline ładnych nazw. Problem polega na tym, że przez to kod staje się mniej elastyczny, a jakakolwiek zmiana wyglądu związana jest z przekopywaniem się przez kod, który przypomina wypracowanie na zaliczenie z angielskiego w 4 klasie podstawówki. Dramat.

    I znów: widziałbym SUI jako system mixinów w SCSS do tworzenia komponentów opartych na BEM. W innym wypadku nie widzę zastosowania.

    • Kacper Tylenda

      W 100% zgadzam się. To co opisałem wyżej zajęło mi więcej czasu niż jakbym sam robił to samo od zera i w przyszłości jakbym chciał edytować to „koszty” będą rosły w strasznym tempie. Ale wyzwanie jest wyzwaniem – wystawiłem się pierwszym odcinkiem i skończę serię choć każde słowo boli 😉

Google Analytics Alternative