pacos

Pacos is a simple front-end framework

Moved package to org
Last updated 5 months ago by julianhulsdouw .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install pacos 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 2.0.6                                ...           latest (5 months ago)

33 Versions

  • 2.0.6 [deprecated]           ...           5 months ago
  • 2.0.4 [deprecated]           ...           9 months ago
  • 2.0.3 [deprecated]           ...           9 months ago
  • 2.0.2 [deprecated]           ...           a year ago
  • 2.0.1 [deprecated]           ...           a year ago
  • 2.0.0 [deprecated]           ...           a year ago
  • 0.2.7 [deprecated]           ...           a year ago
  • 0.2.6 [deprecated]           ...           a year ago
  • 0.2.5 [deprecated]           ...           a year ago
  • 0.2.4 [deprecated]           ...           a year ago
  • 0.2.3 [deprecated]           ...           a year ago
  • 0.2.2 [deprecated]           ...           a year ago
  • 0.2.1 [deprecated]           ...           a year ago
  • 0.2.0 [deprecated]           ...           a year ago
  • 0.1.2 [deprecated]           ...           a year ago
  • 0.1.1 [deprecated]           ...           a year ago
  • 0.1.0 [deprecated]           ...           a year ago
  • 0.0.17 [deprecated]           ...           a year ago
  • 0.0.16 [deprecated]           ...           a year ago
  • 0.0.15 [deprecated]           ...           a year ago
  • 0.0.14 [deprecated]           ...           a year ago
  • 1.0.6 [deprecated]           ...           a year ago
  • 1.0.0 [deprecated]           ...           a year ago
  • 0.0.12 [deprecated]           ...           2 years ago
  • 0.0.11 [deprecated]           ...           2 years ago
  • 0.0.10 [deprecated]           ...           2 years ago
  • 0.0.9 [deprecated]           ...           2 years ago
  • 0.0.8 [deprecated]           ...           2 years ago
  • 0.0.7 [deprecated]           ...           2 years ago
  • 0.0.6 [deprecated]           ...           2 years ago
  • 0.0.5 [deprecated]           ...           2 years ago
  • 0.0.4 [deprecated]           ...           2 years ago
  • 0.0.3 [deprecated]           ...           2 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 34
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |