is a collection of libraries for styling HTML pages which conform to the Branger_Briz brand. Unlike the previous iteration of BBElements (see v1 branch), this version does not require any build systems and can be used with no third party dependencies (see pre.code for exception) it's 100% human readable vanilla CSS and JavaScript.
We've added support for BBElements code snippets in VS Code, Atom, and Sublime Text. We recommend you install them for consistency and to speed of your development using these HTML/CSS elements.
clone this repo and include the css and js folders any project you want to use BBElements in (you can optionally include the images folder if you need the BB logo svg files). Then in your <head> make sure to include:
<!-- required: this is all the base64 @font-faces (avoids FOUT) -->
<link rel="stylesheet" href="css/bb-fonts.css">
<!-- required: this is the core styles file -->
<link rel="stylesheet" href="css/bb-styles.css">
<!-- optionally: if you want media-queries for responsive layout -->
<link rel="stylesheet" href="css/bb-responsive.css">
<!-- optionally: if you want code snippets to be syntax highlighted -->
<link rel="stylesheet" href="css/bb-code-colors.css">
<!-- optionally: if you want animations on load -->
<link rel="stylesheet" href="css/bb-animations.css">Then in at the bottom of you <body> make sure to include:
<!-- optionally: if you want code snippets to be syntax highlighted -->
<script src="js/highlightJS/highlight.pack.js"></script>
<!-- required: handles misc logic (logo, marginal notes, captions, etc) -->
<script src="js/BBElements.js"></script>Once you've included those you can use BBElements as described below. You can also take a look at the example file for reference.
As mentioned before, BBElements no longer requires a build system. That said, we have begun adopting Vue.js on various projects (including our homepage) and while Vue does not require a build system, if you want to write an app/site using Vue's Single File Components (SFC) a build system is required. For this reason, BBElements can optionally be imported as a JS module and bundled into a client side Vue app.
First, install/download BBElements from github:
npm install git+https://github.com/brangerbriz/BBElements.git(you might want to consider including the --save or --save-dev flags of course)
Then, in your App.vue you can do something like this:
<template>
<section>
<section id="logo" data-mark-only="mobile-right"></section>
<h1>Sample Title</h1>
<p>This is an example of a paragraph with BB styles</p>
</section>
</template>
<script>
// import BBElements.js
import BBElements from 'BBElements'
export default {
name:'App',
mounted(){
// call BBElements when ready
BBElements()
}
}
</script>
<!-- import BBElements stylesheets -->
<style src="BBElements/css/bb-fonts.css"></style>
<style src="BBElements/css/bb-styles.css"></style>
<style src="BBElements/css/bb-responsive.css"></style>
<style src="BBElements/css/bb-code-colors.css"></style>
<style src="BBElements/css/bb-animations.css"></style>You can include an SVG of the BB logo with the code below. It has a few optional attributes which are as follows:
widthwhich changes the size of the logo.hrefwhich specifies where to link the logo to. When nohrefis specified the link defaults to our website, when set tohref="false"it won't link anywhere.data-sub-titlewhich adds a sub-title below the logo.data-brand-colorwhich changes the default pink color.data-text-colorwhich changes the default black text color.data-fill-colorwhich changes the white color of the B inside the circle mark.data-mark-onlyif set to "true" it only renders the (B) mark, if set to "mobile" it only renders the (B) mark when innerWidth is less than 767px (assuming you are usingbb-responsive-styles.css) positioned on the left, or to position the mobile (B) on the right you can also set it to "mobile-right"
<section id="logo"></section><h1> larger black titles </h1>
<h2> large black titles </h2>
<h3> small pink titles </h3><span class="tags">
<a href="#">Generative</a>
<a href="#">Installation</a>
<a href="#">Digital Literacy</a>
</span>Both p and div.bbe tags conform to the basic copy style of the BB brand.
<p> this will be styled like default BB copy </p>
<div class="bbe"> this will be styled like default BB copy </div>there is an alternative date class specifically used under h3 elements (ex: underneath the attribution of a blog post)
<div class="date">January 1, 2045</div>Any code,a,span.quote,img elements inside of p and div.bbe elements will be formatted properly.
<p>
<a href="page">Links</a> inside of p or div.bbe elements will be styled
accordingly. You can also include <img src="images"> as well as
<code>code</code> and <span class="quote">pull quotes like this</span>,
and they will be formatted properly as per our style guide.
</p>To include marginal notes simply add a span.marginal-note element inside of a p element, beside the word which you want to annotate. The BBElements library will take care of creating all the numbers as well as the marginal note asides. The span must also include a data-info attribute with the information you want displayed in the margin. These can also include links written in markdown syntax.
<p>
You can also include marginal notes like this <span class="marginal-note"
data-info='[Lorem ipsum](https://www.wikipedia.org/) dolor sit amet,
[consectetur](https://www.wikipedia.org/) adipisicing elit. Nisi,
corporis.'></span>. That span will become the appropriate number
(depending on how many marginal notes are before it in this page) and will
create an aside with the info in the data-info attribute. You can create
using markdown syntax as seen above.
</p>For large pull quotes (ie. outside of <p> or <div class="bbe"> elements) include them inside a span.quote element. They take an optional data-credit attribute which will appear in lighter font below the quote. These can include links written in markdown syntax.
<span class="quote" data-credit="Dr. Ipsum [publication](https://website.org)">
This is something someone said
</span>To format large media elements properly (ie. outside of <p> or <div class="bbe"> elements), include them inside a section.media element. These take an optional data-fullwidth property. Inside media elements you can include <img> elements. If the element has an alt attribute, the value of the attribute will be used as the caption for the media element. These captions can also include links written in markdown syntax.
<section class="media" data-fullwidth="true">
<img src="image.jpg" alt="picture of a [cool](http://cool.com) cat">
</section>For large code examples (ie. outside of <p> or <div class="bbe"> elements) include them inside a code element within a pre.code element. You can optionally word wrap the code by setting the data-wrap attribute to "true". If you are optionally using bb-code-colors.css and highlight.js for syntax highlighting (see usage notes above) then you can also specify what language the code snippet is in by specifying it in the code element's class attribute.
<pre class="code">
<code class="js" data-wrap="true">
var x = 100;
var y = 100;
for(var i=0; i<100; i++){
z = Math.random() * 100;
drawStuff(x,y,z);
}
</code>
</pre>