Tutorial: port a static HTML design #

This tutorial is for designers who received static HTML pages (from an agency, a style guide or a purchased template) and must turn them into a working Exponential design. Allow a day for a typical site of five page types.

Contents #

1. Step 1: inventory
2. Step 2: assets into the design
3. Step 3: the frame becomes the pagelayout
4. Step 4: page types become view templates
5. Step 5: fixed content becomes template code
6. Step 6: clean up on the way

Step 1: inventory #

List the page types of the mockup and map each to Exponential:

Step 2: assets into the design #

mockup/css/*.css     ->  design/mytheme/stylesheets/
mockup/js/*.js       ->  design/mytheme/javascript/
mockup/img/*         ->  design/mytheme/images/
mockup/fonts/*       ->  design/mytheme/fonts/

Fix relative url() paths in the CSS (../images/..., ../fonts/...). Load the CSS with one ezcss_load and the scripts with ezscript_load (Loading stylesheets). Replace a CDN link to a library with a local copy (External resources and CDNs).

Step 3: the frame becomes the pagelayout #

Take the mockup's common frame; replace the content area with {$module_result.content}; split header, footer and menu into pagelayout/*.tpl parts (The pagelayout). Replace:

Step 4: page types become view templates #

For each content page type, an override with its own template (Tutorial: override a full view). Paste the mockup's markup and replace the dummy texts with fields:

<h1>{$node.name|wash}</h1>
<div class="lead">{attribute_view_gui attribute=$node.data_map.intro}</div>

Step 5: fixed content becomes template code #

• Lorem ipsum becomes fields of the content.
• Repeated items (cards, teasers) become a {foreach} over a fetch and a line view.
• Interface texts ("Read more", "Search") go through i18n.
• Dates through l10n.

Step 6: clean up on the way #

Static templates often carry habits that do not survive in Exponential:

• inline <style>, style="", onclick="" and inline scripts: move them into files (CSP-safe design);
• missing alt, skipped headings, a div used as a button: fix them now (Accessibility basics for themes);
• fixed colors: turn them into tokens, which gives you dark mode later (Design tokens);
• left/right in CSS: logical properties, for right-to-left languages.

Related pages #

• Tutorial: create a theme extension
• Choosing a starting theme
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.