From 637ada35ccc5ed2b74e2eeb72ea32a05874c6390 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Tue, 16 Feb 2021 19:12:21 +0100 Subject: [PATCH] WIP:bulma --- dist/templates/layout.html | 275 +++++++++++++++++++------------------ 1 file changed, 144 insertions(+), 131 deletions(-) diff --git a/dist/templates/layout.html b/dist/templates/layout.html index b210c32f..94e1b5e5 100644 --- a/dist/templates/layout.html +++ b/dist/templates/layout.html @@ -46,98 +46,155 @@ +
+
+
+
+ You are here: + +
+
+
+
-

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. -
  2. -

    - Install all dependencies: -
    - 

    npm install
    -

    -
    3. -
  3. -

    - Start the CSS and JS watchers: -
    - 

    npm start
    -

    -
    4. -
  4. -

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

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

    -
    5. -
-

- 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: -

+

Title

+
+

+ Lorem ipsum dolor + sit amet, + consectetur adipisicing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore + eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +

+

Duis aute irure dolor

+
    +
  • Operators and other mathematical stuff: -+/*
    • +
  • + Characters offten used in programming languages: + {(<>)}@$?%*#;:&/\!^"'`~ +
    • +
  • Special german characters: ÄäÖöÜü
    • +
  • Other special characters: @?¢§%°
    • +
+

Excepteur sint occaecat cupidatat

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. +

+ +

+ 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. +
  2. +

    + Install all dependencies: +
    + 

    npm install
    +

    +
    3. +
  3. +

    + Start the CSS and JS watchers: +
    + 

    npm start
    +

    +
    4. +
  4. +

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

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

    +
    5. +
+

+ 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: +

+
@@ -252,50 +309,6 @@

juplo - BASISTEMPLATE

-
-

- Lorem ipsum dolor - sit amet, - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore - eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. -

-

Duis aute irure dolor

-
    -
  • Operators and other mathematical stuff: -+/*
    • -
  • - Characters offten used in programming languages: - {(<>)}@$?%*#;:&/\!^"'`~ -
    • -
  • Special german characters: ÄäÖöÜü
    • -
  • Other special characters: @?¢§%°
    • -
-

Excepteur sint occaecat cupidatat

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris - nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. -

-