pacos v2.0.6

Pacos

Pacos is a simple boilerplate, with scss modules.

Installation

npm install laravel-mix  
npm install cross-env  
npm install pacos

Import components

To import all scss files simply use the import function:

@import '~pacos/scss/all'

Components that are included:

• SCSS
  • breakpoints
  • helpers
  • 23G Consent (Default styling)
  • mixins
  • reset
• Linters

Guidelines

We follow the scss/css guidelines from Airbnb. Read their documentation for the guidelines.

ESLint and Stylelint are automatically installed. If you already have those files, it won't be overwritten. You do need a webpack.mix.js file to make these plugins work. If you don't have that file it will by automatically created.

Breakpoints

$breakpoints: (
    'smaller': 320px,
    'small': 420px,
    'medium': 768px,
    'large': 1024px,
    'larger': 1120px,
    'huge': 1600px,
) !default;

Helpers

23G Consent

Besides @import '~pacos/scss/all' you can also use @import '~pacos/scss/consent' to add default styling to the 23G consent manager. The styling can be overwritten in your own stylesheets.

Create these scss variables with your own styling to overwrite the default.

$consent-background: #fff;
$consent-color: #222;
$consent-index: 10;
$consent-border-color: #eee;
$consent-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
$consent-logo-height: 30px;
$consent-logo-height-desktop: 40px;
$consent-logo-padding-right: 32px;
$consent-max-width: 1336px;

$consent-content-title-size: 18px;
$consent-content-text-size: 14px;
$consent-content-title-size-mobile: 12px;
$consent-content-text-size-mobile: 12px;

Mixins

The following mixins are included.

Linters

To use the linters you need to add them to your webpack.mix.js file.

Your file should like something like this:

const mix = require('laravel-mix');
const StylelintPlugin = require('stylelint-webpack-plugin');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
       module: {
           rules: [{
               test: /\.(js|vue)$/,
               loader: 'eslint-loader',
               enforce: 'pre',
               exclude: /node_modules/,
               options: {
                   formatter: require('eslint-friendly-formatter'),
               },
           },],
       },
       plugins: [
           new StylelintPlugin({
               files: ['resources/**/*.?(vue|scss)'],
               fix: false,
           }),
       ],
   });

NPM scripts

As a tip, consider adding the following NPM scripts to your package.json file, to speed up your workflow. Laravel installs will already include this.

"scripts": {
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

Browser support

• Chrome latest
• Firefox latest
• Opera latest
• Safari latest
• IE latest Pacos works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE11.

Copyright & License

Code copyright 2018 23G. Code released under the MIT license.