From b19975ae32c2f78e1d5f64ef43c303c3b2870e9f Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Tue, 16 Feb 2021 18:16:21 +0100 Subject: [PATCH] WIP:bulma --- Gruntfile.js | 197 ------------------- dist/templates/layout.html | 294 +++++++++++++++++++++++++---- package-lock.json | 94 +++++++++ package.json | 20 +- _sass/main.scss => sass/juplo.scss | 0 5 files changed, 359 insertions(+), 246 deletions(-) delete mode 100644 Gruntfile.js rename _sass/main.scss => sass/juplo.scss (100%) diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index d304dea0..00000000 --- a/Gruntfile.js +++ /dev/null @@ -1,197 +0,0 @@ -module.exports = function (grunt) { - 'use strict'; - - grunt.loadNpmTasks('grunt-contrib-clean'); - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-contrib-less'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-newer'); - - grunt.initConfig({ - - clean: { - css: [ 'dist/css' ] - }, - - less: { - base: { - options: { - strictMath: true, - sourceMap: true, - outputSourceFiles: true, - sourceMapURL: 'base.css.map', - sourceMapFilename: 'dist/css/base.css.map' - }, - src: 'less/base.less', - dest: 'dist/css/base.css' - }, - screen: { - options: { - strictMath: true, - sourceMap: true, - outputSourceFiles: true, - sourceMapURL: 'screen.css.map', - sourceMapFilename: 'dist/css/screen.css.map' - }, - src: 'less/screen.less', - dest: 'dist/css/screen.css' - }, - print: { - options: { - strictMath: true, - sourceMap: true, - outputSourceFiles: true, - sourceMapURL: 'print.css.map', - sourceMapFilename: 'dist/css/print.css.map' - }, - src: 'less/print.less', - dest: 'dist/css/print.css' - }, - ie8: { - options: { - strictMath: true, - sourceMap: true, - outputSourceFiles: true, - sourceMapURL: 'ie8.css.map', - sourceMapFilename: 'dist/css/ie8.css.map' - }, - src: 'less/ie8.less', - dest: 'dist/css/ie8.css' - }, - tablet: { - options: { - strictMath: true, - sourceMap: true, - outputSourceFiles: true, - sourceMapURL: 'tablet.css.map', - sourceMapFilename: 'dist/css/tablet.css.map' - }, - src: 'less/tablet.less', - dest: 'dist/css/tablet.css' - }, - phone: { - options: { - strictMath: true, - sourceMap: true, - outputSourceFiles: true, - sourceMapURL: 'phone.css.map', - sourceMapFilename: 'dist/css/phone.css.map' - }, - src: 'less/phone.less', - dest: 'dist/css/phone.css' - }, - tiny: { - options: { - strictMath: true, - sourceMap: true, - outputSourceFiles: true, - sourceMapURL: 'tiny.css.map', - sourceMapFilename: 'dist/css/tiny.css.map' - }, - src: 'less/tiny.less', - dest: 'dist/css/tiny.css' - }, - seitenaufteilung: { - options: { - strictMath: true, - sourceMap: true, - outputSourceFiles: true, - sourceMapURL: 'seitenaufteilung.css.map', - sourceMapFilename: 'dist/css/seitenaufteilung.css.map' - }, - src: 'less/seitenaufteilung.less', - dest: 'dist/css/seitenaufteilung.css' - }, - seitenkopf: { - options: { - strictMath: true, - sourceMap: true, - outputSourceFiles: true, - sourceMapURL: 'seitenkopf.css.map', - sourceMapFilename: 'dist/css/seitenkopf.css.map' - }, - src: 'less/seitenkopf.less', - dest: 'dist/css/seitenkopf.css' - } - }, - - cssmin: { - options: { - compatibility: 'ie8', - sourceMap: true, - advanced: false - }, - base: { - src: 'dist/css/base.css', - dest: 'dist/css/base.min.css' - }, - screen: { - src: 'dist/css/screen.css', - dest: 'dist/css/screen.min.css' - }, - print: { - src: 'dist/css/print.css', - dest: 'dist/css/print.min.css' - }, - ie8: { - src: 'dist/css/ie8.css', - dest: 'dist/css/ie8.min.css' - }, - tablet: { - src: 'dist/css/tablet.css', - dest: 'dist/css/tablet.min.css' - }, - phone: { - src: 'dist/css/phone.css', - dest: 'dist/css/phone.min.css' - }, - tiny: { - src: 'dist/css/tiny.css', - dest: 'dist/css/tiny.min.css' - }, - seitenaufteilung: { - src: 'dist/css/seitenaufteilung.css', - dest: 'dist/css/seitenaufteilung.min.css' - }, - seitenkopf: { - src: 'dist/css/seitenkopf.css', - dest: 'dist/css/seitenkopf.min.css' - } - }, - - watch: { - css: { - files: [ 'less/**/*.less' ], - tasks: 'css' - } - } - - }) - - - // Task to build and minify the CSS - grunt.registerTask('css', [ 'less', 'newer:cssmin' ]); - - // Task to build the distribution - grunt.registerTask('dist', [ 'css' ]); - - - // Task to start a local http-server for development - grunt.registerTask('http-server', function() { - - grunt.util.spawn({ - cmd: 'node_modules/http-server/bin/http-server', - args: [ 'dist', '-p8888', '-c0' ], - opts: { stdio: 'inherit' } - }); - - }); - - // Task to start development-environment - grunt.registerTask('devel', [ 'dist', 'http-server', 'watch' ]); - - - // Default task. - grunt.registerTask('default', [ 'dist' ]); - -} 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. +
  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: +

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

+
+
+

+ + Bulma homepage + +

+

+ + Documentation + +

+
+
+
+
+
+