jaydenseric/barebones

A barebones boilerplate for getting started on a bespoke front end.

barebones's Issues

package.json upgrade

HI @jaydenseric, I noticed you upgraded some components in package.json.

To do the upgrade, could you please confirm: do I update the version numbers like you have in package.json, then simply run npm install?

Use Yarn

Yarn is super awesome for managing dependencies and should be used for faster and more "deterministic" installs.

stylelint error in intro example component

For some reason, stylelint is marking the first @custom-media declaration in the intro example component CSS as a violation of the at-rule-empty-line-before config: "Unexpected line before at-rule".

An issue has been filed in the stylelint project.

Gulp build fails when there are no font icons.

Deleting the single default icon before a first build causes a Sass compilation error.

The _icons.scss partial is only generated when there is at least one icon to trigger the codepoints event in the icons task.

Removing all icon SVGs following a previously successful build does not remove config from the partial.

A solution would be to add a first step to the icons task that checks if any exist. If yes, the current process occurs. If no, the _icons.scss partial is created or updated empty.

Why did concat move

Hi @jaydenseric. I was following along your commits, updating my files and noticed you moved the concat in the css task in the gulp file. What was the reason if I may? --Rick

fa19ded#diff-b9e12334e9eafd8341a6107dd98510c9R50

How to Incorporate Bourbon?

Hello - if I wanted to incorporate, say, Bourbon.io or its various sub-modules like Neat / Bitters, or, Typeplate, would I add their files into the scss folder and link them into main.scss?

Sorry for the newbie question. I'm new to Sass and found @jaydenseric 's site informative.

Sincerely,
Rick

Upgrade to Webpack v2

Webpack v2 is just days away from releasing – we have been waiting for the official release before upgrading it again here. For a while Barebones utilized a very early pre-release version of v2 and had to downgrade due to bugs and deficient documentation for users wanting to tweak the config.

cssrecipes

Hi @jaydenseric, I wanted to test incorporating cssrecipes from https://github.com/cssrecipes, since they are by the same author of postcss-cssnext.

I used npm install to install the tooltip one, and then added its css to the gulpfile.js like in this gist:

https://gist.github.com/RickCogley/b53ec3d723cbbb10814d

Could you say what's best practice for adding this kind of component? After I edited the gulpfile.js to add the cssrecipe's index.css to the list, gulp does put the styles into the output file bundle.css.

Am I taking the right approach?

By the way, this tooltip works in Chrome, but not Safari. Both latest on Mac OS X El Capitan.

Use font-size: 100% in _foundation.scss

Please consider using font: 100%/1 $sans-serif; instead of font: 16px/1 $sans-serif; in _foundation.scss for accessibility reasons.

Make readme version badge dynamic

The version number in the readme badge is currently hardcoded and must be manually incremented. It is far better to replace it with this dynamic one that scrapes the latest Github release:

https://img.shields.io/github/release/jaydenseric/Barebones.svg?style=flat-square

Bring ie8-support branch up to date with master.

The ie8-support branch needs to be brought up to date with all the recent commits in master.

Reconfigure Babel to use babel-preset-env

babel-preset-env ensures smaller transpilation output by only running the required transforms for a configured level of browser support; much like how Autoprefixer works with Browserslist.

Soon this browser support config will be able to be shared with Autoprefixer in one place: See babel/babel-preset-env#26 and babel/babel-preset-env#108.

support for more font format

The template just generate only woff base64 code in scss file. How to define the template that make it support for more font format and generate svg ttf eot base64 in scss file? Thanks

Issue with browserlist

Node Version: v7.0.0
NPM Version: v4.1.1

When running yarn run build:watch Webpack fails with the following error:

Child extract-text-webpack-plugin:
        + 1 hidden modules
    
    ERROR in ./~/css-loader?sourceMap&-autoprefixer&importLoaders=1!./~/postcss-loader!./components/app/index.css
    Module build failed: BrowserslistError: Unknown version 0 of and_chr
        at error (/Applications/MAMP/htdocs/Site/node_modules/browserslist/index.js:29:11)
        at Function.select (/Applications/MAMP/htdocs/Site/node_modules/browserslist/index.js:555:21)
        at /Applications/MAMP/htdocs/Site/node_modules/browserslist/index.js:180:41
        at Array.forEach (native)
        at browserslist (/Applications/MAMP/htdocs/Site/node_modules/browserslist/index.js:169:13)
        at isSupported (/Applications/MAMP/htdocs/Site/node_modules/caniuse-api/dist/index.js:75:10)
        at /Applications/MAMP/htdocs/Site/node_modules/postcss-merge-rules/dist/lib/ensureCompatibility.js:87:66
        at /Applications/MAMP/htdocs/Site/node_modules/postcss-selector-parser/dist/selectors/container.js:170:26
        at Selector.each (/Applications/MAMP/htdocs/Site/node_modules/postcss-selector-parser/dist/selectors/container.js:153:22)
        at Selector.walk (/Applications/MAMP/htdocs/Site/node_modules/postcss-selector-parser/dist/selectors/container.js:169:21)
        at /Applications/MAMP/htdocs/Site/node_modules/postcss-selector-parser/dist/selectors/container.js:173:31
        at Root.each (/Applications/MAMP/htdocs/Site/node_modules/postcss-selector-parser/dist/selectors/container.js:153:22)
        at Root.walk (/Applications/MAMP/htdocs/Site/node_modules/postcss-selector-parser/dist/selectors/container.js:169:21)
        at Processor.func (/Applications/MAMP/htdocs/Site/node_modules/postcss-merge-rules/dist/lib/ensureCompatibility.js:80:17)
        at Processor.process (/Applications/MAMP/htdocs/Site/node_modules/postcss-selector-parser/dist/processor.js:34:14)
        at /Applications/MAMP/htdocs/Site/node_modules/postcss-merge-rules/dist/lib/ensureCompatibility.js:121:12
        at Array.every (native)
        at ensureCompatibility (/Applications/MAMP/htdocs/Site/node_modules/postcss-merge-rules/dist/lib/ensureCompatibility.js:77:22)
        at canMerge (/Applications/MAMP/htdocs/Site/node_modules/postcss-merge-rules/dist/index.js:74:44)
        at /Applications/MAMP/htdocs/Site/node_modules/postcss-merge-rules/dist/index.js:222:24
        at /Applications/MAMP/htdocs/Site/node_modules/postcss/lib/container.js:241:28
        at /Applications/MAMP/htdocs/Site/node_modules/postcss/lib/container.js:148:26
        at Root.each (/Applications/MAMP/htdocs/Site/node_modules/postcss/lib/container.js:114:22)
        at Root.walk (/Applications/MAMP/htdocs/Site/node_modules/postcss/lib/container.js:147:21)
        at Root.walkRules (/Applications/MAMP/htdocs/Site/node_modules/postcss/lib/container.js:239:25)
        at /Applications/MAMP/htdocs/Site/node_modules/postcss-merge-rules/dist/index.js:274:13
        at LazyResult.run (/Applications/MAMP/htdocs/Site/node_modules/postcss/lib/lazy-result.js:276:20)
        at /Applications/MAMP/htdocs/Site/node_modules/postcss/lib/lazy-result.js:190:37
        at LazyResult.asyncTick (/Applications/MAMP/htdocs/Site/node_modules/postcss/lib/lazy-result.js:204:15)
        at /Applications/MAMP/htdocs/Site/node_modules/postcss/lib/lazy-result.js:202:27

If I remove "in AU" in the browserlist so it just reads "> 2%" everything compiles fine.

Thank you

Hi Jayden - just wanted to say thank you for your help. I launched my site refresh today.

http://rick.cogley.info/colophon/

I linked you in the colophon, but please let me know if you'd rather I link a different url from this repo. I'm happy to do so.

Kind regards,
Rick