About

Listen, trust me I know more than anyone that the world doesn't need another CSS framework. But, this isn't for the world. This for me. So with out further ado, I present to you .....

Why. Would you do this.

I started working with websites and the internet in 2018, and I pretty quickly learned I would rather go hunting through debugging logs for segfaults than ever touch a piece of CSS in my lifetime. But I realized something important just before my senior year of college.

Anyway after panicking for a few house about various ways to starve myself, I realized the solution was to do what most upcoming college grads do and get a job. Well to get one of those you need a website, resumes are cool, but websites are cooler.

Now naturally the first question I asked is how is my website going to look, what are the colors going to and falling down the rabbit hole I realized, I need to get into a fight with my old friend CSS.

When I consulted my UI designer friends all of them said "Use a UI framework. It'll be easy. You just copy and paste and it'll look great."

They Lied.

Now here's the thing. I don't know about about most people, but I have a requirement for building stuff, I want to know why. I dont have it in me to do something with using something with out having at least a rudimentary explanation of how and why it works. So after attempting to use just about every framework under the sun. I decided it was time to go do this the "right way", by starting from scratch and writing my own!

---

Getting Started

To really get started all you need to do is download the css file and include it in your project.

If you want icons which of course you do why would you not, because icons are awesome, you will also need font awesome.

---

Features

All classes for this framework require the pretty tag to be in the class, this is to avoid conflicts with other framework and styles.

Buttons

Butons are incredibly important to any good site buttons for pretty-please are written as follows.

You can specify one of 8 colors above, the default button is colored using the --accent variable.

Buttons can be transparent

Buttons can be animated.

Buttons can have font-awesome icons and be circular.

Buttons can be different sizes. To change the size of icon sizes you need to follow font-awesome's instructions.

The two larger buttons use the .small-check class to hide as they are just too chungus for tiny mobile screens.

If you have dreams of having a mobile site pay attention to the line above I spent 3 hours of my life debugging this issue.

Text

You can specify one of 5 colors above, the default text is colored using the --text variable.

Text can be bold.

Text can be different sizes.

Inputs

There is a fairly minimal styling for inputs that outlines them and makes them transparent.

Code

For code we use prism.js. It's a really lightweight library that can render and display just about every programming language you need and many that you don't.

This is the defaults I like to use.

                
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css">
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
                    <script>Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/'</script>
                    <class="language-html"script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
                    <script>Prism.plugins.NormalizeWhitespace.setDefaults({
                    'remove-trailing': true,
                    'remove-indent': true,
                    'left-trim': true,
                    'right-trim': true,
                    /*'break-lines': 80,
                    'indent': 2,
                    'remove-initial-line-feed': false,
                    'tabs-to-spaces': 4,
                    'spaces-to-tabs': 4*/
                    });</script>
                
            

Images

There are lot's of ways to display images, i just implemented what I thought would be most useful.

By default all images are displayed as inline-blocks (so the flow the same way text does) and "responsive" they are limited by the max width of their parent container. The image above is trying to be 1000 px but is limited by the contianer. Try resizing your browser window to see it in action!

Images can also be inline with text and specify its vertical alignment.

Images can have rounded borders.

Images can be fluid and fill their contianer. The one below is only 300 px. (please never actually do this, unless you have a good enough quality image or an svg)

Images can also be formated to look like avatars.

Images can be a whole bunch of different sizes.

Images can float right or left of some content.

Videos

By defualt pretty videos are responsive and take up the full size of their parent container. To use pretty videos surround the embeded iframe with a div.

Graphs

Use d3.js

Grids

Just use the native CSS grid functionality, I'm not sitting down and imagining all of your various implementations requirements, it works well and is easy to learn.

Links

Links are colored using the --link-color variable, they can also be animated.

---

Credits

Thanks to these cools projects for making this possible / inspiration / free code for me "liberate".