X-Git-Url: https://juplo.de/gitweb/?p=website;a=blobdiff_plain;f=dist%2Ftemplates%2Flayout.html;h=62c68f3b2b72ea996db8acae74c84da4c2efae5b;hp=e6af3404d86ce90f6bffde0b6005070c974fa788;hb=b19975ae32c2f78e1d5f64ef43c303c3b2870e9f;hpb=f50f8f433dca15c7ce2a46e0a6a7cfbc8c04ef53 diff --git a/dist/templates/layout.html b/dist/templates/layout.html index e6af3404..62c68f3b 100644 --- a/dist/templates/layout.html +++ b/dist/templates/layout.html @@ -6,49 +6,275 @@ thymeproxy:variables="SET:sitemap.json" > + + + juplo - BASISTEMPLATE - - - - - - - - - - - - - - - - - - - - - - - - + + +
+
+ +
+
+
+
+
+
+
+

Title

+

+

+ Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text + +

+ Apart from package.json, the following files are included: +

+
    +
  • + .babelrc configuration file for Babel +
  • +
  • + .gitignore common Git ignored files +
  • +
  • + index.html this HTML5 file +
  • +
  • + _sass/main.scss a basic SCSS file that imports Bulma and explains how to customize your styles, and compiles to css/main.css +
  • +
  • + _javascript/main.js an ES6 JavaScript that compiles to lib/main.js +
  • +
+

Try it out!

+

+ To see if your setup works, follow these steps: +

+
    +
  1. +

    + Move to this directory: +
    +

    cd bulma-start
    +

    +
  2. +
  3. +

    + Install all dependencies: +
    +

    npm install
    +

    +
  4. +
  5. +

    + Start the CSS and JS watchers: +
    +

    npm start
    +

    +
  6. +
  7. +

    + Edit _sass/main.scss by adding the following rule at the end of the file: +
    +

    html {
    +  background-color: $green;
    +}
    +

    +
  8. +
+

+ The page background should turn green! +

+

Get started

+

+ You're ready to create your own designs with Bulma. Just edit or duplicate this page, or simply create a new one! +
+ For example, this page is only built with the following Bulma elements: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeCSS class
Columns + columns + column +
Layout + section + container + footer +
Elements + button + content + title + subtitle +
Form + field + control +
Helpers + has-text-centered + has-text-weight-semibold +
+
+

+ If you want to learn more, follow these links: +

+
+ +
+
+
+
+