neverbland / neverbuild Goto Github PK

Switch to babel-preset-env which adds Autoprefixer like behaviour to Babel. Create React App have implemented it here facebook/create-react-app@24f38f8.

As we are already using Bourbon and Neat, maybe we could have a look at Bitters by the same company http://bitters.bourbon.io/

@maximebonhomme used it on a project lately so he could tell us what he thinks about it?

See this: https://github.com/scottjehl/picturefill

We should use Prettier to ensure consistency in the code style.

https://en.bem.info/methodology/

Try to move .sass-lint into config, if not then move eslint.js back to the root

Related to #30

We currently have a .scss-lint.yml file that implies we should be linting, but no task to actually do so. It's currently written in the scss-lint format, however, I suggest switching to sass-lint to gain the follow advantages:

• A pure Node based stack with no Ruby dependency (easier for both developers and CI)
• The superior speed of Node SASS over Ruby Sass
• No extra configuration, should work out of the box

We should review the linting rules and consider enforcing them with Git pre-commit hooks for errors. It might also be useful to list links to packages for popular editors for inline linting.

facebook/create-react-app#746

We shouldn't specify a font-size for the p tag cause it adds specificity to our stylesheets (_type.scss line 67).

For example if you want to set the font-size of a div to 22px you will have to do
.my-div p { font-size: 22px; }

The browser default inherit from parent declared font-size, so this is not needed.

As we use Webpack and the sass-loader we can use this: https://github.com/jtangelder/sass-loader#imports

(thanks Piers for the trick)

👍 :kappa:

Project requires the same Node version as CRA so we should mention it in the package.json:

"engines": {
    "node": ">=4"
 }

With instructions on how run a project. At least as a template.

Should be as easy as removing CopyWebpackPlugin, but test that favicons/open graph images etc are still getting copied over.

Setting the homepage prop in package.json should only be used in specific scenario where app needs to be mounted on a subdomain:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

I have seen people using the build but having issues compiling Sass cause they had a old version.
Maybe we should check the local version installed and setup a minimum version to make sure it's gonna work.
Also by doing this we can probably avoid a useless step of asking the user if he wants to install the Sass gem.

With the option to turn it on or off (off by default?) when running the generator. Was thinking about using this one https://github.com/gruntjs/grunt-contrib-imagemin

facebook/create-react-app#1104

Hey,

As recommended in the Neat documentation (https://github.com/thoughtbot/neat#using-neat) we should define our media queries breakpoints.

I always have to define some breakpoints when I kickstart a project, and there are pretty much every time the same.
We could add theses as an example in the app.scss file (or create a _grid-settings.scss but it should be the same I think?).

Something like:

// Define your breakpoints
$tablet: new-breakpoint(max-width 768px 8);
$mobile: new-breakpoint(max-width 600px 4);
$desktop: new-breakpoint(min-width 1024px);