3 xmlns="http://www.w3.org/1999/xhtml"
4 xmlns:th="http://www.thymeleaf.org"
5 th:fragment="layout(uri,maincontent)"
6 thymeproxy:variables="SET:sitemap.json"
10 <meta http-equiv="X-UA-Compatible" content="IE=edge">
11 <meta name="viewport" content="width=device-width, initial-scale=1">
12 <title th:replace="${title}">juplo - BASISTEMPLATE</title>
13 <link rel="stylesheet" href="../css/juplo.css" th:href="@{/css/juplo.css}">
14 <link rel="caononical" href="layout.html" th:replace="${scripts_head}?:~{}">
17 th:fragment="body(uri, maincontent, marginalcontent)"
18 thymeproxy:variables="${json}"
19 th:with="crumbs=${_crumbs.get(uri)}"
21 <nav class="column is-8-desktop is-offset-2-desktop">
22 <div class="navbar" role="navigation" aria-label="main navigation">
23 <div class="navbar-brand">
24 <a class="navbar-item" href="../index.html" th:href="@{/}" title="Home">
25 <img src="/img/logo.svg" alt="juplo">
28 <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">
29 <span aria-hidden="true"></span>
30 <span aria-hidden="true"></span>
31 <span aria-hidden="true"></span>
35 <div id="navbar" class="navbar-menu">
36 <div class="navbar-start">
37 <a class="navbar-item" href="../blog/" th:href="@{${entry.value}}">Blog</a>
39 <a class="navbar-item" href="../projects.html">Projects</a>
40 <a class="navbar-item" href="../about.html">About</a>
43 <div class="navbar-end">
44 <a class="navbar-item" href="../about.html">About</a>
49 <section class="section">
50 <div class="container">
52 <div class="column is-8-desktop is-offset-2-desktop breadcrumb" aria-label="breadcrumbs">
53 <strong>You are here:</strong>
55 <li><a href="../index.html" th:href="@{/index.html}">Home</a></li>
56 <li th:each="crumb: ${crumbs}"><a href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a></li>
58 <li class="is-active"><a class="b" th:text="${title}">Fix SWF</a></li>
65 <section class="section">
66 <div class="container">
68 <div class="column is-8-desktop is-offset-2-desktop">
70 <h1 class="title" th:include="${title}">Title</h1>
71 <div th:fragment="maincontent">
73 <strong>Lorem ipsum</strong> dolor
74 <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
75 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
76 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
77 <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
78 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
79 irure dolor in reprehenderit in voluptate velit esse cillum dolore
80 eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
81 proident, sunt in culpa qui officia deserunt mollit anim id est
84 <h2 class="title">Duis aute irure dolor</h2>
86 <li>Operators and other mathematical stuff: -+/*</li>
88 Characters offten used in programming languages:
89 {(<>)}@$?%*#;:&/\!^"'`~
91 <li>Special german characters: ÄäÖöÜü</li>
92 <li>Other special characters: @?¢§%°</li>
94 <h2 class="title">Excepteur sint occaecat cupidatat</h2>
96 Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit,
97 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
98 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
99 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
100 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
101 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
102 culpa qui officia deserunt mollit anim id est laborum.
105 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
106 eiusmod tempor incididunt ut labore et dolore magna aliqua.
107 <strong>Ut enim ad minim veniam, quis nostrud <em>exercitation
108 ullamco</em> laboris nisi ut aliquip ex ea commodo consequat</strong>.
109 Duis aute irure dolor in reprehenderit in voluptate velit esse
110 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
111 cupidatat non proident, sunt in culpa qui officia deserunt mollit
116 <code><a href="https://github.com/jgthms/bulma">bulma</a></code>
119 <code><a href="https://github.com/sass/node-sass">node-sass</a></code> to compile your own Sass file
122 <code><a href="https://github.com/postcss/postcss-cli">postcss-cli</a></code> and <code><a href="https://github.com/postcss/autoprefixer">autoprefixer</a></code> to add support for older browsers
125 <code><a href="https://babeljs.io/docs/usage/cli/">babel-cli</a></code>,
126 <code><a href="https://github.com/babel/babel-preset-env">babel-preset-env</a></code>
128 <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code>
129 for compiling ES6 JavaScript files
133 Apart from <code>package.json</code>, the following files are included:
137 <code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a>
140 <code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files
143 <code>index.html</code> this HTML5 file
146 <code>_sass/main.scss</code> a basic SCSS file that <strong>imports Bulma</strong> and explains how to <strong>customize</strong> your styles, and compiles to <code>css/main.css</code>
149 <code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code>
154 To see if your setup works, follow these steps:
159 <strong>Move</strong> to this directory:
161 <pre><code>cd bulma-start</code></pre>
166 <strong>Install</strong> all dependencies:
168 <pre><code>npm install</code></pre>
173 <strong>Start</strong> the CSS and JS watchers:
175 <pre><code>npm start</code></pre>
180 <strong>Edit</strong> <code>_sass/main.scss</code> by adding the following rule at the <strong>end</strong> of the file:
182 <pre><span style="color: #22863a;">html</span> {
183 <span style="color: #005cc5;"><span style="color: #005cc5;">background-color</span></span>: <span style="color: #24292e">$green</span>;
189 The page background should turn <strong class="has-text-success">green</strong>!
193 You're <strong>ready</strong> to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one!
195 For example, this page is <strong>only</strong> built with the following <strong>Bulma elements</strong>:
199 <table class="table is-bordered is-fullwidth">
210 <code><a href="http://bulma.io/documentation/columns/basics">columns</a></code>
211 <code><a href="http://bulma.io/documentation/columns/basics">column</a></code>
217 <code><a href="http://bulma.io/documentation/layout/section">section</a></code>
218 <code><a href="http://bulma.io/documentation/layout/container">container</a></code>
219 <code><a href="http://bulma.io/documentation/layout/footer">footer</a></code>
225 <code><a href="http://bulma.io/documentation/elements/button">button</a></code>
226 <code><a href="http://bulma.io/documentation/elements/content">content</a></code>
227 <code><a href="http://bulma.io/documentation/elements/title">title</a></code>
228 <code><a href="http://bulma.io/documentation/elements/title">subtitle</a></code>
234 <code><a href="http://bulma.io/documentation/form/general">field</a></code>
235 <code><a href="http://bulma.io/documentation/form/general">control</a></code>
241 <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-centered</a></code>
242 <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-weight-semibold</a></code>
247 <div class="content">
249 If you want to <strong>learn more</strong>, follow these links:
252 <div class="field is-grouped">
254 <a class="button is-medium is-primary" href="http://bulma.io">
255 <strong class="has-text-weight-semibold">Bulma homepage</strong>
259 <a class="button is-medium is-link" href="http://bulma.io/documentation/overview/start/">
260 <strong class="has-text-weight-semibold">Documentation</strong>
268 <footer class="footer has-text-centered">
269 <div class="container">
270 <div class="columns">
271 <div class="column is-8-desktop is-offset-2-desktop">
273 <strong class="has-text-weight-semibold">
274 <a href="https://www.npmjs.com/package/bulma-start">bulma-start@0.0.4</a>
279 Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>
282 <p style="margin-top: 1rem;">
283 <a href="http://bulma.io">
284 <img src="made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
291 <div id="page" class="cf">
292 <header id="header"><!-- TODO: Vereinfachung -> für uri == index.html a gegen strong ausstauschen -->
295 <div id="breadcrumb">
296 <strong class="b title">You are here:</strong>
297 <ol class="b" th:include="~{::#crumbs}?:_">
298 <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
299 <li class="b" th:each="crumb: ${crumbs}">
300 <a class="b" href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a>
303 <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
306 <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
309 <main class="content cf">
310 <article id="content" class="main" th:include="${maincontent}">
311 <header><h1 th:include="${title}">juplo - BASISTEMPLATE</h1></header>
313 <div class="marginal">
315 th:include="~{::#navigation}?:_"
316 th:with="section=${crumbs != null ? crumbs[0] : null}"
319 <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
320 <h1 class="nav">Navigation</h1>
321 <h2 class="nav menu">Section-Menu</h2>
322 <ul id="menu" class="cf">
323 <li class="m blog" th:each="entry : ${_sections}" th:class="'m ' + ${entry.key}">
324 <a href="../blog/" th:href="@{${entry.value}}" class="m" th:class="${entry.value == section} ? 'm selected' : 'm'" th:text="${_titles.get(entry.value)}">Blog</a>
327 <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
328 <li class="m about"><a href="../about.html" class="m">About</a></li>
331 <h2 class="nav submenu">
332 <span class="s">Submenu for section</span>
333 <a class="s selected" href="../projects.html" th:href="@{${section}}" th:text="${_titles.get(section)}">Projects</a>
335 <ul th:include="${submenu}?:_"
337 len=${crumbs.size()},
338 submenu=${_childs.get(section)},
343 th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
345 <li th:fragment="submenu(submenu, parent, pos)"
346 th:each="entry : ${submenu}"
349 selected=${!child and crumbs.get(pos) == entry},
350 sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
351 childs=${entry == parent ? null : _childs.get(entry)}
354 th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
356 <a href="../potemkin/fix-swf/overview.html"
357 th:if="${entry != parent}"
358 th:href="@{${entry}}"
360 th:class="${selected} ? 's selected' : 's'"
361 th:text="${_titles.get(entry)}"
363 <ul th:if="${selected and childs != null}"
365 th:class="'s' + (${selected && pos == crumbs.size()-1} ? ' active' : '') + (${entry == uri or (len > 1 and entry == crumbs.get(len-2) and _childs.get(uri) == null)} ? ' selected' : '')"
367 <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
370 <strong class="s">Overview</strong>
373 <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
374 <li class="s"><a href="#" class="s">FAQ</a></li>
375 <li class="s"><a href="#" class="s">Documentation</a></li>
380 <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
381 <li class="s off"><a href="#" class="s">jquery.openx</a></li>
382 <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
383 <li class="s sub off"><a href="#" class="s">accelerator</a></li>
384 <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
389 <aside class="m" th:insert="${marginalcontent}?:~{}">
390 <!--/* the following is only visible during natural templating -->
391 <h1>Other nasty but marginal stuff</h1>
393 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
394 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
395 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
396 aliquip ex ea commodo consequat. Duis aute irure dolor in
397 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
398 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
399 culpa qui officia deserunt mollit anim id est laborum.
403 <h1>More nasty stuff</h1>
405 This one is really short!
413 <ul id="footerlinks" th:include="~{::#links}?:_">
414 <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
415 <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
416 <li class="f"><a class="f" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a></li>