README
Golden CSS
A golden-ratio preset for Bootstrap styles
How to use
Install
yarn add golden-css -D
or npm install golden-css --dev
Import
app.scss
@import '~golden-css/scss/base';
@import '~golden-css/scss/golden';
Or, for more versatility:
app.scss
@import 'base';
@import '~golden-css/scss/golden';
_base.scss
@import 'variables'; // or whatever functions/mixins you may have
@import '~golden-css/scss/base';
Now, you can use _base.scss to have access to all variables in a scoped component without class definitions being repeated.
Debug help
The seemingly random css values (e.g. padding: 2.42705rem
) can be hard to debug. With some small configuration, you can change it to show a much more friendlypadding: var(--spacer-5)
.
To set this up, you'll need to inject an $environment
variable from webpack.
NOTE: Use the CSS calc function when doing any arithmetic so it work for css variables AND sass variables. e.g. calc(#{$spacer-1} * 2)
For Laravel Mix
Update your sass line in webpack.mix.js to this:
mix.sass('resources/sass/app.scss', 'public/css', {
data: `$environment: '${process.env.NODE_ENV}';`,
})
For VueCLI
Add this to your vue.config.js
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
prependData: `$environment: '${process.env.NODE_ENV}';`,
},
},
},
// ...
}