Skip to content

brangerbriz/BBElements

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

75 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BBElements

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.

usage

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.

usage with module bundler

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>

Elements and Classes

BB Logo

You can include an SVG of the BB logo with the code below. It has a few optional attributes which are as follows:

  • width which changes the size of the logo.
  • href which specifies where to link the logo to. When no href is specified the link defaults to our website, when set to href="false" it won't link anywhere.
  • data-sub-title which adds a sub-title below the logo.
  • data-brand-color which changes the default pink color.
  • data-text-color which changes the default black text color.
  • data-fill-color which changes the white color of the B inside the circle mark.
  • data-mark-only if 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 using bb-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>

headers

<h1> larger black titles </h1>
<h2> large black titles </h2>
<h3> small pink titles </h3>

tag elements

<span class="tags">
    <a href="#">Generative</a>
    <a href="#">Installation</a>
    <a href="#">Digital Literacy</a>
</span>

divs and paragraphs

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>

marginal notes

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>

block quotes

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>

media elements

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>

code snippets

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&lt;100; i++){

            z = Math.random() * 100;
            drawStuff(x,y,z);

        }
    </code>
</pre>

About

Branger_Briz CSS/JS for branded styleing

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •