baseless v0.0.9

BASELESS

BASELESS ("bs" for short) is a small (~23k) modular ui framework for any modern website. The idea behind bs was to create a living styleguide for your website, with pre assembled common use components. You'll find a lot of familiarity between this framework and many other popular frameworks, as a huge fan of @mdo and of his ideas I take a lot of naming conventions found in twbs, this is namely just to help anyone else on a team pickup a basic naming convention, have you not one of your own.

Components

bs components are all modular, so you can include only the components you need.

• alerts.less - ever feel the need to get your point across, use me.
• buttons.less - dynamic buttons, can morph their colors in the time it takes you to mouseup
• forms.less - ...
• grid.less - highly experimental, mostly volatile and will be refactored 12 column grids
• labels.less - from price tags to ctas to push notifications, labels wont let you down
• lists.less - gives you a little more control over the display of your list items
• panels.less - panels are an everyday item from dashboard ui's to user profiles, get 'em
• shapes.less - ...
• tables.less - very, very simple table styling, there's still a time and place for tables
• wells.less - wells also double as utility-boxs very easily, what you'd expect

Folder Structure

while bs is small it may have some confusing parts. Here's how it's all layed out:

.
├── bower.json
├── config.js
├── dist
│   ├── bs-stats.md
│   ├── style.css
│   ├── style.css.map
│   ├── style.min.css
│   └── style.min.css.gz
├── gruntfile.js
├── gulpfile.js
├── less
│   ├── _base.less
│   ├── components
│   │   ├── _alerts.less
│   │   ├── _buttons.less
│   │   ├── docs
│   │   │   ├── alerts.hbs
│   │   │   ├── buttons.hbs
│   │   │   ├── forms.hbs
│   │   │   ├── grid.hbs
│   │   │   ├── includes
│   │   │   │   ├── form-label.hbs
│   │   │   │   ├── form-label-select.hbs
│   │   │   │   ├── form-label-textarea.hbs
│   │   │   │   ├── form-label-text-input.hbs
│   │   │   │   └── form-label-text-input--inline.hbs
│   │   │   ├── labels.hbs
│   │   │   ├── lists.hbs
│   │   │   ├── panels.hbs
│   │   │   ├── shapes.hbs
│   │   │   ├── tables.hbs
│   │   │   └── wells.hbs
│   │   ├── _forms.less
│   │   ├── _grid.less
│   │   ├── _labels.less
│   │   ├── _lists.less
│   │   ├── _panels.less
│   │   ├── _shapes.less
│   │   ├── _tables.less
│   │   └── _wells.less
│   ├── _constants.less
│   ├── _helpers.less
│   ├── _mixins.less
│   ├── _normalize.less
│   ├── _print.less
│   ├── styleguide.md
│   ├── style.less
│   └── template
│       ├── helpers
│       │   └── cssPrefix.js
│       ├── index.html
│       ├── less
│       │   └── style.less
│       ├── package.json
│       ├── public
│       │   ├── kss.css
│       │   ├── kss.js
│       │   ├── less.js
│       │   ├── prettify.js
│       │   ├── style.css
│       │   └── style.css.map
│       └── template_config.js
├── LICENSE
├── package.json
├── README.md
└── styleguide
    ├── index.html
    ├── public
    │   ├── kss.css
    │   ├── kss.js
    │   ├── less.js
    │   ├── prettify.js
    │   ├── style.css
    │   └── style.css.map
    ├── section-1.html
    └── section-2.html

Tasks

bs uses gulp or grunt under the hood to do all the compilation and build steps. With that said I'm not unnecessarily forcing you to download devDependencies for both of them. For whichever task runner you'd want to use included you'll find an npm script: npm run gulp-init or npm run grunt-init. :neckbeard:

Available Tasks