m4txblog++

7

Jakieś 2,5 roku temu informowałem o m4txblogu 2.0. Dziś inkrementujemy numerek: nadeszła era m4txbloga³.

A w nowym m4txblogu? Oczywiście nowy theme. Tym razem w odstawkę poszły gotowce. No, prawie. O ile sama baza motywu nie jest moja, o tyle cały wygląd strony już tak. I choć mam chore poczucie estetyki, myślę, że wyszło nienajgorzej 😉

Wspomniałem o bazie theme’u. Otóż oparty on jest przede wszystkim na dwóch frameworkach:

  • Roots, czyli bazowy motyw dla WordPressa, pozbawiony wszelkich śmieci
  • Twitter Bootstrap, czyli funkcjonalny framework do tworzenia UI webaplikacji

Co można powiedzieć o tych dwóch?

  • Roots robi to, co powinien robić i robi to dobrze. Nie tylko sam jest pozbawiony śmieci, ale również usuwa część śmieci z WordPressa. Jest dość dobrze konfigurowalny i dostosowywalny; dzięki prostej i (w większości) intuicyjnej budowie łatwo dodać lub zmienić określoną funkcjonalność.
  • Bootstrap to kombajn do robienia GUI. Zawiera masę (nie zawsze) przydatnych kontrolek, a przede wszystkim mocno ułatwia tworzenie responsywnych layoutów (a właściwie odwala 90% roboty z tym za webmastera). Dzięki temu, że jest oparty na LESS-ie (którego niedawno opisywałem) modyfikacja go jest nie tylko prosta, ale i wygodna. Warto jednak powiedzieć o głównej wadzie: generuje sporo zbędnego kodu.

Rozpisywanie się o zaletach, wadach i poradach dotyczących użytkowania jednego i drugiego to temat na 2 osobne wpisy, dlatego odpuszczę sobie to w tym momencie; tak czy inaczej, polecam te 2 pozycje każdemu webmasterowi, który przy rozsądnym nakładzie pracy chce zbudować fajnie działającą stronę, i to nie tylko na desktopy… 🙂

Odpowiem teraz na pewne pytanie: na czym się skupiłem w tym theme’ie?

  • Dostosowaniu motywu do wyświetlaczy o dużej gęstości pikseli (Retiny i inne): layout zawiera tylko 1 obrazek rastrowy i jest nim tło strony. Wszystko inne to albo efekty CSS3, albo tekst (tekstem są m.in. również ikonki), albo obrazki wektorowe w SVG (logo HTML5 w stopce). Inaczej mówiąc: skalujcie sobie ile chcecie, i tak wszystko będzie idealnie ostre… 🙂 (btw., jest jeszcze jedna grupa obrazków rastrowych – są nimi avatary komentujących, których nie mogłem już zamienić na wektorowe wersje z oczywistych względów)
  • Responsywności layoutu: dzięki użyciu Bootstrapa w prosty sposób mogłem dostosować stronę do różnej wielkości urządzeń – można wygodnie przeglądać m4txbloga na dekstopie, tablecie i smartfonie
  • Czytelności i schludności: starałem się tak dobrać kolorystykę i czcionki, by dało się wygodnie czytać tekst na stronie.

Layout nie jest jeszcze perfekcyjny, zawiera jeszcze sporo błędów, które starał się będę sukcesywnie naprawiać. Jednakże na chwilę obecną jest wystarczająco używalny, by go zamieścić na m4txblogu 🙂

Podziękowania należą się jeszcze przede wszystkich do dwóch osób (kolejność alfabetyczna):

  • Sobak – informacja o Bootstrapie
  • xevuel – pomoc i cierpliwość w przypadkach problemów z themem.

Na koniec jeszcze 2 screeny – jeden ze starej wersji bloga:

m4txblog 2.0 - screen

 

A drugi z nowej:

m4txblog³ - screen

 

Pozdrawiam.

LESS, czyli lekarstwo na bolączki CSS

6

Z pewnością każdy webmaster korzystający z technologii zwanej Cascading Style Sheets – lub, potocznie, CSS – dochodzi do wniosku, że technologia ta jest niewygodna. Jest jednak lekarstwo na to i zwie się ono LESS.

Czytaj dalej