bootsify v1.1.0

Automatic Bootstrap breakpoints for your own css classes!

If you are a bootstrap developer you should be familiar with how bootstrap handles their responsive classes. You add "-sm", "-md", "-lg" or "-xl" suffixes so bootstrap can change the content accordingly. but what if you are writing your own css? you dont have the simplicity of this workflow! That´s why i created

bootsify, so you can add that simplicity on the fly to your own css style whit a little bit of help from javascript!

Demo

bootsify will create automatically all the breakpoints for you! Just add the css for each breakpoint and thats it. Also, Bootsify by default uses the Bootstrap css breakpoints so your style should resize alongside other bootstrap elements

//You don´t have to add all the breakpoints, just the ones you need.
let boot = new Bootsify({debug:true,});
// Bootsify accepts all valid css selectors
boot.add(".test-p", {
    //Bootsify accepts any valid css string. Is like using the "style" attribute in an HTML tag
    xs:"color:black; font-size:0.2rem ",
    sm: "color:blue; font-size:0.5rem",
    md:"color:red; font-size:1rem",
    lg:"color:yellow;  font-size:1.5rem",
    xl:"color pink; font-size:2rem"
});

Make sure you have an html element with the identifier you want to target

<p class="test-p" id="test-p" ></p>

now if you resize the window you will see how the text change size and color!

Install

direct download of this repository

<script src="bootsify/build/bootsify.js"></script>

usign npm

  $ npm i bootsify

then

var bootsify = require("Bootsify")

Custom breakpoints

By default bootsify uses the same Bootstrap breakpoints.but you can set your own breakpoints

//Just change the properties values inside the contructor parameter
let boot = new Bootsify({
    sm: 800,
    md: 900,
    lg: 1000,
    xl: 1100
});//Note: XS breakpoint is just any screen smaller than the sm breakpoint.

Default Style

bootsify works in conjunction with your CSS. If you add a break point, it will simply take the style from that point onwards.If you add more than one break point, the width of the screen will change in size, this will replace the previous break point.

Debug

If you want to know which breakpoint is currently active just add the debug parameter and set it to true. This will also tell you the current viewport width

let boot = new Bootsify({
    debug:true,
    sm: 800,
    md: 900,
    lg: 1000,
    xl: 1100
});