init

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+*.log
+.DS_Store
+/dist
+/demo

.npmignore

@@ -0,0 +1 @@
+/demo

gulpfile.js

@@ -0,0 +1,64 @@
+'use strict'
+const gulp = require('gulp')
+const postcss = require('gulp-postcss')
+const jade = require('gulp-jade')
+const serve = require('gulp-serve')
+
+const paths = {
+  css: {
+    entry: ['./src/css/hack.css'],
+    all: './src/css/*.css'
+  },
+  html: {
+    entry: ['./src/html/*.jade'],
+    all: './src/html/**/*.jade'
+  },
+  static: {
+    entry: ['./src/static/*'],
+    all: './src/static/*'
+  }
+}
+
+gulp.task('serve', serve({
+  host: 'localhost',
+  port: 4001,
+  root: './demo'
+}))
+
+gulp.task('css', () => {
+  gulp.src(paths.css.entry)
+    .pipe(postcss([
+      require('postcss-import')(),
+      require('postcss-cssnext')({
+        browsers: ['last 2 versions', 'ie > 8']
+      }),
+      require('cssnano')({
+        autoprefixer: false
+      })
+    ]))
+    .pipe(gulp.dest('./dist'))
+    .pipe(gulp.dest('./demo'))
+})
+
+gulp.task('html', () => {
+  gulp.src(paths.html.entry)
+    .pipe(jade({
+      pretty: true
+    }))
+    .pipe(gulp.dest('./demo'))
+})
+
+gulp.task('static', () => {
+  gulp.src(paths.static.entry)
+    .pipe(gulp.dest('./demo'))
+})
+
+gulp.task('watch', () => {
+  gulp.watch(paths.css.all, ['css'])
+  gulp.watch(paths.html.all, ['html'])
+  gulp.watch(paths.static.all, ['static'])
+})
+
+gulp.task('build', ['css', 'html', 'static'])
+
+gulp.task('default', ['build', 'watch', 'serve'])

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "hack",
+  "version": "0.0.0",
+  "description": "Hack.css makes web cool again.",
+  "main": "dist/hack.css",
+  "scripts": {
+    "test": "echo lol",
+    "build": "gulp build",
+    "dev": "gulp",
+    "gh": "npm run build && gh-pages -d demo"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/egoist/hack.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "hack",
+    "css",
+    "ui",
+    "web",
+    "bootstrap"
+  ],
+  "author": "EGOIST <0x142857@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/egoist/hack/issues"
+  },
+  "homepage": "https://github.com/egoist/hack#readme",
+  "devDependencies": {
+    "cssnano": "^3.7.3",
+    "gulp": "^3.9.1",
+    "gulp-jade": "^1.1.0",
+    "gulp-postcss": "^6.1.1",
+    "gulp-pug": "^3.0.3",
+    "gulp-serve": "^1.4.0",
+    "jstransformer-marked": "^1.0.1",
+    "postcss-cssnext": "^2.7.0",
+    "postcss-import": "^8.1.2"
+  }
+}

src/css/components.css

@@ -0,0 +1,138 @@
+/**
+ * Progress Bar
+ */
+
+.progress-bar {
+  height: 8px;
+  opacity: .8;
+  background-color: #ccc;
+  margin-top: 12px;
+  &.progress-bar-show-percent {
+    margin-top: 38px;
+  }
+}
+
+.progress-bar-filled {
+  background-color: #808080;
+  height: 100%;
+  transition: width .3s ease;
+  position: relative;
+  width: 0%;
+
+  &:before {
+    content: '';
+    border: 6px solid transparent;
+    border-top-color: #808080;
+    position: absolute;
+    top: -12px;
+    right: -6px;
+  }
+  &:after {
+    color: #808080;
+    content: attr(data-filled);
+    display: block;
+    font-size: 12px;
+    position: absolute;
+    border: 6px solid transparent;
+    top: -38px;
+    right: 0;
+    transform: translateX(50%);
+  }
+}
+
+/**
+ * Table
+ */
+
+.hack {
+  & table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.75rem 0;
+    color: #778087;
+    & td,
+    & th {
+      vertical-align: top;
+      border: 1px solid #ccc;
+      line-height: 15px;
+      padding: 10px;
+    }
+    & thead th {
+      font-size: 10px;
+    }
+    & tbody td:first-child {
+      font-weight: 700;
+      color: #333;
+    }
+  }
+}
+
+/**
+ * Form
+ */
+.form-group {
+  margin-bottom: 1.75rem;
+  overflow: auto;
+  & label {
+    border-bottom: 2px solid #ccc;
+    padding: 8px 0;
+    color: #333;
+    padding-right: 1rem;
+    min-width: 9rem;
+    display: inline-block;
+    height: 38px;
+    float: left;
+  }
+
+  &.form-success label {
+    color: #83d017;
+    border-color: #83d017;
+  }
+
+  &.form-warning label {
+    color: orange;
+    border-color: orange;
+  }
+
+  &.form-error label {
+    color: red;
+    border-color: red;
+  }
+}
+.form-control {
+  outline: none;
+  border: none;
+  border-bottom: 2px solid #ccc;
+  padding: 8px 0;
+  width: 240px;
+  height: 38px;
+  &:focus {
+    border-bottom-color: #555;
+  }
+}
+
+select.form-control {
+  border-radius: 0;
+  padding: 0 1rem;
+  background-color: white;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+}
+
+.form-actions {
+  margin-bottom: 1.75rem;
+  & .btn {
+    font-size: calc(14 / 12)rem;
+  }
+}
+
+.btn {
+  outline: none;
+  border: 1px solid #f0f0f0;
+  background-color: #f0f0f0;
+  color: #333;
+  padding: 0 2rem;
+  height: 38px;
+  line-height: 38px;
+}

src/css/grid.css

@@ -0,0 +1,31 @@
+/**
+ * code by https://github.com/1000ch/grd
+ * with some modifications
+ */
+
+.grid            { display: flex; flex-wrap: wrap;}
+.grid.\-top      { align-items: flex-start; }
+.grid.\-middle   { align-items: center; }
+.grid.\-bottom   { align-items: flex-end; }
+.grid.\-stretch  { align-items: stretch; }
+.grid.\-baseline { align-items: baseline; }
+.grid.\-left     { justify-content: flex-start; }
+.grid.\-center   { justify-content: center; }
+.grid.\-right    { justify-content: flex-end; }
+.grid.\-between  { justify-content: space-between; }
+.grid.\-around   { justify-content: space-around; }
+
+.cell            { box-sizing: border-box; flex-shrink: 0; }
+.cell.\-fill     { width: 0; min-width: 0; flex-grow: 1; }
+.cell.\-1of12    { width: calc(100% * 1 / 12); }
+.cell.\-2of12    { width: calc(100% * 2 / 12); }
+.cell.\-3of12    { width: calc(100% * 3 / 12); }
+.cell.\-4of12    { width: calc(100% * 4 / 12); }
+.cell.\-5of12    { width: calc(100% * 5 / 12); }
+.cell.\-6of12    { width: calc(100% * 6 / 12); }
+.cell.v7of12     { width: calc(100% * 7 / 12); }
+.cell.\-8of12    { width: calc(100% * 8 / 12); }
+.cell.\-9of12    { width: calc(100% * 9 / 12); }
+.cell.\-10of12   { width: calc(100% * 10 / 12); }
+.cell.\-11of12   { width: calc(100% * 11 / 12); }
+.cell.\-12of12   { width: 100%; }

src/css/hack.css

@@ -0,0 +1,5 @@
+@import './reset.css';
+@import './grid.css';
+@import './markdown.css';
+@import './layout.css';
+@import './components.css';

src/css/layout.css

@@ -0,0 +1,8 @@
+.hack p {
+  margin: 0 0 1.75rem;
+}
+
+.hack .container {
+  max-width: 70rem;
+  margin: auto;
+}