Pacos

Pacos is a front-end framework created for setting up projects fast and reuse code more efficiently.

Installation

npm i @23g/pacos

Table of contents

• Guidelines
• JS
  • Component library
  • JS utilities
• SCSS
  • Breakpoints
  • SCSS utilities
  • Component: consent bar
  • Mixins
  • Functions
• Linters
• Development

Guidelines

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

JS

Component library

Usage

import Pacos from '@23g/pacos';

Vue.use(Pacos, {
    /*
        inlineLabel: true,
        svgSpritePath: '/svg/sprite-symbol.svg',
        prefix: 'P',
        precision: 2,
        currency: 'EUR',
        currencyDisplayKey: 'symbol',
        currencySelectDisplayKey: 'label',
        currencies: [
            {
                entity: '€',
                label: 'EUR',
                symbol: '€',
                value: 'EUR',
            },
            {
                entity: 'US$',
                label: 'USD',
                symbol: 'US$',
                value: 'USD',
            },
        ],
    */
});

Available components

<p-form-input />

<p-form-textarea />

<p-form-input-number />

<p-form-input-money />

<p-form-select />

<p-form-switch />

<p-icon />

JS utilities

Usage

    import {
        getDeep,
        getIcon,
        loadImage,
        sleep,
    } from '@23g/pacos/utils';

    // or singular import
    import sleep from '@23g/pacos/utils/sleep';

sleep

Just a prettier function for using timeouts with async/await.

const doStuff = async () => {
    console.log('Do something now...');
    await sleep(500);
    console.log('...and when 500ms passes');
};

getDeep

Prevents type errors when properties are undefined.

const response = {
    name: {
        first: 'Youri',
        last: 'Hanssens',
    },
};

getDeep(response, 'name.first');
// e.g. 'Youri';

getDeep(response, 'name.does.not.exist');
// e.g. false

loadImage

Simple function that returns a promise when the given src is loaded by the browser.

const doStuffAfterImageLoaded = async () => {
    const src = 'https://dummyimage.com/400x400';

    await loadImage(src);

    console.log(`${src} is loaded`);
};

Scss

Usage

// This is the way
@import '~@23g/pacos/scss/all';

// Global import for abstractions which can be used for globalVueStyle
@import '~@23g/pacos/scss/global';

Breakpoints

$breakpoints: (
    'zero': 0,
    'xs': 320px,
    'sm': 420px,
    'md': 800px,
    'lg': 1100px,
    'xl': 1300px,
) !default;

SCSS utilities

| 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. | .flex-basis-auto | Adds flex-basis: auto; to the element |

23G Consent

Consent styling is now included in @import '~@23g/pacos/scss/all'. 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;

Bootstrap

Bootstrap is now a dependency when using Pacos. The following scripts are being imported by default:

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';

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;

Functions

The following functions are included.

| Function | Usage | | ----------------------------------|----------------------| | rem | rem($size-in-px);

Linters

We use stylelint and eslint and require them to be used in every project.

Installation

1. Add .pacos-config to the .gitignore.
2. Copy all files from .pacos-config to the root of your project.

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.

Development

Creating a test build

npm pack

Copyright & License

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