abetter/toolkit

ABetter blade toolkit

A Better Toolkit

, _(*1)

ABetter Toolkit is a package of new and modified directives for faster development of component-based web applications, with focus on scalable static caching., _(*2)

Requirements

• PHP 7.2+
• Imagick 3+
• MySQL 5.7+
• Composer 1.6+
• Laravel 5.8+
• Deployer 6+
• Node 10.0+
• NPM 6.4+

Installation

Via Composer:, _(*3)

composer require abetter/toolkit

Laravel modifications

Add middleware to app/Http/Kernel.php:, _(*4)

protected $middleware = [
    \ABetter\Toolkit\SandboxMiddleware::class,
];

Note: The middleware helps Blade clear the view cache when developing many nested components., _(*5)

Directives

@component : Improved directive for injecting components

@component('<view.name>',[<variables>])
@component('<view.name>',TRUE)
@component('<view.name>') <slot-here> @endcomponent

Component names will be auto-resolved if the blade file has same basename as folder., _(*6)

You can auto-terminate a @component with TRUE as the second paramater, to avoid writing out @endcomponent, e.g when not using any slots or nested content., _(*7)

@inject : Improved directive for injecting class as variable

@inject('<variable>','<relative-class-file>')
@inject('Menu','Menu.class.php')
@inject('Menu')

Class-files will be auto-resolved if it's located in the component folder., _(*8)

@block : Insert wrapped block section

@block('<class-name>')
@block('block--typography')
@endblock

@style : Embedd sass/css in html source code

@style('<relative-filename>')
@style('menu.scss')

Embedded Sass/CSS files will be rendered as external files in development mode to support browsersync live, but will be embedded in html source on Stage/Production for better caching., _(*9)

@script : Embedd js in html source code

@script('<relative-filename>')
@script('menu.js')

Embedded JS files will be rendered as external files in development mode to support browsersync live, but will be embedded in html source on Stage/Production for better caching., _(*10)

@svg : Embedd svg in html source code

@svg('<filename-relative-to-resources>')
@svg('/images/logo.svg')

@lipsum : Insert mockup text

@lipsum('<variables>')
@lipsum('medium')

@pixsum : Insert mockup image

@pixsum('<variables>','<options>')
@pixsum('photo:tech')
@pixsum('photo:tech','img:w500')

@logosum : Insert mockup svg logo

@logosum('<variables>')
@logosum('My Brand Name')

Contributors

Johan Sjöland johan@sjoland.com
Senior Product Developer: ABetter Story Sweden AB., _(*11)

License

MIT license. Please see the license file for more information., _(*12)