Skip to main content

8. DIY Framework

Let us create a new folder named bubblin somewhere in your project using the following command:

DIY the Bubblin Framework
cd ./somewhere/in/your/project/

mkdir -p bubblin/{accessibility,app/{desktop,mobile,tablet,vehicle,television,watch},env/{helpers,tags},palette,router,typography,utils}

The mkdir command above will create all the folders necessary for you to start working with intrinsic design. These folders will carry ALL THE CSS necessary for your application's multiple frontends.

The next steps would be to 1. set up the css router for Bubblin to distribute the stylesheets with and 2. a baseline reset to normalize browser for each category of device specifically.

Router​

To set up the router, copy the contents of the following two files into the router folder of your new sub project.

These two:

  1. https://raw.githubusercontent.com/Bubblin/bubblin/master/bubblin/router/portrait.css
  2. https://raw.githubusercontent.com/Bubblin/bubblin/master/bubblin/router/landscape.css

Baseline​

Bubblin requires configuration of environment variables to ensure consistency across the browsers. Review the contents of the following two folders within the env folder of the official Bubblin repository:

https://github.com/Bubblin-Superbooks/bubblin/tree/master/env

Copy the contents of the folder tags/baseline and helpers into your local env folder, and you're all set.

You *did it yourself!*🔥