Adrenaline is a near classless CSS framework that lets you create websites blazingly fast with plain html. This results in shorter development times, smaller file sizes and faster downloads.
Statistically, sites that have a 1 second load time have a 7% bounce rate. Sites lose an additional 10% of users for every second their page takes to load.
It takes a lot of time tweaking around with CSS to create an optimized CSS framework. Tiny little details can be slightly off and you can spend hours just trying to figure out which part of the CSS is conflicting with each other. A lot of CSS frameworks require adding classes and even inline styling which requires a lot of manual labor and adds bloat. This results in larger file sizes and slower download times.
Adrenaline takes care of all of this saving you countless hours of development time.
Adrenaline is also fully responsive and the layout will automatically adapt to the screen width so it can be viewed on a variety of platforms like desktop, tablet, smartphones, etc.
Adrenaline draws visual design inspiration from Bootstrap and Tabler.io. It offers a similar look and feel, but without the CSS classes. You can also easily customize Adrenaline to match your needs and preferences.
Adrenaline is less than 5kb in size gzipped, so it's extremely lightweight and loads lightning fast.
This site you're viewing now is powered by Adrenaline. It's an example of what you can achieve with this framework with just plain HTML.
As a full stack developer, I've experimented with a lot of classless css frameworks. However, I found that most of them are pretty basic and they don't provide enough functionality. A lot of the time they will provide buttons and forms but no layout control and no navbar. I wanted a fully responsive framework that could encompass the whole layout and allow me to write plain html to get a stunning website up and running fast. I've always loved how Bootstrap looked. I still remember the first time I saw it. I was a bit mesmerized but their html is cluttered with css classes.
The Programmers' Credo: we do things not because they are easy, but because we thought they were going to be easy.My goal was to create a classless css framework that looks similar to Bootstrap without the class bloat. This results in smaller html files which reduces load times.
I initially made Adrenaline to use it for a personal project I was working on. I spent considerably more time than I thought I would and some people were interested in using it as well. It just sort of gained a life of it's own over time.
Notice how much more concise Adrenaline is compared to Bootstrap.
Bootstrap HtmlAdrenaline HtmlDownload adrenaline.min.css
Adrenaline uses a basic format that looks like the following:
Adrenaline uses Flexbox to automatically space elements in <nav> and <header> so it's easy to left, right, and center align elements based off of the order of the html.
Note: you can add as many <ul> elements as you want to <nav> and they will be spaced automatically.
<header> uses a similar approach to <nav> but with <div> elements.
Note: you can add as many <div> elements as you want to the <header> and they will be spaced automatically.
The <section> element is useful for creating a container for content. Sections are horizontally centered and have a max-width (default is 80rem) and will automatically adjust to smaller screen sizes. You can also add <grid> elements to a <section> to easily add columns.
The <grid> element is makes it extremely easy to use and is fully responsive by default and can easily be adjusted for different screen resolutions. Just add some divs with the col attribute and you're good to go. You can also embed <grid> within <grid> for more complex layouts as well.
Note: Column widths are expressed in fractions for easy usage. Examples: 1/1, 1/3 etc.
1/5
1/5
1/5
1/5
1/5
1/4
1/4
1/4
1/4
1/3
1/3
1/3
1/2
1/2
1/1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Image Only
The <code> element functionality has been kept basic as you'll most likely be using something like PrismJS for syntax highlighting and code escaping.
Here is some inline code.
General Content Text