Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hhakk/lazycss

Get modern, responsive website look with ~200 lines of classless CSS
https://github.com/hhakk/lazycss

classless classless-css classless-css-framework css extensible minimal responsive

Last synced: 6 days ago
JSON representation

Get modern, responsive website look with ~200 lines of classless CSS

Awesome Lists containing this project

README

        

# LazyCSS - classless CSS when you're lazy

Modern websites look the same. Navigation bar at the top, a responsive sidebar and centered content on desktop.
**LazyCSS** is one attempt to create the modern cookiecutter layout effortlessly.

Either use this in your blog or as a general extendable template.

## Installation

1. Download the [lazy.css](lazy.css) file from the repo.
Drop these lines into your HTML file under ``:
```

```
And you're done.

This repository contains [a simple demo site](index.html) (screenshots below).

## Features

* Probably smaller than the CSS you're currently using (under 200 lines excluding comments)
* No need to minify
* Configurable with variables (fonts, colors easily changed)
* Responsive sidebar with `` -element.
* Responsive navbar (with logo placement) by just writing
```


  • Logo

  • Item 2

  • Item 3

```

## License

See [LICENCE](LICENCE).

## Screenshots
### Mobile

Before:

![Mobile view (Original)](original-mobile.png)

After:

![Mobile view (LazyCSS)](lazycss-mobile.png)

### Desktop

Before:

![Desktop view (Original)](original-desktop.png)

After:

![Desktop view (LazyCSS)](lazycss-desktop.png)