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="hero is-primary">
22 <div class="hero-body">
23 <div class="container">
25 <div class="column is-8-desktop is-offset-2-desktop">
26 <div class="navbar" role="navigation" aria-label="main navigation">
27 <div class="navbar-brand">
28 <a class="navbar-item" href="../index.html" th:href="@{/}" title="Home">
29 <img src="/img/logo.svg" alt="juplo">
32 <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
33 <span aria-hidden="true"></span>
34 <span aria-hidden="true"></span>
35 <span aria-hidden="true"></span>
39 <div id="navbarBasicExample" class="navbar-menu">
40 <div class="navbar-start">
41 <a class="navbar-item">
45 <a class="navbar-item">
49 <div class="navbar-item has-dropdown is-hoverable">
50 <a class="navbar-link">
54 <div class="navbar-dropdown">
55 <a class="navbar-item">
58 <a class="navbar-item">
61 <a class="navbar-item">
64 <hr class="navbar-divider">
65 <a class="navbar-item">
72 <div class="navbar-end">
73 <div class="navbar-item">
75 <a class="button is-primary">
76 <strong>Sign up</strong>
78 <a class="button is-light">
91 <section class="section">
92 <div class="container">
94 <div class="column is-8-desktop is-offset-2-desktop">
99 Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
102 <code><a href="https://github.com/jgthms/bulma">bulma</a></code>
105 <code><a href="https://github.com/sass/node-sass">node-sass</a></code> to compile your own Sass file
108 <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
111 <code><a href="https://babeljs.io/docs/usage/cli/">babel-cli</a></code>,
112 <code><a href="https://github.com/babel/babel-preset-env">babel-preset-env</a></code>
114 <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code>
115 for compiling ES6 JavaScript files
119 Apart from <code>package.json</code>, the following files are included:
123 <code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a>
126 <code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files
129 <code>index.html</code> this HTML5 file
132 <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>
135 <code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code>
140 To see if your setup works, follow these steps:
145 <strong>Move</strong> to this directory:
147 <pre><code>cd bulma-start</code></pre>
152 <strong>Install</strong> all dependencies:
154 <pre><code>npm install</code></pre>
159 <strong>Start</strong> the CSS and JS watchers:
161 <pre><code>npm start</code></pre>
166 <strong>Edit</strong> <code>_sass/main.scss</code> by adding the following rule at the <strong>end</strong> of the file:
168 <pre><span style="color: #22863a;">html</span> {
169 <span style="color: #005cc5;"><span style="color: #005cc5;">background-color</span></span>: <span style="color: #24292e">$green</span>;
175 The page background should turn <strong class="has-text-success">green</strong>!
179 You're <strong>ready</strong> to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one!
181 For example, this page is <strong>only</strong> built with the following <strong>Bulma elements</strong>:
184 <table class="table is-bordered is-fullwidth">
195 <code><a href="http://bulma.io/documentation/columns/basics">columns</a></code>
196 <code><a href="http://bulma.io/documentation/columns/basics">column</a></code>
202 <code><a href="http://bulma.io/documentation/layout/section">section</a></code>
203 <code><a href="http://bulma.io/documentation/layout/container">container</a></code>
204 <code><a href="http://bulma.io/documentation/layout/footer">footer</a></code>
210 <code><a href="http://bulma.io/documentation/elements/button">button</a></code>
211 <code><a href="http://bulma.io/documentation/elements/content">content</a></code>
212 <code><a href="http://bulma.io/documentation/elements/title">title</a></code>
213 <code><a href="http://bulma.io/documentation/elements/title">subtitle</a></code>
219 <code><a href="http://bulma.io/documentation/form/general">field</a></code>
220 <code><a href="http://bulma.io/documentation/form/general">control</a></code>
226 <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-centered</a></code>
227 <code><a href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-weight-semibold</a></code>
232 <div class="content">
234 If you want to <strong>learn more</strong>, follow these links:
237 <div class="field is-grouped">
239 <a class="button is-medium is-primary" href="http://bulma.io">
240 <strong class="has-text-weight-semibold">Bulma homepage</strong>
244 <a class="button is-medium is-link" href="http://bulma.io/documentation/overview/start/">
245 <strong class="has-text-weight-semibold">Documentation</strong>
253 <footer class="footer has-text-centered">
254 <div class="container">
255 <div class="columns">
256 <div class="column is-8-desktop is-offset-2-desktop">
258 <strong class="has-text-weight-semibold">
259 <a href="https://www.npmjs.com/package/bulma-start">bulma-start@0.0.4</a>
264 Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>
267 <p style="margin-top: 1rem;">
268 <a href="http://bulma.io">
269 <img src="made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
276 <div id="page" class="cf">
277 <header id="header"><!-- TODO: Vereinfachung -> für uri == index.html a gegen strong ausstauschen -->
280 <div id="breadcrumb">
281 <strong class="b title">You are here:</strong>
282 <ol class="b" th:include="~{::#crumbs}?:_">
283 <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
284 <li class="b" th:each="crumb: ${crumbs}">
285 <a class="b" href="../projects.html" th:href="@{${crumb}}" th:text="${_titles.get(crumb)}">Projects</a>
288 <li class="b"><strong class="b" th:text="${title}">Fix SWF</strong></li>
291 <a class="hide" href="#nav" title="Show navigation menu">Jump to navigation</a>
294 <main class="content cf">
295 <article id="content" class="main" th:include="${maincontent}">
296 <header><h1 th:include="${title}">juplo - BASISTEMPLATE</h1></header>
297 <div th:fragment="maincontent">
299 <strong>Lorem ipsum</strong> dolor
300 <a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}">sit amet</a>,
301 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
302 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
303 <a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">exercitation</a>
304 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
305 irure dolor in reprehenderit in voluptate velit esse cillum dolore
306 eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
307 proident, sunt in culpa qui officia deserunt mollit anim id est
310 <h2>Duis aute irure dolor</h2>
312 <li>Operators and other mathematical stuff: -+/*</li>
314 Characters offten used in programming languages:
315 {(<>)}@$?%*#;:&/\!^"'`~
317 <li>Special german characters: ÄäÖöÜü</li>
318 <li>Other special characters: @?¢§%°</li>
320 <h2>Excepteur sint occaecat cupidatat</h2>
322 Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit,
323 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
324 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
325 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
326 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
327 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
328 culpa qui officia deserunt mollit anim id est laborum.
331 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
332 eiusmod tempor incididunt ut labore et dolore magna aliqua.
333 <strong>Ut enim ad minim veniam, quis nostrud <em>exercitation
334 ullamco</em> laboris nisi ut aliquip ex ea commodo consequat</strong>.
335 Duis aute irure dolor in reprehenderit in voluptate velit esse
336 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
337 cupidatat non proident, sunt in culpa qui officia deserunt mollit
342 <div class="marginal">
344 th:include="~{::#navigation}?:_"
345 th:with="section=${crumbs != null ? crumbs[0] : null}"
348 <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
349 <h1 class="nav">Navigation</h1>
350 <h2 class="nav menu">Section-Menu</h2>
351 <ul id="menu" class="cf">
352 <li class="m blog" th:each="entry : ${_sections}" th:class="'m ' + ${entry.key}">
353 <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>
356 <li class="m projects"><a href="../projects.html" class="m selected">Projects</a></li>
357 <li class="m about"><a href="../about.html" class="m">About</a></li>
360 <h2 class="nav submenu">
361 <span class="s">Submenu for section</span>
362 <a class="s selected" href="../projects.html" th:href="@{${section}}" th:text="${_titles.get(section)}">Projects</a>
364 <ul th:include="${submenu}?:_"
366 len=${crumbs.size()},
367 submenu=${_childs.get(section)},
372 th:class="'s' + (${len == 1 or (len == 2 and _childs.get(uri) == null)} ? ' selected' : '')"
374 <li th:fragment="submenu(submenu, parent, pos)"
375 th:each="entry : ${submenu}"
378 selected=${!child and crumbs.get(pos) == entry},
379 sibling=${pos + 1 == len and (_childs.get(uri) == null or uri == parent)},
380 childs=${entry == parent ? null : _childs.get(entry)}
383 th:class="'s' + (${childs} ? ' sub' : '') + (${selected or sibling or child} ? '' : ' off')"
385 <a href="../potemkin/fix-swf/overview.html"
386 th:if="${entry != parent}"
387 th:href="@{${entry}}"
389 th:class="${selected} ? 's selected' : 's'"
390 th:text="${_titles.get(entry)}"
392 <ul th:if="${selected and childs != null}"
394 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' : '')"
396 <li th:replace="this :: submenu(submenu=${childs}, parent=${entry}, pos=${pos + 1})"
399 <strong class="s">Overview</strong>
402 <li class="s"><a href="../potemkin/fix-swf/getting-started.html" class="s">Getting Started</a></li>
403 <li class="s"><a href="#" class="s">FAQ</a></li>
404 <li class="s"><a href="#" class="s">Documentation</a></li>
409 <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
410 <li class="s off"><a href="#" class="s">jquery.openx</a></li>
411 <li class="s sub off"><a href="../potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}" class="s">HTML-Experimente</a></li>
412 <li class="s sub off"><a href="#" class="s">accelerator</a></li>
413 <li class="s off"><a href="../potemkin/typo.html" th:href="@{/potemkin/typo.html}" class="s">Typography</a></li>
418 <aside class="m" th:insert="${marginalcontent}?:~{}">
419 <!--/* the following is only visible during natural templating -->
420 <h1>Other nasty but marginal stuff</h1>
422 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
423 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
424 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
425 aliquip ex ea commodo consequat. Duis aute irure dolor in
426 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
427 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
428 culpa qui officia deserunt mollit anim id est laborum.
432 <h1>More nasty stuff</h1>
434 This one is really short!
442 <ul id="footerlinks" th:include="~{::#links}?:_">
443 <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
444 <li class="f"><a class="f" href="../impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
445 <li class="f"><a class="f" href="../datenschutz.html" th:href="@{/datenschutz.html}">Datenschutz</a></li>