Loading

A super powered framework

KUBISH

We have been actively developing Kubish since 2017 when we realised that the current range of CSS frameworks were just not up to scratch. Don't get us wrong, there are plenty amazing frameworks out there like Bootstrap and Foundation 5, but they all contain LOADs of unwanted bloat and force you to learn their way of coding in order to achieve simple tasks. Kubish is different, it takes the amazing, lightweight Kube CSS Framework adds in the super flexible Flexbox grid (+ fallback grid) and for the added measure we've added in modular control.

Standing on the

shoulders of giants

Kubish is a zombie framework pulling in features and design patterns from a number of different frameworks and ideologies. As it stands, Kubish was developed (and so called) using the Kube CSS Framework as a base. From there we integrated the flex-box grid system from Flexbox grid and piled on the features loosely following the Atomic Design pattern.

We've kept 95% of Kube.css, swapped around a few variables to improve configuration and left the rest up to you. When we develop websites we love working lean and mean, using Kube allows us to write our own CSS without having to worry about the padding of a button or the appearance of an iframe.

Check out the documentation below, the project is currently hosted on Bitbucket, but we're working to move across to Github so you can fork away. For the meantime, grab the files from the download page.


Getting started

Kubish is a complete self-sufficient framework, meaning everything you need to create a website is at your fingertips. Getting started is easy, just download the files and add them to your page.

Animation

Animations are a great way of adding motion and life to your UI, but please use sparingly! It's all too easy to over use animations making your website look tacky and slow. Check out the predefined animations below...

Breadcrumbs

Breadcrumbs in Kube are formed as lists with default separator. This separator can be customized with ease by simply changing a single CSS line

Buttons

Kubish buttons are minimalistic in nature, we've only added a few styles to get you started, all of which can be updated using the _variables.scss file.

Collapse

For all those times you want to hide content but can't be bothered to think of a better way to do it :D Collapsing content down (kinda like jQuery Accordion) is a good way to present information that doesn't need to be present on screen right away or for showing more info on a sidebar menu.

Dropdown

Dropdown menus are simple and intuitive. You've got a link with data-component="dropdown" and a div with some kind of HTML content. Clicking outside of the dropdown or hitting Esc closes dropdown

Forms

The backbone of any website! Forms are one of the most important elements of any website, they allow our users to search our sites, contact us, filter our products etc... We've made our forms easy to customise and looking great out of the box.

Grid

Flexbox grid: by default the .container class uses the settings in _variables.scss to define maximum widths. This is one of the best, most flexible grid systems out there that just works.

Labels

Labels have all standard Kube styling options available: outline, states (success, error, warning), inverted color, and more. You can also customize labels to your requirements, and place them inside other elements, such as buttons, for example

Messages

Messages are an essential part of the modern web, and they can provide invaluable feedback to the users. Messages in Kubish look nice, they are informative, simple and very easy to set up to whatever requirements you may have, style-wise or otherwise.

Mixins

Mixins are a great way to produce things and effects way faster with Sass then with pure CSS. Kube has a lot to offer in this respect; feel free to use any of these mixins with any Kube components.

Modal

Modal windows are used for various reasons and purposes. Kubish makes the way you design and operate modal windows very straightforward.

Offcanvas

Offcanvas makes it look like a menu is sliding from the outside of the page. This may be useful in many different cases, one of them being when you need to save space on screen and don't have to display sidebar at all times

Pagination

Default pagination in Kubish is organized using lists, with visual cues for the user what is the current page, and page numbers for easier navigation. Pagination buttons and multiline formats are available out-of-the-box as well

Sizing

Helper tools for elements width and height.

Sticky

Sticky navigation makes it easy to affix menus to the top of the page whenever a user scrolls the page down. This could be very helpful and useful on long pages.

Tables

Tables are an essential part of many different contexts. Kube serves them all and delivers full variety of tables, preformatted to save you time. Whatever your requirements are, tables are completely customizable to match them.

Tabs

Tabs in Kubish are crafted the way one would expect from the world's best CSS framework. With versatile API, a wide range of settings and options, with callbacks and live examples. Take a look!

Toggle

Toggle elements is a great way to add a binary option to either display some content or hide it. It works like a charm for menus, disclaimers and so much more!

Typography

Typography is perhaps one of the most important and most visible things on a web page. Even the slightest imperfection can ruin an otherwise perfect website. With Kubish, you will have perfect typography with ideal spacing, font sizes and proportions, regardless of the exact style or font you choose for your site.