All components in the Visual Framework are dependent on [its design tokens](/design-tokens/) that provide colour, typography, spacing and other stylistic decisions as structured data.
Elements are the basic building blocks of the Visual Framework and includes buttons, badges, headings, text, links and so on. Every higher level component is made of these.
Utilising elements along with their own styling, blocks begin to make ready-made parts of a page, such as navigation, summary, profiles, card or a search form.
With these you can begin to imagine a page, but they do not provide structure between blocks.
Moving up from blocks, containers assemble collections of blocks in layout containers that can be stacked to build a page: a hero, banner, intro, video container and so on.
Giving structure and function to the fabric of the page, layout components determine reusable structure in grids, stacking layout and reusable clusters and flags.
These are supported by utility components (utility classes, smooth scroll, show more) that allow edge customisations and behaviour of the page.
@@ -4,6 +4,7 @@ subtitle: Think of components as lego blocks you can use to build the look and c
intro:At the lower level there are components which are a type of "ingredient" used to assemble into the higher level patterns with richer templates with usability guidance.
date:2020-12-11 19:33:50
section:building
full_width:true
tags:
-posts
-guidance
...
...
@@ -12,52 +13,71 @@ layout: layouts/section.njk
templateEngineOverride:njk, md
---
## Type 1: Components
Components are intended for re-use and should be named for what they are; that is:
- vf-box (not "vf-introduction")
- vf-button (not "vf-call-to-action")
- vf-grid (not "vf-wide-layout")
- vf-header (not "vf-big-headline")
- vf-form
This ensures that that a box will always be rectangular-ish pattern on pages,
whereas an "introduction" may be a box today, but become simply large text after a redesign.
When naming components, use something simple and obvious.
### Component types
We use a variation of the atomic design methodology. We use: elements, blocks, and containers.
-`element`: a heading or button
-`block`: a teaser, summary or search form
-`container`: would be a group of summaries
[More about the atomic design concept here](http://bradfrost.com/blog/post/atomic-web-design/#atoms).
### Components have
- Lots of code
-`CHANGELOG.md`: Notable changes
-`index.scss`: Used to generate a standalone version of the component's CSS
-`package.json`: Version information and any required npm dependencies
- you should avoid npm-requiring other VF components
-`README.md`: Information on the role and how to use a component
-`vf-sample.config.yml`: Configuration information about the compony, release status, type of component, variants
For further guidance on the distinctions, see: [Patterns ≠ Components](https://medium.com/eightshapes-llc/patterns-components-2ce778cbe4e8) and UK.gov's information on [patterns](https://design-system.service.gov.uk/patterns) vs [components](https://design-system.service.gov.uk/components).
<hr/>
And see these VF guidance entries:
-[How to make a component](/guidance/creating-components/)
