@lform/veneer

Veneer

Veneer is a light-weight front-end library to enable rapid development utilizing Sass modules, CSS grid, CSS custom properties and Typescript.

Features

• Sass function and mixins to easily create grids and collapsible margins.
• Modular type scale for responsive typography
• JS helper library
• JS navigation items
• Basic JS boilerplate
• Lpress template styles

Usage

Sass

With Veneer, Lpress styles can be used simply by compiling ./node_modules/@lform/veneer/scss/main.scss.

When building your Sass the following includePaths should be used:

includePaths: [
    "./path/to/your/scss",
    "./node_modules/@lform/veneer/scss"
]

This allows Veneer to compile as-is but also allows you to overwrite any file within Veneer.

If you need to include specific files in your own Sass file, you may do so by importing each component using its relative path:

@charset "utf-8";

@use 'sass:math';
@use 'sass:list';
@use 'sass:selector';
@use 'sass:meta';
@use './modules/color';
@use './modules/flex';
@use './modules/gap';
@use './modules/grid';
@use './modules/map';
@use './modules/string';
@use './modules/transition';
@use './modules/type';
@use './modules/unit';
@use './utility/vendor';
@import './config/config';
@import './utility/mixins';
@import './utility/reset';
@import './global/root';
@import './global/bullets';
@import './global/buttons';
@import './global/forms';
@import './global/lists';
@import './global/tables';
@import './global/typography';
@import './global/layout';

If you need your own config/_colors.scss file, simply add the file in the corresponding directory and it will be used instead of the default config/_colors.scss file.

If you need to instead add a file that doesn't override but "extends", you should use the fully qualified path of both files in your includes:

@import './node_modules/@lform/veneer/scss/global/layout';
@import 'global/layout';

JavaScript

Out of the box, Veneer is ready to use simply by including the dist/veneer.js file in your project.

Individual components may be used selectively in your project by including including them in your tsconfig.js file.

{
	"files": [
		"./node_modules/@lform/veneer/js/nav/nav.ts",
		"./node_modules/@lform/veneer/js/nav/Navigation.ts",
		"./node_modules/@lform/veneer/js/nav/NavToggle.ts",
		"./node_modules/@lform/veneer/js/nav/SubNavigation.ts",
		"./node_modules/@lform/veneer/js/helpers.ts",
		"./node_modules/@lform/veneer/js/main.ts",
		"./path/to/your/js/file.ts"
	]
}

Documentation

Sass

Complete documentation for Veneer can be found here: /docs/index.html. Complete documentation for Sass can be found here.

Typescript

Typescript documentation may be found here.

Publishing

In order to publish to NPM, the version number must be incremented. Semantic versioning should be followed.

Once ready to deploy, run:

$ npm publish

For more information on publishing to NPM, refer to their documentation.

Building Documentation

Sass documentation uses SassDoc. If an update is made, the documentation can be updated by running

$ sassdoc scss

Typescript

Any changes to Veneer's javascript should be published to the repository. To do this, simply run:

$ tsc

The generated dist/veneer.js file and its sourcemaps may then be committed and published.