Setup fronted stuff with Bulma

Gruntfile.js

@@ -0,0 +1,116 @@
+module.exports = grunt => {
+
+  // load grunt tasks automatically
+  require('load-grunt-tasks')(grunt);
+
+  // track the time each task takes
+  require('time-grunt')(grunt);
+
+  // default config
+  grunt.initConfig({
+    paths: {
+      assets: './resources/assets',
+      dist: './public/assets'
+    }
+  });
+
+  // Scripts
+  grunt.config('browserify', {
+    prod: {
+      options: {
+        transform: ['babelify', ['uglifyify', {global: true}]],
+        browserifyOptions: {
+          debug: true
+        }
+      },
+      files: [
+        {
+          src: '<%= paths.assets %>/js/app.js',
+          dest: '<%= paths.dist %>/app.js'
+        }
+      ]
+    }
+  });
+
+  // Concat
+  grunt.config('concat', {
+    js_dependencies: {
+      src: [],
+      dest: '<%= paths.dist %>/dependencies.js'
+    }
+  });
+
+  // Post CSS
+  const autoprefixer = require('autoprefixer');
+
+  grunt.config('postcss', {
+    prod: {
+      options: {
+        map: true,
+        processors: [
+          autoprefixer({
+            browsers: 'last 3 version'
+          })
+        ]
+      },
+      src: '<%= paths.dist %>/app.css'
+    }
+  });
+
+  // CSS
+  const sass = require('node-sass');
+
+  grunt.config('sass', {
+    options: {
+      implementation: sass
+    },
+    build: {
+      options: {
+        outputStyle: 'compressed',
+        sourceMap: true
+      },
+      files: {
+        '<%= paths.dist %>/app.css': '<%= paths.assets %>/sass/app.scss'
+      }
+    }
+  });
+
+  // Copy tasks
+  grunt.config('copy', {
+    fontawesome: {
+      expand: true,
+      flatten: true,
+      src: ['node_modules/font-awesome/fonts/*'],
+      dest: '<%= paths.dist %>/fonts/'
+    }
+  });
+
+  // File watcher
+  grunt.config('watch', {
+    sass: {
+      files: '<%= paths.assets %>/sass/**/*.scss',
+      tasks: ['sass', 'postcss']
+    },
+    js: {
+      files: '<%= paths.assets %>/js/**/*.js',
+      tasks: ['browserify']
+    }
+  });
+
+  // Tasks
+  grunt.registerTask('build', [
+    //'browserify',
+    //'concat',
+    'sass',
+    'postcss',
+    'copy'
+  ]);
+
+  grunt.registerTask('dev', [
+    'build',
+    'watch'
+  ]);
+
+  grunt.registerTask('default', ['build']);
+
+};

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "linkace",
+  "version": "0.0.1",
+  "description": "A small, selfhosted bookmark manager.",
+  "homepage": "https://github.com/Kovah/LinkAce",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Kovah/LinkAce.git"
+  },
+  "author": "Kovah.de",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Kovah/LinkAce/issues"
+  },
+  "devDependencies": {
+    "autoprefixer": "^8.6.5",
+    "babel-core": "^6.26.3",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babelify": "^8.0.0",
+    "browserify": "^16.2.2",
+    "grunt": "^1.0.3",
+    "grunt-browser-sync": "^2.2.0",
+    "grunt-browserify": "^5.3.0",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-exorcise": "^2.1.1",
+    "grunt-modernizr": "^1.0.3",
+    "grunt-postcss": "^0.9.0",
+    "grunt-sass": "^3.0.1",
+    "load-grunt-tasks": "^4.0.0",
+    "node-sass": "^4.9.2",
+    "postcss": "^6.0.23",
+    "time-grunt": "^1.4.0",
+    "uglifyify": "^5.0.1"
+  },
+  "dependencies": {
+    "bulma": "^0.7.1",
+    "font-awesome": "^4.7.0"
+  }
+}

public/assets/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

resources/assets/sass/_bulma-variables.sass

@@ -0,0 +1,72 @@
+// Colors
+
+$black: hsl(0, 0%, 4%) !default
+$black-bis: hsl(0, 0%, 7%) !default
+$black-ter: hsl(0, 0%, 14%) !default
+
+$grey-darker: hsl(0, 0%, 21%) !default
+$grey-dark: hsl(0, 0%, 29%) !default
+$grey: hsl(0, 0%, 48%) !default
+$grey-light: hsl(0, 0%, 71%) !default
+$grey-lighter: hsl(0, 0%, 86%) !default
+
+$white-ter: hsl(0, 0%, 96%) !default
+$white-bis: hsl(0, 0%, 98%) !default
+$white: hsl(0, 0%, 100%) !default
+
+$orange: hsl(14, 100%, 53%) !default
+$yellow: hsl(48, 100%, 67%) !default
+$green: hsl(141, 71%, 48%) !default
+$turquoise: hsl(171, 100%, 41%) !default
+$cyan: hsl(204, 86%, 53%) !default
+$blue: hsl(217, 40%, 45%) !default
+$purple: hsl(271, 100%, 71%) !default
+$red: hsl(348, 100%, 61%) !default
+
+// Typography
+
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: monospace !default
+$render-mode: optimizeLegibility !default
+
+$size-1: 3rem !default
+$size-2: 2.5rem !default
+$size-3: 2rem !default
+$size-4: 1.5rem !default
+$size-5: 1.25rem !default
+$size-6: 1rem !default
+$size-7: 0.75rem !default
+
+$weight-light: 300 !default
+$weight-normal: 400 !default
+$weight-medium: 500 !default
+$weight-semibold: 600 !default
+$weight-bold: 700 !default
+
+// Responsiveness
+
+// The container horizontal gap, which acts as the offset for breakpoints
+$gap: 64px !default
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default
+// 960px container + 4rem
+$desktop: 960px + (2 * $gap) !default
+// 1152px container + 4rem
+$widescreen: 1152px + (2 * $gap) !default
+$widescreen-enabled: true !default
+// 1344px container + 4rem
+$fullhd: 1344px + (2 * $gap) !default
+$fullhd-enabled: true !default
+
+// Miscellaneous
+
+$easing: ease-out !default
+$radius-small: 2px !default
+$radius: 4px !default
+$radius-large: 6px !default
+$radius-rounded: 290486px !default
+$speed: 86ms !default
+
+// Flags
+
+$variable-columns: true !default

resources/assets/sass/app.scss

@@ -0,0 +1,3 @@
+
+@import "bulma-variables";
+@import "../../../node_modules/bulma/bulma";