Natural Potato Magnet

    @23g/pacos

    4.1.0 • Public • Published

    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: '€',
                    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.

    Keywords

    none

    Install

    npm i @23g/pacos

    DownloadsWeekly Downloads

    20

    Version

    4.1.0

    License

    ISC

    Unpacked Size

    58.6 kB

    Total Files

    50

    Last publish

    Collaborators

    • 23g_developer
    • cino
    • julianhulsdouw
    • yhanssens
    • tychopolet