Skip to content

Commit a45cd2d

Browse files
mrrfvmrrfv
committed
WIP: a proper website for the project
Subject to change. I need some feedback on this.
1 parent 0e22991 commit a45cd2d

29 files changed

+18832
-0
lines changed

‎website/.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015-ie"]
3+
}

‎website/.gitignore

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Files
2+
3+
.DS_Store
4+
.ruby-version
5+
npm-debug.log
6+
7+
# Folders
8+
9+
.idea/
10+
.jekyll-cache/
11+
.sass-cache
12+
_gh_pages
13+
_site
14+
node_modules

‎website/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2017 Jeremy Thomas
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎website/README.md

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
This website is a work in progress.
2+
3+
---
4+
5+
# Start package for [Bulma](http://bulma.io)
6+
7+
Tiny npm package that includes the `npm` **dependencies** you need to **build your own website** with Bulma.
8+
9+
<a href="http://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma-start/master/bulma-start.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600" height="315"></a>
10+
11+
## Install
12+
13+
```sh
14+
npm install bulma-start
15+
```
16+
_or_
17+
18+
```sh
19+
yarn add bulma-start
20+
```
21+
22+
## What's included
23+
24+
The `npm` dependencies included in `package.json` are:
25+
26+
* <code>[bulma](https://github.com/jgthms/bulma)</code>
27+
* <code>[node-sass](https://github.com/sass/node-sass)</code> to compile your own Sass file
28+
* <code>[postcss-cli](https://github.com/postcss/postcss-cli)</code> and <code>[autoprefixer](https://github.com/postcss/autoprefixer)</code> to add support for older browsers
29+
* <code>[babel-cli](https://babeljs.io/docs/usage/cli/)</code>, <code>[babel-preset-env](https://github.com/babel/babel-preset-env)</code> and <code>[babel-preset-es2015-ie](https://github.com/jmcriffey/babel-preset-es2015-ie)</code> for compiling ES6 JavaScript files
30+
31+
Apart from `package.json`, the following files are included:
32+
33+
* `.babelrc` configuration file for [Babel](https://babeljs.io/)
34+
* `.gitignore` common [Git](https://git-scm.com/) ignored files
35+
* `index.html` this HTML5 file
36+
* `_sass/main.scss` a basic SCSS file that **imports Bulma** and explains how to **customize** your styles, and compiles to `css/main.css`
37+
* `_javascript/main.js` an ES6 JavaScript that compiles to `lib/main.js`
38+
39+
40+
## Get your feet wet
41+
42+
This package is meant to provide a **good starting point** for working with Bulma.
43+
44+
When installing this package with the commands above, it landed in `$HOME/node_packages/bulma-start`.
45+
In order to use it as a **template** for your **project**, you might consider copying it to a better suited location:
46+
47+
```sh
48+
cd $HOME/projects
49+
cp -a $HOME/node_modules/bulma-start my-bulma-project
50+
```
51+
52+
Alternatively, you could do something similar with a GitHub clone as well.
53+
54+
```sh
55+
cd $HOME/projects
56+
git clone https://github.com/jgthms/bulma-start
57+
mv bulma-start my-bulma-project
58+
rm -rf my-bulma-project/.git # cut its roots
59+
```
60+
61+
Now, that you prepared the groundwork for your project, set up Bulma and run the watchers:
62+
63+
```sh
64+
cd my-bulma-project
65+
npm install
66+
npm start
67+
```
68+
69+
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.
70+
71+
Some controlling output is written to the `npm start` console in that process:
72+
73+
```sh
74+
_javascript/main.js -> lib/main.js
75+
76+
=> changed: $HOME/projects/start-with-bulma/_sass/main.scss
77+
Rendering Complete, saving .css file...
78+
Wrote CSS to $HOME/projects/start-with-bulma/css/main.css
79+
```
80+
81+
Use `npm run` to show all available commands:
82+
83+
```sh
84+
Lifecycle scripts included in bulma-start:
85+
start
86+
npm-run-all --parallel css-watch js-watch
87+
88+
available via `npm run-script`:
89+
css-build
90+
node-sass _sass/main.scss css/main.css
91+
css-deploy
92+
npm run css-build && npm run css-postcss
93+
css-postcss
94+
postcss --use autoprefixer --output css/main.css css/main.css
95+
css-watch
96+
npm run css-build -- --watch
97+
deploy
98+
npm run css-deploy && npm run js-build
99+
js-build
100+
babel _javascript --out-dir lib
101+
js-watch
102+
npm run js-build -- --watch
103+
```
104+
105+
If you want to learn more, follow these links: [Bulma homepage](http://bulma.io) and [Documentation](http://bulma.io/documentation/overview/start/).
106+
107+
108+
## Copyright and license
109+
110+
Code copyright 2017 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma-start/blob/master/LICENSE).

‎website/_sass/main.scss

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@charset "utf-8";
2+
3+
// Customization
4+
5+
// You can easily customize Bulma with your own variables.
6+
// Just uncomment the following block to see the result.
7+
8+
9+
// 1. Import the initial variables
10+
@import "../node_modules/bulma/sass/utilities/initial-variables";
11+
12+
// 2. Set your own initial variables
13+
// Update the sans-serif font family
14+
$family-sans-serif: 'Baloo 2', sans-serif;
15+
16+
// 3. Set the derived variables
17+
$primary: #65d842;
18+
$primary-invert: #ffffff;
19+
20+
// 4. Import the rest of Bulma
21+
22+
23+
@import "../node_modules/bulma/bulma";

‎website/css/fonts.css

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@font-face {
2+
font-family: 'Baloo 2';
3+
src: local('Baloo 2 ExtraBold'), local('Baloo2-ExtraBold'),
4+
url('../fonts/Baloo2-ExtraBold.woff2') format('woff2'),
5+
url('../fonts/Baloo2-ExtraBold.woff') format('woff'),
6+
url('../fonts/Baloo2-ExtraBold.ttf') format('truetype');
7+
font-weight: bold;
8+
font-style: normal;
9+
font-display: swap;
10+
}
11+
12+
@font-face {
13+
font-family: 'Baloo 2';
14+
src: local('Baloo 2 Bold'), local('Baloo2-Bold'),
15+
url('../fonts/Baloo2-Bold.woff2') format('woff2'),
16+
url('../fonts/Baloo2-Bold.woff') format('woff'),
17+
url('../fonts/Baloo2-Bold.ttf') format('truetype');
18+
font-weight: bold;
19+
font-style: normal;
20+
font-display: swap;
21+
}
22+
23+
@font-face {
24+
font-family: 'Baloo 2';
25+
src: local('Baloo 2 Medium'), local('Baloo2-Medium'),
26+
url('../fonts/Baloo2-Medium.woff2') format('woff2'),
27+
url('../fonts/Baloo2-Medium.woff') format('woff'),
28+
url('../fonts/Baloo2-Medium.ttf') format('truetype');
29+
font-weight: 500;
30+
font-style: normal;
31+
font-display: swap;
32+
}
33+
34+
@font-face {
35+
font-family: 'Baloo 2';
36+
src: local('Baloo 2 Regular'), local('Baloo2-Regular'),
37+
url('../fonts/Baloo2-Regular.woff2') format('woff2'),
38+
url('../fonts/Baloo2-Regular.woff') format('woff'),
39+
url('../fonts/Baloo2-Regular.ttf') format('truetype');
40+
font-weight: normal;
41+
font-style: normal;
42+
font-display: swap;
43+
}
44+
45+
@font-face {
46+
font-family: 'Baloo 2';
47+
src: local('Baloo 2 SemiBold'), local('Baloo2-SemiBold'),
48+
url('../fonts/Baloo2-SemiBold.woff2') format('woff2'),
49+
url('../fonts/Baloo2-SemiBold.woff') format('woff'),
50+
url('../fonts/Baloo2-SemiBold.ttf') format('truetype');
51+
font-weight: 600;
52+
font-style: normal;
53+
font-display: swap;
54+
}

0 commit comments

Comments
 (0)