Designing with the STK ... is as easy as customizing your own pizza. Out of the box the Magnolia STK comes with a large amount of HTML & CSS, more than 50 HTML templates and 9 layout patterns. Which is amazing. Still, the possibilities can easily become intimidating, kill creativity or slowdown the design and development process. Don't be scared. Timo Wirth, creator of the STK frontend, shows you how easy it is to create a stunning website with the help of the STK and how the STK can speed up your creativity process. Designing with the Magnolia STK is as easy as creating your own individual pizza. It's your choice!

1. How the STK, CSS & HTML and
Rapid Prototyping accelerate
the Design Process
Timo Wirth, aperto Berlin, @Magnolia Conference Basel, 4/9/2012

2. Magnolia STK
Super Sonic Templating Kit
2

3. Open the box and you
will get
!
amazing possibilities

4. Grids, Page Layouts, Boxes, Carousels,
Teasers …
A lot of fantastic things to choose from
4

5. But …
!

6. 128 KB
Styles.css
50+
HTML templates
9
Layout patterns
6

7. This possibilities can easily become
intimidating, kill creativity or slowdown the
design and development process.
7

8. don‘t be scared
!

9. The pizza order form
will help you
and Super Mario too
9

10. Designing with the
Magnolia STK is as
easy as creating your
own individual pizza. 10

11. The following guide will help you to create the
best pizza ever in the shortest amount of time.
It’s optimized for the non-experienced pizza
maker.
11

12. The
dough

13. Layout

14. Where should the page be positioned?
left centered
14

15. How wide is the header?
Fixed width / max width 100% fluid windows width
15

16. What about the footer?
Fixed width / max width 100% fluid window width
16

17. Navigation

18. Which type of navigation you‘d like to have?
horizontal left sidebar
18

19. Do you need a second level?
1st level horizontal / 2nd level vertical Both levels horizontal
19

20. Basic Grid

21. Our Right Sidebar Models?
21

22. No sidebar?
22

23. Or the ones with left hand navigation bar?
23

24. Responsive Design

25. Do you prefer a responsive approach?
25

26. Do you need dedicated iPhone / mobile
templates?
26

27. Let the dough brew.
Next, we’ll prepare some toppings while the
dough rises.
27

28. Pizza
Toppings
Toppings

29. Choose from the toppings below
to create your own flavor combination
29

30. The Big
Ones
30

31. Go for the Big Show?
31

32. Big News?
32

33. Most
Popular
33

34. We‘d like to tease you?
34

35. Specialities
Ich bin die Fusszeile 35

36. Something special?
36

37. Something special?
37

38. Something special?
38

39. So much more to choose from …
Please choose from more than 20 additional specialities ...
The STK order form
will be part of the
next magnolia
release.
39

40. Here are the ingredients for our pizza website
centered
3 columns
stage
horizontal navigation
promos
40

41. Now we have a plan, how our pizza should be
layouted and structured.
We’ve decided which elements the pizza should
consists of and what our favorite toppings are
41

42. Let’s go deeper
Let’s get our hands
dirty!
42

43. … to knead the dough it’s
very therapeutic. It’s
wicked. I love it. The
texture. It’s so smooth
and silky.
Jamie Oliver, Naked Chef S1/E2 „

44. Stop! Before we start.
All chefs need some theory.
A short introduction to the key STK frontend
principles
44

45. STK Frontend
Principles

46. As we’ve started with Magnolia STK four years
ago, we were guided by the following
principles.
46

47. Easy and Complex
01 You can do very complex things
with the magnolia STK,
but still easy things can be done
easily.
47

48. Be responsive
02 Use the screen well
Great designs for big and also
for small screens.
48

49. Robust & Reliable
03 You can trust the STK.
49

50. Change is good thing
04 Easy to maintain
Easy to change
Easy to redesign
50

51. ?
How are these principles
represented in the
frontend code?

52. Media Queries for responsive websites
are built in
<link media=“only screen and (min-device-width:
481px)”>
<link media=“only screen and (min-width: 1200px”>
<link media=“only screen and (min-width: 481px”) and
(max-width: 980px)”>
<link media=“handheld, only screen and (max-device-
width: 480px)”>
52

53. Every HTML template is self-contained
<div class=“text”>
<div id=“breadcrumb”><h5><ul>
<div id=“section”><h5><p>
53

54. Article
arcticle.html
54

55. Every HTML template is self-contained
<div class=“text” role=“article”> <!-­‐-­‐
not
-­‐-­‐>
<h1> <div
class=“text”>
<p id=“intro”> <h1>
<p
id=“intro”>
<div id=“toc”>
<h2>
<h2> <ul
id=“toc”>
<ul> <div>
<div class=“text-section”>
55

56. Classes and IDs are comprehensible
to humans
<!-- not -->
<div class=“c3po”>
<!-- better -->
<div class=“teaser no-img”>
<div class=“links”>
<div class=“text-box facts”>
56

57. Important layout -<div id=“wrapper">
containers are
+<div id=“branding">
layered and are so
independent +<div id=“nav-global">
+<div id=“wrapper-2">
+<div id=“site-info">
57

58. Class and ids follow a logical pattern
and they are extandable
<div id=“nav>
<div id=“nav-box>
<!-- extandable like this -->
<div id=“nav-wrapper”>
<div id=“nav”>
<div id=“nav-box”>
<div id=“nav-box-inner”>
58

59. Classes can be combined
for reuse, overwriting or special styling
<div class="teaser”>
…
<div class="teaser event-list">
<div class="teaser latest">
<div class="teaser latest links no-img">
59

60. Every teaser is unique.
STK counts the teasers for you
<div class="teaser” id=“teaser-1”>
<div class="teaser” id=“teaser-2”>
or
<div class=“box” id=“box-1”>
<div class=“box” id=“box-2”>
60

61. Teasers can be grouped
<div class="teaser-group”>
<div class="teaser“>
<div class="teaser“>
61

62. Each teaser group has it’s own teaser count
<div class="teaser-group” id="teaser-group-1” >
<div class="teaser“ id=“tg-1-teaser-1“>
<div class="teaser“ id=“tg-1-teaser-2“>
62

63. !
The secret ingredient

64. Body IDs and classes
<body id=“home” class=“col-float3” >
<body id=“section” class=“col-subcol-subcol” >
<body id=“profile” class=“col-float2 >
64

65. A powerful approach to built grids,
and to change grids easily
65

66. From 3 to 2 columns
Just change a number in the body class
3 columns 2 columns
<body class=“col-float3” > <body class=“col-float2” >
• No additional changes in templates or HTML code needed
• the markup in the content area and in teasers stay the same
• No re-editing or copying for editors
66

67. With all this knowledge
Let’s do some rapid
prototyping now
67

68. STK Rapid Prototyping
01 Copy the Prototype
68

69. STK Rapid Prototyping
02 Choose
welcome-col-float-3.html
69

70. STK Rapid Prototyping
03 Delete
the unnecessary HTML
70

71. STK Rapid Prototyping
04 Just copy and re-write the
css you need.
Delete the rest.
Start with an empty css file.
71

72. ... to be Rapid prototyping
continued
Tomorrow morning
at the Community day.
See you J
Ich bin die Fusszeile 72

73. To sum up
1 The STK gives you general structure and lot
of possibilities.
2 Don’t let it limit your thinking.
3 See the structure as relief and you use it as
trampoline for your ideas and a starting point
for fantastic future-proof frontend design.
73

74. Pizza tonight!
Aperto Präsentations-Vorlage 74

75. Any questions?
Aperto Präsentations-Vorlage 75

76. Timo Wirth
Director Frontend, aperto AG, Berlin
Web: www.aperto.de
http://www.vorsprungdurchwebstandards.de/
Twitter: https://twitter.com/javajim
Mail: timo.wirth@aperto.de
76