Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

DrupalSib / Drupal 8 theme system

No description
by

Alexander Dubovskoy

on 7 September 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of DrupalSib / Drupal 8 theme system

What we have
with Drupal 7?
Drupal 8
Let's play
Contrib
Display suite / Panels
The End...
Theme system
PHPTemplate

Files:
- themename.info
- template.php
- [html/page/etc].tpl.php

theme_ hooks
Panels
DS
Problems
Events end logic in templates
Content in templates
.tpl.php-hell
jQuery version
Architecture (blocks? panels? ds?)
Alexander Dubovskoy
dan@ra-don.ru

Theme system
TWIG template engine
root /themes folder
*.info -> *.info.yml
*.tpl.php -> *.html.twig
template.php -> *.theme


Create my theme
whitenights.info.yml

name: Whitenights
type: theme
description: 'Test theme for Drupal Camp'
version: 0.1
core: 8.x

stylesheets:
all:
- css/layout.css
- css/base.css
- css/components.css

Standarts
CSS coding standards
CSS file organization
Components
Modifer classes
Classy base theme
https://drupal.org/node/1887918
https://drupal.org/node/1886770
File structure (SMACSS)
Base — CSS reset/normalize plus HTML element styling.
Layout — macro arrangement of a web page, including any grid systems.
Component — discrete, reusable UI elements.
State — styles that deal with client-side changes to components.
Theme — purely visual styling (“look-and-feel”) for a component.
Add some styles
for fast-prototyping
I use scss sources and susy
grids...
stylesheets-remove:
- normalize.css

or

stylesheets-override:
- normalize.css
Hello!
Alexander Dubovskoy
Core twig templates
/core/modules/system/templates
datetime-wrapper.html.twig
details.html.twig
dropbutton-wrapper.html.twig
feed-icon.html.twig
field.html.twig
field-multiple-value-form.html.twig
fieldset.html.twig
form-element.html.twig
form-element-label.html.twig
form.html.twig
html.html.twig
image.html.twig
indentation.html.twig
input.html.twig

install-page.html.twig
item-list.html.twig
links.html.twig
maintenance-page.html.twig
maintenance-task-list.html.twig
mark.html.twig
menu.html.twig
menu-local-action.html.twig
menu-local-task.html.twig
menu-local-tasks.html.twig
page.html.twig
pager.html.twig
page-title.html.twig
progress-bar.html.twig
admin-block-content.html.twig
admin-block.html.twig
admin-page.html.twig
authorize-report.html.twig
block--local-actions-block.html.twig
block--system-branding-block.html.twig
block--system-menu-block.html.twig
block--system-messages-block.html.twig
breadcrumb.html.twig
checkboxes.html.twig
confirm-form.html.twig
container.html.twig
datetime-form.html.twig


Theme info.yml file
Defining stylesheets as libraries in
*.libraries.yml file
cuddly-slider:
version: 1.x
css:
theme:
css/cuddly-slider.css: {}
css/print.css: { media: print }
js:
js/cuddly-slider.js: {}
dependencies:
- core/jquery
It took 5
minutes
old docs
radios.html.twig
region.html.twig
select.html.twig
status-messages.html.twig
status-report.html.twig
system-admin-index.html.twig
system-config-form.html.twig
system-modules-details.html.twig
system-modules-uninstall.html.twig
system-themes-page.html.twig
table.html.twig
tablesort-indicator.html.twig
textarea.html.twig
time.html.twig
vertical-tabs.html.twig
Debug
adubovskoy@adubovskoy-work:~/Site/sites$ tree -L 2
.
├── default
│   ├── default.services.yml
│   ├── default.settings.php
│   ├── files
│   └── settings.php
├── development.services.yml
├── example.settings.local.php
└── example.sites.php

2 directories, 6 files

settings.php

if (file_exists(__DIR__ . '/settings.local.php')) {
include __DIR__ . '/settings.local.php';
}

development.settings.yml

parameters:
session.storage.options:
twig.config:
debug: true
cache: false


Create D8 theme from scratch and use scss/susy/bourbon

name: Fluffiness
description: A cuddly theme that offers extra fluffiness.
type: theme
core: 8.x
libraries:
- fluffiness/global-styling
stylesheets-remove:
- '@classy/css/components/tabs.css'
- core/assets/vendor/normalize-css/normalize.css
regions:
header: Header
content: Content
sidebar_first: 'Sidebar first'
footer: Footer
Structure
Some tricks
@token . For libraries only.
Stylesheets-remove for remove styles
libraries-override
libraries-override:
# Replace an entire library.
core/drupal.collapse: mytheme/collapse

# Replace an asset with another.
subtheme/library:
css:
theme:
css/layout.css: css/my-layout.css

# Remove an asset.
drupal/dialog:
css:
theme:
dialog.theme.css: false

# Remove an entire library.
core/modernizr: false
libraries-extend


# Extend drupal.user: add assets from classy's user libraries.
libraries-extend:
core/drupal.user:
- classy/user1
- classy/user2
Full transcript