jgthms / bulma-start Goto Github PK

I am a complete beginner and struggling little bit to get started. Bulma-start doesn't provide instructions for npm install, but I tried npm install bulma-start and seeing below errors.

npm install bulma-start
npm WARN saveError ENOENT: no such file or directory, open '/Users/ravikiran/Apps/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/Users/ravikiran/Apps/package.json'
npm WARN Apps No description
npm WARN Apps No repository field.
npm WARN Apps No README data
npm WARN Apps No license field.

• [email protected]
  updated 1 package and audited 1 package in 0.481s
  found 0 vulnerabilities

I then went the route of extracting from zip and npm install and npm start, however now I get stuck at

npm run start

[email protected] start /Users/ravikiran/Apps/demo
npm-run-all --parallel css-watch js-watch

[email protected] css-watch /Users/ravikiran/Apps/demo
npm run css-build -- --watch

[email protected] js-watch /Users/ravikiran/Apps/demo
npm run js-build -- --watch

[email protected] js-build /Users/ravikiran/Apps/demo
babel _javascript --out-dir lib "--watch"

[email protected] css-build /Users/ravikiran/Apps/demo
node-sass _sass/main.scss css/main.css "--watch"

_javascript/main.js -> lib/main.js

Isn't something more supposed to happen ?

The default install method of using npm install bulma-start then cp -a ~/node_modules/bulma-start/ ... is missing the .gitignore file.

Just started with Bulma, (reading the book), npm, so please bear with me..
In order to get my feeds wet, I fiddled a bit with bulma-start.
I second the opinion, that npm install bulma-start isn't fully satisfying..

I did:

$ npm install bulma-start
$ cd ~/src/GIT/bulma-book
$ cp -a ~/node_modules/bulma-start start
$ cd start
$ npm install
[...]
added 394 packages in 16.03s
$ npm start
> [email protected] start /home/hp/src/GIT/bulma-book/start
> npm run css-watch | npm run js-watch


> [email protected] js-watch /home/hp/src/GIT/bulma-book/start
> npm run js-build -- --watch


> [email protected] js-build /home/hp/src/GIT/bulma-book/start
> babel _javascript --out-dir lib "--watch"

_javascript/main.js -> lib/main.js

I'm still undecided, how to interpret npm run css-watch | npm run js-watch here, is it as pipe command? Anyway, that part seems to not work as expected, since changes to _sass/main.scss aren't picked up...

Running:

$ npm run css-watch | npm run js-watch

> [email protected] js-watch /home/hp/src/GIT/bulma-book/start
> npm run js-build -- --watch


> [email protected] js-build /home/hp/src/GIT/bulma-book/start
> babel _javascript --out-dir lib "--watch"

_javascript/main.js -> lib/main.js

doesn't cut it as well.

Running:

$ npm run css-watch

> [email protected] css-watch /home/hp/src/GIT/bulma-book/start
> npm run css-build -- --watch


> [email protected] css-build /home/hp/src/GIT/bulma-book/start
> node-sass _sass/main.scss css/main.css "--watch"

=> changed: /home/hp/src/GIT/bulma-book/start/_sass/main.scss
Rendering Complete, saving .css file...
Wrote CSS to /home/hp/src/GIT/bulma-book/start/css/main.css
=> changed: /home/hp/src/GIT/bulma-book/start/_sass/main.scss
Rendering Complete, saving .css file...
Wrote CSS to /home/hp/src/GIT/bulma-book/start/css/main.css
=> changed: /home/hp/src/GIT/bulma-book/start/_sass/main.scss
Rendering Complete, saving .css file...
Wrote CSS to /home/hp/src/GIT/bulma-book/start/css/main.css

does.

Environment: npm/5.6.0 node/v9.11.1 linux x64"

Thanks for the starter template, I just wonder how to use these commands in the package.json? What problems do they solve? Thanks :)

I need a template which could override the variables and styles, and still generate one single css and one min.css, can I do it via this project?

    "css-deploy": "npm run css-build && npm run css-postcss",
    "css-build": "node-sass _sass/main.scss css/main.css",
    "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",
    "start": "npm run css-watch | npm run js-watch"

Hello,
Bulma/JS newbie here... trying to build a simple site the "npm way", starting with bulma-start and adding a bulma-extension component. I doubt this a bulma-extension issue, and since bulma-start seems newbie-oriented, I figured I should start here :)

Steps to reproduce issue:

• Copied contents of bulma-start (including dot files) into project directory. From project dir:
• npm install
• npm start

Browse to index.html... Great! "Hello Bulma" is up and running...
Now, let's add a bulma-extension:

• npm install bulma-carousel
• Then, according to instructions, import the module in _sass/main.sass (first line):
  import bulmaCarousel from '/node_modules/bulma-carousel/dist/bulma-carousel.min.js';

I have also tried installing/importing bulma-calendar. Both extensions result in the same error from browser console:
ReferenceError: require is not defined.

I can see that there is, indeed, a require() call being compiled into lib/main.js by Babel for the imported bulma extension.

Some researching leads me to think this might have to do with Babel, babel-preset-env, and babel-preset-es2015-ie. Found this https://www.npmjs.com/package/babel-plugin-add-module-exports but following the instructions there did not help. Also read that maybe webpack or browserify could address this, but seems a little excessive... I will keep trying to adjust Babel and see what happens.

Any ideas what I could be doing wrong? Maybe .babelrc needs modification?

So I'm using bulma-start with [email protected]. When I run npm start, I get a compilation error in sass.

{ "status": 1, "file": "/Users/clement/Documents/GitHub/portfolio/node_modules/bulma-start/node_modules/bulma/sass/components/navbar.sass", "line": 400, "column": 20, "message": "Incompatible units: 'rem' and 'em'.", "formatted": "Error: Incompatible units: 'rem' and 'em'.\n on line 400 of node_modules/bulma/sass/components/navbar.sass, in mixin @content\n from line 99 of node_modules/bulma/sass/utilities/mixins.sass, in mixin desktop\n from line 261 of node_modules/bulma/sass/components/navbar.sass\n from line 11 of node_modules/bulma/sass/components/_all.sass\n from line 6 of node_modules/bulma/bulma.sass\n from line 33 of _sass/main.scss\n>> padding-top: $navbar-height + ($navbar-padding-vertical * 2); }\n\n -------------------^\n" }

Is there something I did wrong or a way to fix this ?

I've installed everything following the README and it seems that the packages installed are outdated.

Here's my output from npm outdated:

Package       Current  Wanted  Latest  Location
autoprefixer    7.2.6   7.2.6   9.1.5  bulma-start
bulma           0.6.2   0.6.2   0.7.1  bulma-start
postcss-cli     4.1.1   4.1.1   6.0.0  bulma-start

I tried npm update bulma@latest -save but it broke the SCSS monitoring and compilation.

Not sure how to make it work other than that.

With npm start my files are re-built automatically when there are changes – but how can I set an auto-reaload feature in my browser?

Should I install babel-watch or something similar? If yes, how should the script start be?

It is needed when one wants to save time and still maintain habits as there are many other parts like a backend everything necessary in if present in dist will be good

Hi all,

I have one project up and running with Bulma-Start. However, I did find something (in my eyes) particularly weird. Some changes are just not being processed into the file.

I install everything correctly and run npm start to start watching and compiling the main.scss file into the final css file. I for example insert the below code in main.scss:

h3 { background-color: red; margin-bottom: 5em; }

The above code is inserted at the second to last line, above @import "../node_modules/bulma/bulma";, but what I notice is that the first change is processed, but the margin isn't. Is there any particular reason this is the case?

Hey there,

I'm trying to get this framework up and running because it looks awesome and I really want to use it, however, I can't for the life of me figure out why my SASS isn't compiling. What I've done:

1. npm install bulma
2. npm install bulma-start
3. cd to node_modules/bulma-start to run commands
4. JS seems to build ok in the watch command, but the SASS compiling throws errors.
5. Here's what happens when I try to run 'npm run css-deploy':

npm run css-deploy

[email protected] css-deploy /Users/mkemp/Sites/procurement-intranet/wp-content/themes/taronga-intranet/node_modules/bulma-start
npm run css-build && npm run css-postcss

[email protected] css-build /Users/mkemp/Sites/procurement-intranet/wp-content/themes/taronga-intranet/node_modules/bulma-start
node-sass _sass/main.scss css/main.css

sh: node-sass: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] css-build: node-sass _sass/main.scss css/main.css
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] css-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mkemp/.npm/_logs/2018-02-16T03_30_04_263Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] css-deploy: npm run css-build && npm run css-postcss
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] css-deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mkemp/.npm/_logs/2018-02-16T03_30_04_277Z-debug.log`

I checked the debug log and it doesn't really give much detail.
FYI I'm running npm v.5.6.0 and I've also tried running the command as sudo.

Any ideas? I'm adding my custom SASS to _sass/_main.scss as intended. I've been banging my head up against the wall with this one and I'm sure it's a simple fix.

Much appreciated!

Hi,

Check index.html with: https://validator.w3.org.

A pre tag cannot be inside a p tag.

Thanks a lot for all the work on Bulma and this starter-package!

What's the base64-encoded part bulma-start/css/main.css, line 6802:
/*# sourceMappingURL=data:application/json;base64,eyJ2Z...?