From 6a1435be7f6888a5d30d7e47d4fc1791561c921b Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Mon, 24 Aug 2015 09:36:21 +0200 Subject: [PATCH 1/1] Simple Example-Project for Template-Development --- .gitignore | 2 ++ Gruntfile.js | 46 ++++++++++++++++++++++++ html/layout.html | 89 ++++++++++++++++++++++++++++++++++++++++++++++ less/frontend.less | 73 +++++++++++++++++++++++++++++++++++++ package.json | 11 ++++++ 5 files changed, 221 insertions(+) create mode 100644 .gitignore create mode 100644 Gruntfile.js create mode 100644 html/layout.html create mode 100644 less/frontend.less create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..de4d1f0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +dist +node_modules diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..a51b0fa --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,46 @@ +module.exports = function(grunt) { + + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-contrib-watch'); + + grunt.initConfig({ + + pkg: grunt.file.readJSON('package.json'), + + copy: { + html: { + expand: true, + cwd: 'html', + src: '**/*.html', + dest: 'dist/thymeleaf/templates', + } + }, + + less: { + compile: { + options: { + sourceMapURL: 'frontend.css.map', + sourceMapFilename: 'dist/css/frontend.css.map' + }, + src: 'less/frontend.less', + dest: 'dist/css/frontend.css' + } + }, + + watch: { + copy: { + files: [ 'html/**/*.html' ], + tasks: [ 'copy' ] + }, + less: { + files: [ 'less/**/*.less' ], + tasks: [ 'less' ] + } + } + + }); + + grunt.registerTask('default', [ 'copy', 'less' ]); + +}; diff --git a/html/layout.html b/html/layout.html new file mode 100644 index 0000000..be958d5 --- /dev/null +++ b/html/layout.html @@ -0,0 +1,89 @@ + + + + + + + + + + Layout-Template + + + + + + + +
+

yourSHOUTER - Startseite

+
+ + +
+
+ + +
+ +
+

Layout-Template

+

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

+
+ +
+ + + + + + diff --git a/less/frontend.less b/less/frontend.less new file mode 100644 index 0000000..8b0d18c --- /dev/null +++ b/less/frontend.less @@ -0,0 +1,73 @@ +@background: #111; +@normal: #090; +@light: #9f9; +@lighter: #fff; + + +body +{ + color: @normal; + background-color: @background; + font-size: 20px; +} +a +{ + color: @light; + text-decoration: none; + &:hover, + &:focus + { + color: @lighter; + text-decoration: underline; + } + &:active + { + color: @lighter; + } +} +hr +{ + margin: 0; + border-color: @normal; + clear: both; +} + +header +{ + margin-bottom: 3em; +} +nav +{ + > h3 + { + display: none; + } + > ul + { + margin: 0; + padding: 0; + > li + { + list-style-type: none; + float: left; + margin: .5em .5em .5em 0; + &:before + { + content: '::'; + margin-right: .5em; + } + &:first-child + { + margin-left: .5em; + &:before + { + content: none; + } + } + } + } +} +footer +{ + margin-top: 3em; +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..349b063 --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "name": "frontend", + "version": "1.0.0", + "description": "Simple Example-Project for Template-Development", + "devDependencies": { + "grunt": "~0.4.5", + "grunt-contrib-copy": "~0.8.1", + "grunt-contrib-less": "~1.0.1", + "grunt-contrib-watch": "~0.6.1" + } +} -- 2.20.1