Polski Blog TemplateMonster

Motyw Creado: pierwszy WP motyw oparty o CSS Gride w katalogu TemplateMonster [Wywiad z Wiktorem Salvą]

Ciebie też denerwują te cholerne ograniczenia dotyczące układu? Wtedy mam dobrą wiadomość dla Ciebie! TemplateMonster wykorzystał do swojego nowego produktu szeroko omawiana technologię - CSS Grid. Jesteśmy jednymi z pierwszych dostawców rozwiązań do tworzenia stron, który przedstawił swoim klientom motyw oparty o CSS Grid. Nasz nowy WordPress motyw Creado daje Ci prawie pełną swobodę w określaniu zawartości.

Demo Pobierz!

Dziś omówimy tą technologię i motyw Creado z Wiktorem Salvą, utalentowanym programistą, czyje jakościowe motywy WordPress cieszą naszych klientów.

TemplateMonster: Witaj! Opowiedz na czym polega specyfikacja układu CSS Grid.
<img alt='' src='https://secure.gravatar.com/avatar/0daa5dfe1259ac0b53d2ae236cd38979?s=37&#038;d=mm&#038;r=g' srcset="https://secure.gravatar.com/avatar/0daa5dfe1259ac0b53d2ae236cd38979?s=74&amp;d=mm&amp;r=g 2x" class='avatar avatar-37 photo' height='37' width='37'/>

Wiktor SalvaCześć! CSS Grid to nowy sposób na umieszczenie zawartości na stronie bez korzystania z tabel, flexboxów i innych rzeczy, do których już wszyscy przyzwyczailiśmy się. Chodzi o to, że teraz można tworzyć siatki w CSS, a nie w HTML.

Układ CSS Grid umożliwia przekształcenia w strukturze układu wizualnego, co nie wymaga żadnych zmian znaczników. As a designer, you can change the way page elements are located at different breakpoints of the layout. There’s no need to compromise a sensibly structured document for your responsive design.

The grid adapts to the available space with ease. As each element has its own area on the grid, they don’t overlap each other on smaller screens. But if you want, you can also make one item overlap another. That’s what HTML table-based layouts can’t do.


TemplateMonster: Układy CSS Grid dostosowują się do urządzeń przenośnych?
Wiktor Salva: Tak. Bez względu na to, czy korzystasz z ekranu Retina czy smartfona, będziesz cieszył się tym samym UX.


TemplateMonster: Jak wpadłeś na pomysł, aby użyć specyfikacji?
<img alt='' src='https://secure.gravatar.com/avatar/0daa5dfe1259ac0b53d2ae236cd38979?s=37&#038;d=mm&#038;r=g' srcset="https://secure.gravatar.com/avatar/0daa5dfe1259ac0b53d2ae236cd38979?s=74&amp;d=mm&amp;r=g 2x" class='avatar avatar-37 photo' height='37' width='37'/>

Wiktor Salva Trendy wpływają na nasz wybór. Siatka jest najlepszą rzeczą w CSS w ciągu ostatnich kilku lat. Dowodem na to jest fakt, że specyfikacja ta została wdrożona we wszystkich głównych przeglądarkach niemal równocześnie, tj. Firefox na początku marca, w Chrome około tygodnia po Firefoksie i Safari nieco później.

Przed marcem w ogóle nie było wsparcia dla tej specyfikacji. Ale od marca wsparcie wzrosło o ponad 60%. Innymi słowy, 60% użytkowników Sieci może widzieć zawartość na stronach utworzonych za pomocą  CSS Grid.

W tym samym czasie nie przyjęto innych specyfikacji. Tradycyjnie specyfikacja jest implementowana w przeglądarce na podstawie przedrostków i podlega testom. Dopiero po tym prefiksy są eliminowane. Aby porównać, pełne przyjęcie Flexbox zajęło znacznie dłuższy czas. Dowiedz się więcej tutaj.


TemplateMonsterJaka jest główna zaleta  CSS Grid nad innymi specyfikacjami?

Wiktor SalvaCSS Grid zapewnia większą swobodę programistom i ułatwia im określenie zawartości. Przykładowo, nakładanie jest bardziej wygodne w przypadku  CSS Grid niż w przypadku pozycji Absolute i jej analogów.

Aby porównać, oto lista zawierająca trzy kolumny z 20px pomiędzy kolumnami w  CSS Grid i Flexbox.

Flexbox

.parent {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
}
.child {
flex: 1 0 33.333%;
max-width: 33.333%;
padding-left: 10px;
padding-right: 10px;
}

Grid CSS

.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

TemplateMonster: Czy użytkownicy będą mieli problemy z przeglądem stron, opartych o CSS Grid?
Wiktor Salva: Jeśli regularnie aktualizują swoje przeglądarki, to nie.

TemplateMonster: Co wyróźnia motyw Creado od innych motywów WordPress?
Wiktor Salva: Warianty układy dla różnych celów. Ten motyw WordPress jest wyposażony we wstępnie zaprojektowane układy dla blogów i różne widgety, takie jak: slideshow, widget Instagram, niestandardowe typy wpisów na stronie deomowe i polecane wpisy:

Lista artyułów na blogu


Suwak


Niestandardowe wpisy


Układ dla Instagram


Polecane wpisy


TemplateMonster: Zazwyczaj motywy WordPress od TemplateMonster posiadają ogromną ilość funkcji. Czy można to również powiedzieć o motywie Creado?
Wiktor Salva: Ten motyw WordPress jest wyposażony we wszystkie funkcje, które mogą przydać się naszym klientom. Są to, na przykład, Live customizer, pozwalający na edycję domyślnego projektu bez przeładowywania strony; 7 wariantów układu nagłówka, 5 wariantów układu bloga, 500 fontów Google, mnóstwo dedykowanych widgetów, itd.


TemplateMonster: Opowiedz nam o swoich planach na przyszłość.
Wiktor Salva: Osobiście chciałbym spróbować zmiennych CSS, ale jest jedne ale. Ponieważ ani IE, ani Edge nie wspierają tego, obecnie jest to niemożliwe.

TemplateMonster: Drodzy przedstawiciele IE i Edge! Jeśli to czytacie, błagamy Was dodać wsparcie zmiennych CSS! Mamy nadzieję, że to pomoże. A co z planami, które można wdrożyć już teraz?
Wiktor Salva: CSS Grid stanie się nowym standardem w rozwoju sieci. Oczywiście, że my nie możemy zignorować tego faktu, dlatego wkrótce wprowadzimy tą technologię do wszystkich naszych motywów.

TemplateMonster: Dziękujemy Ci za rozmowę!
Wiktor Salva: Nie ma za co!

Demo Pobierz!

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: Creado: The First Grid CSS WordPress Theme Arrived [Exclusive Interview with Victor Salva].