@23g/pacos

Pacos is a simple front-end framework

Usage no npm install needed!

<script type="module">
  import 23gPacos from 'https://cdn.skypack.dev/@23g/pacos';
</script>

README

npm

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

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: '&euro;',
                label: 'EUR',
                symbol: '€',
                value: 'EUR',
            },
            {
                entity: 'US&dollar;',
                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.