Bahunya

10KB classless CSS framework with responsive typography, navbar, syntax highlighting, and much more.

0.1.2 tacit logo

Bahunya is a CSS framework (like Bootstrap) with no classes. This means that as long as you write semantically correct HTML and include the minified (10kb) version of this framework, your website will look like this! Just include the following in your <head>

<link rel="stylesheet" href="https://cdn.rawgit.com/kimeiga/bahunya/css/bahunya-0.1.2.css"/>

Bahunya will work out of the box on HTML5 compliant websites, but can be easily customized with custom CSS and CSS classes.

To use a hamburger menu navbar, or activate syntax highlighting, head to Installation.

To customize colors and fonts, head to Customization.


Follow along the source code of this page! Press ctrl shift i on Windows to open Devtools on Chromium browsers.

Bahunya complies with W3C validator requirements for HTML and CSS.

Valid CSS!

Typography

This is an <h1>

Try using this as a title once per page.

This is an <h2>

Try using these as sections of the content.

This is an <h3>

Use these as sub-section headers.

This is an <h4>

And so on.

This is an <h5>

And so on.

This is an <h6>

<h5> and <h6> are the same size as body copy.

This is marked text. This is bold, and this is italic.

This is superscript and this is subscript.

Here's a blockquote!

There are 7 days in a week and someday isn't one of them.
— Benny Lewis

Responsive Typography

Bahunya uses Shevy to create and maintain vertical rhythm throughout the webpage for opimum aesthetics and legibility, and create a modular typographic scale for the headings.

On mobile, the modular type scale factor is 1.2. On tablet, 1.414. On desktop, 1.5. This means that the <h1> tags are 2.074rem, 3.998rem, and 5.063rem on mobile, tablet, and desktop respectively. By decreasing the base font size and heading contrast as the screen size decreases, we ensure that all copy easily fits in the viewport and is easily readable.

Go ahead, resize the window!

Images

Here's an image inside a <figure> with a corresponding <figcaption>

1000px x 500px placeholder image
A random 1000px x 500px image of a person

Here's the same image but just using a <img> tag

1000px x 500px placeholder image

Code

With the Prism add-in (see Installation), Bahunya supports HTML, CSS, C-like, and JavaScript.

Here's a <code> tag:

Dünya varmış!

Here's a <pre> with no <code> inside:

        I love eating peppers.
        You           guacamole.
        too           coconuts.
               writing poetry.
               what?

               then.
               ok???
      

Here's a snippet of highlighted JavaScript using a <pre> with a <code> inside:

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
              ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

export  $initHighlight;

Here's a keyboard command using <kbd>:

ctrl + alt + del

Buttons and Forms

Here are some buttons, enabled and disabled!

Here's a form without <fieldset>:

Here is a form with <fieldset>:

Personal

Account

Must be unique

Preferences

Tables

Here's a table of games!

Game Year Developed Awesomeness
Insurgency 2014 87/100
Absolute Drift 2015 91/100
Street Fighter III 1997 89/100

Lists

You can nest <ul> and <ol> tags as usual.

You can also write definition lists! (<dl>)

Hakan
The man who's writing this
Stanboi
Hakan's childhood friend
Prez
Hakan's other childhood friend

Help?

I made this framework because I was impressed by Tacit, but wanted to include much more. So I forked it and added lots of functionality while changing lots of things as well. This project has since evolved to become its own framework, and while I'm still working on it, I'm also busy with university! If you'd like to help out, fork this repo on Github and submit a pull request. Cheers!