@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
Boilerplate runs mustard test in the head of the document to test for basic browser abilities to determine if the browser is modern or not (see head.js). Modern browsers are currently considered to be:
Older browsers will have their JavaScript execution halted and load a fall back HTML4CSS
NB IE11 support will likely be dropped in 2019 with a stricter mustard test.
Currently in no particular order, a list of items currently being discussed/planned.
6.2.8
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 76 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.