Drupal 8
Vzhled:
- začátečníci
- Zircon
- Integrity
- Paxton
- Danland
- Business
- Professional Theme (Drupal 7)
- Simple Corporate (Drupal 7)
- JournalCrunch (Drupal 7)
- Corporate Clean (Drupal 7)
- Corked Screwer (Drupal 7)
- FontFolio
- pokročilí
- Zen (Drupal 7)
- Bootstrap
- Omega
- AdaptiveTheme
- ZURB Foundation
- Fusion (Drupal 7)
Favicona:
- pixelite.co.nz/article/adding-apple-android-favicons-drupal
- loopduplicate.com/content/adding-icons-to-drupal-themes
Drupal 7
Základní (base) téma vzhledu se stará o běžné úkoly jako je např. rozložní stránky, normalizaci (reset) CSS atd.
- V admin/appearance (Vzhled) je možné určit výchozí a dostupná témata.
- Více témat vzhledu je možné získat na http://drupal.org/project/Themes (většinu z nich si můžete prohlédnou na Theme Garden).
- Témata vzhledu umísťujte do adresáře sites/all/themes/. Toto umístění je vhodnější pro případný upgrade systému na nvou verzi. Navíc zde uvístěná témata vzhledu jsou společná pro všechny subdomény (multisite web).
- Výchozí nastavení témat je možné upravit v admin/appearance/settings (Vzhled, Nastavení).
Tipy:
- weebpal.com/drupal-8-themes
- TemplateMonster.com - komerční témata vzhledu (Drupal, Wordpress, Joomla, PhpBB atd.)
- Lavishbootstrap.com - generátor barevného schéma na základě definovaného obrázku
- Boottheme.com – rychlé vytvoření webové stránky (Bootstrap, Less, HTML5, CSS3, JavaScript)
- drupalizing.com
Porovnání některých základních témat vzhledu vhodných pro vytváření vlastních subtémat
| Základní témata vzhledu |
Přístupnost |
Strukturovaná data |
Resposive Layout |
Respond.js nebo
mediaqueries.js (IE8-) |
HTML5 |
Sass, Less, Compass |
Grid |
Normalize (sjednocení vzhledu prvků) |
IE conditional |
Detekce schopností prohlížeče
(IE8-)
|
| Omega |
|
|
 |
mediaqueries.js |
|
|
|
|
modul Conditional Stylesheets |
HTML5 Shiv |
| AdaptiveTheme |
WCAG 2.0 level AA |
RDFa |
|
respond.js |
|
|
|
|
|
Modernizr |
| Zen |
|
|
|
respond.js |
|
|
|
|
|
HTML5 Shiv / Modernizr |
| Boilerplate |
|
|
|
|
|
|
|
|
|
Modernizr |
| Arctica |
|
|
|
|
|
|
|
|
|
|
| Mothership |
|
|
|
|
|
|
|
|
|
|
| Basic |
|
|
|
|
|
|
|
|
|
|
| Square Grid theme |
|
|
|
|
|
|
|
|
|
|
| Bootstrap |
|
|
|
|
|
|
|
|
|
|
| TB Nucleus (TB Simply, TB Neris, TB Hadelis, TB Mollise, TB Palicico, TB Events, TB Sirate, TB Methys, TB Rave, TB Blog, TB Purity) |
|
|
|
|
|
|
|
|
|
|
| Foundation |
|
|
|
|
|
|
|
|
|
|
| FontFolio |
|
|
|
|
|
|
|
|
|
|
| Professional Theme |
|
|
|
|
|
|
|
|
|
|
| Premium Responsive |
|
|
|
|
|
|
|
|
|
|
| Responsive Business |
|
|
|
|
|
|
|
|
|
|
| Responsive Blog |
|
|
|
|
|
|
|
|
|
|
| Skeleton |
|
|
|
|
|
|
|
|
|
|
| Concept (komerční) |
|
|
|
|
|
|
|
|
|
|
| SooperThemes (komerční) |
|
|
|
|
|
|
|
|
|
|
LayoutStudio
(rychlá změna rozvržení) |
|
|
|
|
|
|
|
|
|
|
Omega:
- optimalizováno pro výkon
- možnost vypnutí/zapnutí CSS u modulů
- Drush atd.
- Výhody:
- horizontální sekce přes celou šířku okna prohlížeče
- možnost nastavení stejné výšky některých elementů
- Nevýhody:
- není možné definovat fixní šířku sidebar (pro tuto funkčnost je nutná vlastní úprava CSS)
- fixní gutter (vnitřní okraj) 10px (je možné ovlivnit pomocí vlastních CSS)
- nestandardnímu způsobu zápisu .info souboru nemusí rozumnět všechny moduly
- ve výchozím stavu nemá content first, ale je možné si jej "dokonfigurovat" a "nastylovat"
- ve výchozím stavu nemění rozložení – změnu rozložení je ale možné definovat pomocí kombinace modulů Delta+Context (může být navíc alternativa místo Panels)
- ve výchozím stavu, obrázky nemění svoji velikost – je třeba použít např. modul Responsive images and styles
AdaptiveTheme:
- SEO optimalizace
- vlastní CSS vstup (pro jednoduché úpravy není nutné vytvářet subtéma)
- fonty, mobile friendly meta tags, atd.
- Výhody:
- WCAG 2.0 level AA
- je možné definovat fixní šířku sidebar stejnou ve všech "šířkách" layoutu
- content first
- malá chybovost v IE8- (advanced IE support)
- obrázky přizpůsobují svoji velikost
- Neýhody:
- nemá horizontální sekce přes celou šířku okna prohlížeče
Zen:
- výborná dokumentace ve zdrojovém kódu
- Výhody:
- content first
- obrázky přizpůsobují svoji velikost
- touch icon
- IE7 podpora pomocí "Chrome install"
- Neýhody:
- nemá horizontální sekce přes celou šířku okna prohlížeče
Boilerplate:
Arctica (dokumentace):
Mothership:
- generuje velmi "odlehčený" a sémantický kód
SooperThemes:
- Lumi (komerční)
- Responder (komerční)
- TouchPro (komerční)
- atd.
Tipy na zajímavá témata:
- Business
- Best Responsive
- Corporate Clean
- FontFolio
- ZURB Foundation
Moduly:
- LESS CSS Preprocessor
- SASS / SCSS
- Sassy – automatická kompilace SASS/SCSS souborů na Drupal webu (obsahuje podporu také pro Compass, Bootstrap a Foundation)
Definice Media Queries:
