This package has been deprecated

Author message:

Moved package to org

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

Helper	Usage
.clearfix	Clears floats.
.disabled	Disables element by adding pointer-events: none; and lowering its opacity.
.hidden	Hides element by adding display: none;
.lazyload-animate	Adds a fade in animation to lazyloaded elements.
.list	Resets default list styling.
.object-fit	Adds object-fit: cover; to image elements and initializes an IE fallback for lazysizes.
.truncate	Truncates texts.
.visually-hidden	Hides element visually but keeps it accessible.
.embed-container	Makes sure embedded html elements are fluid.
.hidden-from-{$breakpoint}	Hides elements from a specified breakpoint. <div class="hidden-from-large"></div> will hide the div from 1120px screen width.
.hidden-until-{$breakpoint}	Hides elements until a specified breakpoint. <div class="hidden-until-large"></div> will hide the div until 1120px screen width.

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.

Mixin	Usage
appearance	@include appearance($arguments);
aspect-ratio	@include aspect-ratio($width, $height);
optional-at-root	@include optional-at-root($sel);
line-clamp	@include line-clamp($number-of-lines);
line-clamp-limit	@include line-clamp-limit($number-of-lines);
placeholder	@include placeholder;
respond-to	@include respond-to($breakpoint);
visually-hidden	@include visually-hidden;

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.