How the STK, CSS & HTML and Rapid Prototyping Accelerate the Design Process
Upcoming SlideShare
Loading in...5

How the STK, CSS & HTML and Rapid Prototyping Accelerate the Design Process



Designing with the STK ... is as easy as customizing your own pizza. ...

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!



Total Views
Views on SlideShare
Embed Views



4 Embeds 259 239 14 5
http://test-mgnl1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

How the STK, CSS & HTML and Rapid Prototyping Accelerate the Design Process How the STK, CSS & HTML and Rapid Prototyping Accelerate the Design Process Presentation Transcript

  • How the STK, CSS & HTML andRapid Prototyping acceleratethe Design ProcessTimo Wirth, aperto Berlin, @Magnolia Conference Basel, 4/9/2012
  • Magnolia STKSuper Sonic Templating Kit 2
  • Open the box and youwill get !amazing possibilities
  • Grids, Page Layouts, Boxes, Carousels,Teasers …A lot of fantastic things to choose from 4
  • But … !
  • 128 KBStyles.css50+HTML templates9Layout patterns 6
  • This possibilities can easily becomeintimidating, kill creativity or slowdown thedesign and development process. 7
  • don‘t be scared !
  • The pizza order formwill help youand Super Mario too 9
  • Designing with theMagnolia STK is aseasy as creating yourown individual pizza. 10
  • The following guide will help you to create thebest pizza ever in the shortest amount of time.It’s optimized for the non-experienced pizzamaker. 11
  • Thedough
  • Layout
  • Where should the page be positioned?left centered 14
  • How wide is the header?Fixed width / max width 100% fluid windows width 15
  • What about the footer?Fixed width / max width 100% fluid window width 16
  • Navigation
  • Which type of navigation you‘d like to have?horizontal left sidebar 18
  • Do you need a second level?1st level horizontal / 2nd level vertical Both levels horizontal 19
  • Basic Grid
  • Our Right Sidebar Models? 21
  • No sidebar? 22
  • Or the ones with left hand navigation bar? 23
  • Responsive Design
  • Do you prefer a responsive approach? 25
  • Do you need dedicated iPhone / mobiletemplates? 26
  • Let the dough brew.Next, we’ll prepare some toppings while thedough rises. 27
  • PizzaToppings Toppings
  • Choose from the toppings belowto create your own flavor combination 29
  • The BigOnes 30
  • Go for the Big Show? 31
  • Big News? 32
  • MostPopular 33
  • We‘d like to tease you? 34
  • Specialities Ich bin die Fusszeile 35
  • Something special? 36
  • Something special? 37
  • Something special? 38
  • 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
  • Here are the ingredients for our pizza website centered 3 columns stage horizontal navigation promos 40
  • Now we have a plan, how our pizza should belayouted and structured.We’ve decided which elements the pizza shouldconsists of and what our favorite toppings are 41
  • Let’s go deeperLet’s get our handsdirty! 42
  • … to knead the dough it’svery therapeutic. It’swicked. I love it. Thetexture. It’s so smoothand silky.Jamie Oliver, Naked Chef S1/E2 „
  • Stop! Before we start.All chefs need some theory.A short introduction to the key STK frontendprinciples 44
  • STK FrontendPrinciples
  • As we’ve started with Magnolia STK four yearsago, we were guided by the followingprinciples. 46
  • Easy and Complex01 You can do very complex things with the magnolia STK, but still easy things can be done easily. 47
  • Be responsive02 Use the screen well Great designs for big and also for small screens. 48
  • Robust & Reliable03 You can trust the STK. 49
  • Change is good thing04 Easy to maintain Easy to change Easy to redesign 50
  • ?How are these principlesrepresented in thefrontend code?
  • Media Queries for responsive websitesare 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
  • Every HTML template is self-contained <div class=“text”> <div id=“breadcrumb”><h5><ul> <div id=“section”><h5><p> 53
  • Articlearcticle.html 54
  • 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
  • Classes and IDs are comprehensibleto humans <!-- not --> <div class=“c3po”> <!-- better --> <div class=“teaser no-img”> <div class=“links”> <div class=“text-box facts”> 56
  • Important layout -<div id=“wrapper">containers are +<div id=“branding">layered and are soindependent +<div id=“nav-global"> +<div id=“wrapper-2"> +<div id=“site-info"> 57
  • Class and ids follow a logical patternand 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
  • Classes can be combinedfor 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
  • 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
  • Teasers can be grouped <div class="teaser-group”> <div class="teaser“> <div class="teaser“> 61
  • 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
  • !The secret ingredient
  • Body IDs and classes <body id=“home” class=“col-float3” > <body id=“section” class=“col-subcol-subcol” > <body id=“profile” class=“col-float2 > 64
  • A powerful approach to built grids,and to change grids easily 65
  • From 3 to 2 columnsJust 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
  • With all this knowledgeLet’s do some rapidprototyping now 67
  • STK Rapid Prototyping01 Copy the Prototype 68
  • STK Rapid Prototyping02 Choose welcome-col-float-3.html 69
  • STK Rapid Prototyping03 Delete the unnecessary HTML 70
  • STK Rapid Prototyping04 Just copy and re-write the css you need. Delete the rest. Start with an empty css file. 71
  • ... to be Rapid prototypingcontinued Tomorrow morning at the Community day. See you J Ich bin die Fusszeile 72
  • To sum up1 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
  • Pizza tonight! Aperto Präsentations-Vorlage 74
  • Any questions? Aperto Präsentations-Vorlage 75
  • Timo WirthDirector Frontend, aperto AG, Berlin Web: Twitter: Mail: 76