@@ -25,7 +25,7 @@ It's also a good introduction into integrating VF components into an application
## A pre-made boilerplate using VF components
Uses the performant [11ty](https://www.11ty.io/) as a static site generator to build sites with VF components. This approach pre-integrates the VF Core, giving you easy access to component assets and a rollup build process to generate compiled CSS and JS.
Uses the preferment [11ty](https://www.11ty.io/) as a static site generator to build sites with VF components. This approach pre-integrates the VF Core, giving you easy access to component assets and a rollup build process to generate compiled CSS and JS.
@@ -59,6 +59,6 @@ A demonstration React-based project using VF components.
The most basic use of the Visual Framework components allows usage directly into your existing build environment. This approach gets you a components Sass, JS, template and any other assets and lets you build what you need.
This approach is recommended for more advanced developers who are highly familar with Node and Sass.
This approach is recommended for more advanced developers who are highly familiar with Node and Sass.
subtitle: This codebase includes a folder and file creation tool.
intro: It allows you to quickly create all the required files to make a component -- it gives you the option to create am element, block, or container.
@@ -3,8 +3,13 @@ title: Updating, versioning a component
subtitle: "Like the Visual Framework 2.0, components follow [semantic versioning](https://semver.org/) by increasing their full version number every time they have breaking changes."
intro: "However the version number of components its not tied to the version number of the Visual Framework's `vf-core`; that is:"
date: 2019-04-09 12:24:50
layout: layouts/developing.njk
layout: layouts/section.njk
section: developing
order: 2
tags:
- contributing components
- developing
- documentation
---
- `vf-core@2.1.2` might use `vf-button@1.0.1` and `vf-component-x@8.2.1`
subtitle: The Visual Framework uses a dual approach for the naming of things.
intro: At the lower level there are **components** which are a type of "ingredient" used to assembl into the higher level **patterns** that are richer templates with usability guidance.
@@ -19,7 +26,7 @@ Components in the Visual Framework follow the BEM naming convention.
}
```
## Namespacing
## Namespace
We namespace all universal components with a prefix of `vf-`. This ensures that the component will not break an existing codebase.
...
...
@@ -198,4 +205,4 @@ Your code editor can help you find these when mopping up before a project goes l
## Related: Building your first Visual Framework page
If you're looking for some hands-on help with Visual Framework syntax, [see this blog post on a quick start](https://work.allaboutken.com/posts/20191118-first-page-with-the-visual-framework.html) on how to work with Visual Framework 2.0 CSS, JS and structure your HTML.
\ No newline at end of file
If you're looking for some hands-on help with Visual Framework syntax, [see this blog post on a quick start](https://work.allaboutken.com/posts/20191118-first-page-with-the-visual-framework.html) on how to work with Visual Framework 2.0 CSS, JS and structure your HTML.
subtitle: The Visual Framework `vf-core` and its components have self-contained versions.
date: 2019-04-09 12:24:50
layout: layouts/developing.njk
section: developing
order: 10
tags:
- guidelines
- developing
- documentation
layout: layouts/section.njk
---
The Visual Framework uses [semantic versioning](https://docs.npmjs.com/about-semantic-versioning) across all projects and packages. Here are some highlights of what this means:
