Pacos is a simple front-end framework

Usage no npm install needed!

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




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


npm i @23g/pacos

Table of contents


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


Component library


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


    import {
    } from '@23g/pacos/utils';

    // or singular import
    import sleep from '@23g/pacos/utils/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');


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


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`);



// 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: (
    '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 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';


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;


The following functions are included.

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


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


  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.


Creating a test build

npm pack

Copyright & License

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