diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..364fdec --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +public/ diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..e62b9d8 --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,14 @@ +image: node:lts-alpine + +before_script: + - cat /etc/os-release + - yarn --version + - yarn add bulma + - yarn list + +pages: + script: + - make build + artifacts: + paths: + - public diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..aa884c8 --- /dev/null +++ b/Makefile @@ -0,0 +1,16 @@ +build: clean + mkdir -p public/{css,js,img} + cp node_modules/bulma/css/bulma.min.css public/css/ + cp -r css public/ + cp -r js public/ + cp -r img public/ + cp index.html public/ + +clean: + rm -rf public + +deps: + yarn add bulma + +serve: + cd public ; python -m http.server diff --git a/README.md b/README.md index 67e6850..69bc021 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,106 @@ -![logo][logo] +# Start package for [Bulma](http://bulma.io) -# web +Tiny npm package that includes the `npm` **dependencies** you need to **build your own website** with Bulma. -Small static page describing the project +Bulma: a Flexbox CSS framework -## keyboard layout editor +## Install -### ANSI +```sh +npm install bulma-start +``` +_or_ -[![ANSI layout][ansi_img]][ansi_kle] +```sh +yarn add bulma-start +``` -### ISO +## What's included -[![ISO layout][iso_img]][iso_kle] +The `npm` dependencies included in `package.json` are: ---- +* [bulma](https://github.com/jgthms/bulma) +* [node-sass](https://github.com/sass/node-sass) to compile your own Sass file +* [postcss-cli](https://github.com/postcss/postcss-cli) and [autoprefixer](https://github.com/postcss/autoprefixer) to add support for older browsers +* [babel-cli](https://babeljs.io/docs/usage/cli/), [babel-preset-env](https://github.com/babel/babel-preset-env) and [babel-preset-es2015-ie](https://github.com/jmcriffey/babel-preset-es2015-ie) for compiling ES6 JavaScript files + +Apart from `package.json`, the following files are included: + +* `.babelrc` configuration file for [Babel](https://babeljs.io/) +* `.gitignore` common [Git](https://git-scm.com/) 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` -[logo]: https://gitlab.com/mkbd65/web/-/raw/main/logo.png -[ansi_kle]: http://www.keyboard-layout-editor.com/#/gists/7dd07f537fdabe4e8c25ad3b9b0d8173 -[iso_kle]: http://www.keyboard-layout-editor.com/#/gists/ea8b9739acc4a8de44a7013d14665932 -[ansi_img]: https://gitlab.com/mkbd65/web/-/raw/main/mkbd65-ansi.png -[iso_img]: https://gitlab.com/mkbd65/web/-/raw/main/mkbd65-iso.png +## Get your feet wet + +This package is meant to provide a **good starting point** for working with Bulma. + +When installing this package with the commands above, it landed in `$HOME/node_packages/bulma-start`. +In order to use it as a **template** for your **project**, you might consider copying it to a better suited location: + +```sh +cd $HOME/projects +cp -a $HOME/node_modules/bulma-start my-bulma-project +``` + +Alternatively, you could do something similar with a GitHub clone as well. + +```sh +cd $HOME/projects +git clone https://github.com/jgthms/bulma-start +mv bulma-start my-bulma-project +rm -rf my-bulma-project/.git # cut its roots +``` + +Now, that you prepared the groundwork for your project, set up Bulma and run the watchers: + +```sh +cd my-bulma-project +npm install +npm start +``` + +As long as `npm start` is running, it will **watch** your changes. You can edit `_sass/main.scss` and `_javascript/main.js` at will. Changes are **immediately** compiled to their destinations, where `index.html` will pick them up upon reload in your browser. + +Some controlling output is written to the `npm start` console in that process: + +```sh +_javascript/main.js -> lib/main.js + +=> changed: $HOME/projects/start-with-bulma/_sass/main.scss +Rendering Complete, saving .css file... +Wrote CSS to $HOME/projects/start-with-bulma/css/main.css +``` + +Use `npm run` to show all available commands: + +```sh +Lifecycle scripts included in bulma-start: + start + npm-run-all --parallel css-watch js-watch + +available via `npm run-script`: + css-build + node-sass _sass/main.scss css/main.css + css-deploy + npm run css-build && npm run css-postcss + css-postcss + postcss --use autoprefixer --output css/main.css css/main.css + css-watch + npm run css-build -- --watch + deploy + npm run css-deploy && npm run js-build + js-build + babel _javascript --out-dir lib + js-watch + npm run js-build -- --watch +``` + +If you want to learn more, follow these links: [Bulma homepage](http://bulma.io) and [Documentation](http://bulma.io/documentation/overview/start/). + + +## Copyright and license + +Code copyright 2017 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma-start/blob/master/LICENSE). diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..ba99986 --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + + mkbd65 - by XenGi + + + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..e69de29