This package has been deprecated

    Author message:

    Moved package to org

    pacos

    2.0.6 • Public • Published

    npm

    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:

    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.

    Keywords

    none

    Install

    npm i pacos

    DownloadsWeekly Downloads

    65

    Version

    2.0.6

    License

    ISC

    Unpacked Size

    30.8 kB

    Total Files

    25

    Last publish

    Collaborators

    • tychopolet
    • yhanssens
    • julianhulsdouw
    • cino
    • 23g_developer