Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Advanced Layout Techniques @ CMSExpo
1. Advanced Design for Drupal
Emma Jane Hogbin
@emmajanedotnet
emma@designtotheme.com
www.designtotheme.com
2. Agenda
● Why advanced layout modules.
● Fusion and Skinr--a CSS selector
toolkit.
● Panels for layout.
● Context-sensitive content with
Panels.
● Moving forward: Making the right
decision for your site.
3. Applying Styles in
Volatile Environments
I wish the developer and
manager would stop
fighting so that
I could just make the
effing theme already.
4. Enforce a Style Guide
● Skinr allows you to re-use your CSS file of basic
elements.
● Re-using your Skinr styles on all projects will ensure no
(common) element gets left behind.
● Alternate ways of solving the style guide problem:
● www.tinyurl.com/drupal-fireworks-templates
● www.zivtech.com/zivtech-style-guide
5. Use Theme Settings + Skinr
to Apply Your Styles
to Similar Elements
The following May share:
elements: ● Fonts: Weight, Size, Face,
Colour
● Headings
● Edge styles: Borders +
● Body text Padding + Rounded
● Blocks Corners
● Background Colour
● Images
● Element width and height
6. Fusion
Fusion is a theme. Themes can have
display settings and groups of CSS
attributes (“adjectives”).
Layout grid
Edge treatments
Breadcrumb settings (separator)
Headings
Background colour
Theme Developer Helpers
Username formatting
Font styles
8. Theme
Configuration
● Fusion settings
alter HTML and
apply CSS.
● Blocks are placed
into pink regions.
● Individual blocks
may be “skinned”
to alter their
appearance &
layout.
9. Applying Settings with Skinr
● Skinr is a module. Modules can perform tasks
(“verbs”).
● Skinr’s GUI replaces custom CSS selectors in
your theme’s CSS files by giving you a pointy-
clicky interface to apply your CSS rules.
● Skinr is “just” a selector tool, you must still
write CSS rules before you can apply them with
the pointy-clicky interface.
10. Using Skinr in Your Theme
1.Create re-usable CSS styles in your
theme.
2.Add Skinr hooks in the info file.
3.Include the variable $skinr in theme
tpls.
4.In the UI, apply skins to applicable
page elements.
17. Benefits of Panels
Highly customizable layout without PHP or other theme
manipulation. (This is great for clients that can't make up
their mind what should be on the front page of a site, or in
a specific section.)
Display context-sensitive content. (Use the same layout
throughout the site, but unique content displaying based
on the taxonomy term selected WITHOUT having to build
unique views and have unique page templates).
Place the same block into multiple regions on the same
page. (Because Drupal only lets you have a block in one
place for your entire Web site.)
18. Panels for Layout Only
Use Panels when:
● Your site layout is highly volatile.
● You want to display the same block in multiple
regions.
Avoid Panels if:
● You can accomplish your layout with finer
grained regions and block settings.
● You can easily create duplicates of your blocks.
21. One Block, Two Places, Three Cheers
Same “random image” block in TWO PLACES AT ONCE!
22. Install and Configure Panels
● Modules you will need to download:
Panels
●
● Ctools
● Advanced help
● Views (and Views UI)
● Modules to Install
● (All of the modules listed above)
● Page manager
● Views content panes
● Panel nodes to have panels appear in search results.
● Mini panels to divide panes into more panes.
25. Just in case the demo fails:
o ut
l ay ut
a e layo
se ) to th
o ws
ho s , vie
.C ks, node
1 ( bloc
d stuff
2. Ad
26. Panels Demo Summary
If all went well this is what happened:
● Sub-divide $content into multiple
panes.
● Add node, blocks, views to the panel
layout.
● Assign a custom URL for the panel
page.
● Promote the panel to the front page.
28. M: Ah. I'd like to have an argument, please.
R: Certainly sir. Have you been here before?
M: No, I haven't, this is my first time.
http://www.scottberkun.com/wp-content/themes/scottberkun/images/40-1.jpg
29. “Context”
● Three contrib modules tackle this problem
for Drupal:
Panels
●
● Context (goes well with CustomPage)
● Display Suite
● Efforts are being made to incorporate
“context” into core for D8. Yes, eight.
30. Context-sensitive Content
● Drupal pages know very little about
themselves.
● Context allows relationships
between:
● page elements.
● URLs and page elements.
31. Context Rules
taxonomy Last Night Hallway Tracks During Presentations
layout options Cussing Clothing
content displayed
Final page render
40. Summary
● Use appropriate tools to mitigate
volatile situations.
● Abstract styles and re-use them.
● Abstract layouts and re-use them.
● Skinr, Fusion and Panels are
“advanced layout” modules and
themes you may want to try on your
site.
41. And that was ...
Advanced Design for Drupal
Emma Jane Hogbin
@emmajanedotnet
emma@designtotheme.com
www.designtotheme.com
Online classes starting May 11
