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:
- SCSS
- breakpoints
- helpers
- 23G Consent (Default styling)
- mixins
- reset
- Linters
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
;
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.
;;;;;;;;; ;;;;
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 = ;const StylelintPlugin = ; mix ;
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.