Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/hhakk/lazycss
- Owner: hhakk
- License: mit
- Created: 2023-04-06T15:22:28.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-04-06T16:06:26.000Z (over 1 year ago)
- Last Synced: 2024-07-30T17:37:14.353Z (4 months ago)
- Topics: classless, classless-css, classless-css-framework, css, extensible, minimal, responsive
- Language: HTML
- Homepage:
- Size: 8.82 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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)