https://github.com/Kimeiga/bahunya

10KB classless CSS framework with a navbar and dark styling
https://github.com/Kimeiga/bahunya

classless classless-theme css css-framework css3 framework html small tiny

Last synced: 3 months ago
JSON representation

10KB classless CSS framework with a navbar and dark styling

• Host: GitHub
• URL: https://github.com/Kimeiga/bahunya
• Owner: Kimeiga
• License: mit
• Created: 2018-09-08T23:46:32.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-12T21:05:46.000Z (over 1 year ago)
• Last Synced: 2024-05-08T08:32:58.470Z (6 months ago)
• Topics: classless, classless-theme, css, css-framework, css3, framework, html, small, tiny
• Language: HTML
• Homepage: https://hakanalpay.com/bahunya/
• Size: 398 KB
• Stars: 287
• Watchers: 11
• Forks: 18
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• Awesome-CSS-Resources - Bahunya:

README

        


  



# Bahunya

A *classless* CSS framework with a *navbar* and *dark styling* for around 10.46 kB.

Use it by pasting the following into your ``

```html

```

Now write your web app with semantic html elements and watch it look pretty right out of the box, no css classes needed!

### Goal of the Project

The ultimate goal of Bahunya is to be a CSS "framework" that can provide almost everything you really need for a web app or website without introducing any new CSS classes at all. 

I observed that many of the most common UI elements in websites can be wholly described by semantic HTML elements rather than `
`'s with classes. What's more is that most CSS frameworks tend to style these elements very similarly. So why not remove the classes altogether and use semantic html elements (``, ``, etc), which can help improve accessiblity for screen readers, and also make the website source easier to read and write for developers.


That's the north star of this project: to get as far as possible toward that goal without introducing classes (this will mean Bahunya might not have a grid system or other things where classes needed). If you have ideas on more things to add without classes, feel free to contribute!

* * *

How to make the navbar

----------------------

Example:

```html

  Bahunya

  test

  markdown

```

What about a navbar with nested lists?

```html

  


    


      Text

      


          
Headings

          
Paragraphs

          
Blockquotes

          ...

      

    

    


      Embedded content

      


          
Images

          
Audio

          
Video

          ...

      

    

    


      Form elements

      


          
Input fields

          
Select menus

          
Checkboxes

          ...

      

    

  


```

As you can see, the navbar works whether you use a unordered list with sub-unordered-lists (`
`'s with `
`'s) or if you just put the ``'s right under the main ``. Both work, although I think the latter option might be better for screen readers.


## To develop locally:

`yarn`

`yarn dev`

## To build:

`yarn build`

### Mini Post-mortem

I wrote about this framework in the DevX publication on Medium!

https://medium.com/ucladevx/i-created-a-10kb-classless-css-framework-5d5eff56837d

If you are a computer science student at UCLA looking for a collection software team to hone your skills on a real-world project, feel free to apply!

http://ucladevx.com/

### Thanks

Huge thanks to [Kognise](https://www.kognise.dev/) and all the folks behind [Water.css](https://watercss.kognise.dev/). Bahunya needed an enourmous facelift, and I was able to bootstrap (hehe) a lot of work from water.css. 

Huge thanks to [Yegor Bugayenko](https://www.yegor256.com/) and [Filipe Freire](https://filfreire.com/) for creating [Tacit](https://yegor256.github.io/tacit/), a fantastic classless CSS framework that inspired this project.

As for me, I'm [Kimeiga](https://hakanalpay.com) and I made this to help me get web apps off the ground without worrying too much styling.