Branding is probably a bit of a strong word here. Essentially, this is a collection of JavaScript and CSS to provide a unifying theme between my projects.
I use the jsDelivr cdn to serve these from GitHub. To use each library, use the following tags, replacing '--version--' with the latest release version of this repo.
To include the JavaScript library, include the following:
<script src="https://cdn.jsdelivr.net/gh/jessereitz/branding@--version--/assets/js/rbrandlib.js" type="text/javascript"></script>To include the CSS library, include the following:
<link href="https://cdn.jsdelivr.net/combine/gh/jessereitz/branding@--version--/assets/css/rbrandlib.css" type="text/css" rel="stylesheet">The CSS library is mainly based on tags, not classes or ids. It doesn't need much configuration. Just load and go.
The JavaScript library includes the following components:
To include a menu, simply add the class menuTarget to any text element. This
will create a link in the menu using the element's textContent as its own text.
Clicking the link will scroll the element into view.
If including code snippets, I use Google's code-prettify with a custom theme from Yoshihide Jimbo. To use, include the following in the head of the HTML document:
<link href="https://cdn.jsdelivr.net/combine/gh/jessereitz/branding@--version--/assets/css/code-theme.css" type="text/css" rel="stylesheet">
<script crossorigin src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>Then use a <pre> tag like so:
<pre class="prettyprint lang-javascript">
const variable = Function(document.getElementById('element'));
</pre>A <code> tag can also be used but only for inline snippets.
For JavaScript, I use rollup.js to package everything into a single file. I also use Babel to transpile everything and UglifyJS to minimize it. All JavaScript is linted using the AirBnB JavaScript Style Guide.
For CSS, everything is written in SCSS and packaged into a single site.css file.
Everything in the build process is run as an npm script:
$ npm run sass-watch just runs sass with the --watch option. Output is
site.css in the assets/css directory.
$ npm run sassify runs sass without the --watch option. Output is
site.css in the assets/css directory.
$ npm run build-iife runs rollup.js to package the src directory. Output is
rbrandlib.js in the assets/js directory. If the environment variable
BUILDTARGET is set to PROD, the code will be run through UglifyJS.
$ npm run buld-prod builds a production version of everything. Essentially,
just calls sassify and build-iife (with BUILDTARGET=PROD) above.