Bag.css NPM | npm.io

bag.css

The minimal library for fixed and fluid CSS containers.

You don't ndeed monolithic CSS frameworks for simple CSS containers (fluid/fixed). bag.css does the job and it weights ~150 bytes. :dizzy:

Usage

In the dist directory there are three minified files:

bag.fixed.css (151 B): the fixed container
bag.fluid.css (100 B): the fluid container
bag.all.css (164 B): the previous two files' content put together

Example

Include the CSS file in your page:

<link rel="stylesheet" href="bag.all.css" type="text/css" charset="utf-8">

Then you can use the .bag and .fluid/.fixed classes:

<div class="fluid bag">
   I am a fluid container.
</div>
<div class="fixed bag">
   I am a fixed container.
</div>

Grid system?

The scope of the library is just to provide the easy way to

build fixed and fluid responsive containers. If you need to

split the rows in columns, you can use

Gridly.

:question: Get Help

There are few ways to get help:

Please post questions on Stack Overflow. You can open issues with questions, as long you add a link to your Stack Overflow question.
For bug reports and feature requests, open issues. :bug:
For direct and quick help, you can use Codementor. :rocket:

:memo: Documentation

The bag.all.css file handles the semantic classes:

bag: that means the element should be a container (fluid or fixed)
fixed: together with bag, this will create a fixed container (e.g. `<div class="fixed bag").
fluid: together with bag, this will create a fluid container (e.g. `<div class="fluid bag").

If you only need fixed (fluid) containers on your page, you will probably want to load just bag.fixed.css (bag.fluid.css).

Depending on the window width, the fixed container will have the following widths:

1170px, min-width: 1200px
970px, min-width: 992px
750px, min-width: 768px
100%, less than 768px

:yum: How to contribute

Have an idea? Found a bug? See how to contribute.

:sparkling_heart: Support my projects

I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).

However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:

Starring and sharing the projects you like :rocket:
—I love books! I will remember you after years if you buy me one. :grin: :book:
—You can make one-time donations via PayPal. I'll probably buy a ~~coffee~~ tea. :tea:
—Set up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone).
Bitcoin—You can send me bitcoins at this address (or scanning the code below): 1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6