bol{;}
Methodology

by Ramdeo Shubham ©

doc ver 0.2

Star

Contents

Introduction

bol is an experimental design methodology. It stands for .base .-object ._layer.

Why bol?

bol is designed on purpose that new developers of a project can understand the code easier, while css remains logical.

Why not bol

There are lot of other naming methodology which may be more productive than bol. Please choose the one which suits your project.

Getting Started

Any design using bol can be divided as:

bol Wrapper

_layer

let user play with _layer

Users want to style elements on their own themes and designs or want to play by mixing the available options that's why they choose a specific framework.

-object

let user customize -object

Users want to have different kinds of objects and elements that's why they choose a specific framework.

.base

let user ignore base

Users don't want to waste time on this that's why they choose a specific framework.


BOL Example Diagram

base

Base classes includes the independent styling. So they also includes all the HTML tags. These classesq can be used alone independently. For example, button, headings, tooltip, navbar etc comes in base elements. They are named as follow.

If new element:

.base { ; }
If its an HTML element: base { ; }

Example

/* -CSS- */
p { ; }
.navbar { ; }
.tooltip { ; }

<!--HTML-->
<p> ... </p>
<div class = "navbar"> ... </div>
<div class = "tooltip"> ... </div>

object

Object classes purely dependents on their base classes. Although Base classes can be used independently with objects and they would use the default object styling, objects classes adds more base dependent elements and customization options. They are named as follows.

.base .-object { ; }

Always declared along with base for specificity.

This pretty much looks like : "navbar navbar-icon" or "tootltip tooltip-right". But instead repeating base, here we use only hyphen (or something as object prefix).

Example

/* -CSS- */
.tooltip .-right  { ; }
.tooltip .-icon  { ; }
.navbar .-icon { ; }

<!--HTML-->
<div class = "navbar -icon"> ... </div>
<div class = "tooltip -right"> ... </div>
<div class = "tooltip -icon"> ... </div>

layer

Layer classes are not bound to any other class and can be used in any way. But using them without any base (includes HTML elements) or objects will not make any sense. They are the Utilities and Modifiers and can be mixed up. These are named as follows.

._layer { ; }

!important tag can be used as layers holds the final style. But try to avoid if possible.

Example

/* -CSS- */
._width-full { ; }
._desktop-hidden { ; }
._black { ; }

<!--HTML-->
<div class = "navbar _desktop-hidden"> ... </div>
<div class = "tooltip -right _width-full"> ... </div>
<div class = "tooltip -icon _black _desktop-hidden"> ... </div>

bol Structure

Example

base navbar
object -dropdown
layer _disabled

base tooltip
object -right-text
layer _red_blinking

<div class="navbar">
 <div class="-dropdown _disabled">
     MENU
 </div>
</div>

<div class="tooltip -right _red">
<div class="-text _blinking">
I am a blinking tooltipText of a red tooltip in right.
</div>
</div>

File Structure

For easy maintenance, all css should be made into different files for each base along with its objects and an independent layer file.

html-base-with-objects.css
base1-with-objects.css
base2-with-objects.css
...
layers.css

For production version, all should be put into a single minified compressed file.

/* -html.css- */
p { ; }
/* -tooltip.css- */
.tootltip { ; }
.tooltip .-right  { ; }
.tooltip .-icon  { ; }
/* -navbar.css- */
.navbar { ; }
.navbar .-icon{ ; }
/* -layers.css- */
._width-full { ; }
._desktop-hidden { ; }
._black { ; }

General Guidelines for HTML with bol

  1. Try to avoid using !important;
  2. Stay away from #ids. Always use classes for styling.
  3. No child without parent.
  4. Follow DRY, Don't Repeat Yourself.

FAQ


Umm.. I still didn't get it! What is bol?
Okay! bol is simply a design convention that can you can use, specially during web designing. Just like, an standard approach to follow while writing CSS etc. Other great alternatives are : BEM, SMACSS, OOCSS etc.

What's make bol different?
It's still experimental. Though other available methodology are great and more mature, bol is intended to be both brain and computer friendly while rapid designing.

History behind bol?
During development of Beauter Framework, a default convention system was required to be develop over. Although a lot of options were available, an experimental methodology was developed from scratch, later named bol.

Where bol is useful?
bol is developed keeping mobile CSS designing as its primary goal. But the idea behind the methodology may be applicable to any designing process.

found repeated usage of underscores before layer classes. Don't you know using underscores might be a issue for some browser?
Yes. But here we used it just for the purpose of representation. To make it look more distinct than object and a bit more fancy. You may use whatever you like, for example, l-layer.

Can I use this the way I want, for free?
Yes you can. Ideas behind this document is free to use for your designing purpose. But the document itself is copyrighted. You have to give proper credit to the author before any kind of republication.

How can I contribute my ideas too?
bol is being maintained as an open source repository on Github. You can get involved here.

I Didn't found my answer!
Its no problem, you can ask here.

Star

Designed with ♥ by Shubham Ramdeo
Copyright 2017