@area17/a17-boilerplate
Advanced tools
Instead of opinionated predesigned components, like those provided in Bootstrap and Zurb Foundation, A17 Boilerplate provides a structure and set of ideas to allow quick and consistent set up of a project. It aims to take away the boring set up of "what folder structure do I use?", "how will I generate my CSS?" and "what grid system will I use?" by providing those things out of the box. But, crucially, it then leaves the fun bit of writing the site styles up to you.
Via npm: https://www.npmjs.com/package/@area17/a17-boilerplate
Please see instructions here a17-generator.
Go to the project root, and run:
$ npm install @area17/a17-boilerplate
After the package is installed please run:
$ npx a17-bp init
All available tasks are listed in package.json file as npm tasks and are documented in the Wiki
By default, build tasks for A17 Boilerplate live inside the package so that they can be updated as the package is updated. If, in the future, the tasks need to be updated independently of the the A17 Boilerplate development, then they can be ejected using npm run eject.
Boilerplate runs mustard test in the head and bottom of the document to test for JavaScript module support to see if the browser is modern or not (see sample.html). Modern browsers are currently considered to be:
Older browsers will have their JavaScript execution halted and load a fall back HTML4CSS
7.1.4
colspan mixin to _grid.scss - the mixin equivalent of the colspan classes7.1.3
2.0.2 for updates to resized helper7.1.2
index = 1manifest.jsonmaster branch to main7.1.1
7.1.0
boilerplate.json to frontend.config.json'xs', 'md', 'lg', 'xl', 'xxl' )head.js - new mustard test in HTML based on JavaScript module support means a very minimal amount of head.js remains7.0.1
"@area17/a17-helpers": "2.0.0",7.0.0
npm init to choose what bits to takenode_modules/ so your project code is your project codeboilerplate.json or optional SCSS maps6.2.7. For now http://bp7.dev.area17.com/ is your best bet.6.2.7
6.2.6
6.2.5
dotenv to correctly read .env vars6.2.4
6.2.3
6.2.2
6.2.1
6.2.0
6.1.5
6.1.4
6.1.3
id="content" to the <main> element in the sample.html.6.1.2
6.1.1
6.1.0
manageBehaviors and createBehavior with updated dummyBehaviormanageBehaviors has been migrated to Boilerplate as it was too specific to our method of triggering functions linked to DOM nodes. This version has been updated to use a MutationObserver. Its compatible with existing Boilerplate behaviors (which include a this.init and this.destroy).
createBehavior is new - a new way to create behaviors. Using the this to make your behaviors will give your behavior a few niceties built in:
this.optionsgetChild and getChildren of the container nodeenabled and disabledresized and mediaQueryUpdated for custom actions on those eventsSee dummyBehavior.js and <div data-behavior="dummyBehavior"> in sample.html to poke through how to make a new behavior using createBehavior
6.0.4
6.0.3
CustomEvent polyfill to app.js as corresponding helper is going to be deprecated6.0.2
6.0.1
6.0.0 Breaking change
There are the following tasks only now.
This update bring numerous changes :
The watch task has been simplified. This is only watching for SVG to re-create the icon sprite.
This create quite some changes in the final dist folder : CSS and JS are now created at the root of the dist folder. One important limitation from Webpack : CSS and JS can't have the same name (ie : app.css and app.js are prohibited).
The rev-manifest.json is still created so Laravel can still use it.
5.0.5
5.0.4
5.0.3
5.0.2
5.0.1
{
"config": {
"browsersyncPort": 1312,
"browsersyncUiPort": 1313
}
}
5.0.0
4.1.2
4.1.1
Updated breakpoint mixin to help generate IE11 and hover based breakpoints
@include breakpoint('medium+') {
// styles to be given to browsers at `medium` and above
}
@include breakpoint(null,'hover') {
// styles to be given to devices with mouse pointers
}
@include breakpoint(null,'ie11') {
// styles to be given to be given to IE11
}
@include breakpoint('medium+','hover') {
// styles to be given to browsers at `medium` and above that have mouse pointers
}
@include breakpoint('medium+','ie11') {
// styles to be given to ie11 at `medium` and above
}
4.1.0
Add a way to specify custom entry points in the webpack config via the manifest :
"scripts": {
"app.js": "js/app.js",
"map.js": "js/map.js",
"head.js": "js/head.js"
}
If no "scripts" are found it will fallback on the js/app.js and the js/head.js file.
4.0.1
4.0.0
3.2.1
3.2.0
3.1.1
3.1
3.0.3
3.0.2
3.0.1
3.0.0-rc.7
3.0.0-rc.6
3.0.0-rc.5
3.0.0-rc.4
icon--.3.0.0-rc.3
Add non-frontend file watch support. In manifest.json, just add bs options to config like the following example (it is using relative path to the root of frontend folder):
{
"config": {
"bs" : {
"watchExtra" : [
"./*.php"
]
}
}
}
3.0.0-rc.2
3.0.0-rc.1
3.0.0-beta.8
Clean dist folder before doing a build
Add the rev task : a rev-manifest.json file will be added at the root of the dist folder to map assets with revisioned ones
In dev the rev-manifest.json will look like this npm run build :
{
"styles/app.css":"styles/app.css",
"styles/html4css.css":"styles/html4css.css",
"scripts/app.js":"scripts/app.js",
"scripts/head.js":"scripts/head.js"
}
In production npm run prod :
{
"styles/app.css":"styles/app-7ad77318e2.css",
"styles/html4css.css":"styles/html4css-894eb0106a.css",
"scripts/app.js":"scripts/app-e82b5c7421.js",
"scripts/head.js":"scripts/head-b39adeb404.js"
}
3.0.0-beta.7
3.0.0-beta.6
3.0.0-beta.5
3.0.0-beta.4
3.0.0-beta.3
3.0.0-beta.2
3.0.0-beta.1
For publishing to npm, please see this guide.
FAQs
The official AREA 17 boilerplate
The npm package @area17/a17-boilerplate receives a total of 148 weekly downloads. As such, @area17/a17-boilerplate popularity was classified as not popular.
We found that @area17/a17-boilerplate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.