louismerlin / concrete.css Goto Github PK

View Code? Open in Web Editor NEW

486.0 5.0 12.0 213 KB

A simple and to the point classless CSS framework

Home Page: https://concrete.style

License: MIT License

CSS 46.54% HTML 53.46%

concrete css html framework css-framework minimalist brutalist classless

concrete.css's Introduction

concrete.css

A simple and to the point classless CSS stylesheet

What is this ?

This a classless CSS stylesheet, built for lightness and simplicity.

Concrete can be a great starting point for a simple website.

It also switches to a dark theme if your OS uses one.

Inspired by Milligram and Skeleton.

Please feel free to open an issue and/or contribute !

Get Started

In your HTML `<head>`

Just drop this line into your html <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/concrete.min.css">

In your javascript project

Add the dependency:

npm install concrete.css

Import it somewhere in your code:

import 'concrete.css'

concrete.css's People

Contributors

Stargazers

Watchers

Forkers

jedevc rberglund andreas-ku repos-css maxk42 murgeljm jwilber badcat iamkoch ferdydurque fynks xge

concrete.css's Issues

Stylesheet should allow for better layout

Right now concrete.css does not render well when using the following HTML layout:

<header>
</header>
<main>
</main>
<footer>
</footer>

This layout should be supported, and even potentially used by https://concrete.style/.

Extract hard coded values into variables

I like that this is opinionated, however hooks to change things like max-width would be useful.

I've easily overridden the background colour by setting --bg, so it'd be great to extract other, more overarching, variables out into a place where they can be set once.

For example, a wider header with less bottom padding, a wider body, etc.

Provide minified version

Please provide concrete.min.css

CSS should not modify paddings and margins as much

concrete.css might not be adhering to the standard ways of handling paddings and margins that users would expect.

See https://news.ycombinator.com/item?id=39301877

Tweaks to the Home page examples

I like this. However I noticed a couple of things that might benefit from some minor adjustments.

Buttons:
Per the W3C validation...

The <button> element must not appear as a descendant of the <a> element.

Suggest removing these examples:

<a href="./"><button>a link button</button></a>
<a href="./"><button disabled>a disabled link button</button></a>

Break line:
Break line <hr> should probably be called Horizontal Rule.
Also, probably don't need to show <hr /> with trailing slash for default html5, but instead just <hr>

Homepage should conform to W3C standard

There are a couple of issues outlined when using this tool:

https://validator.w3.org/nu/

The main https://concrete.style homepage should strive to have no outstanding issues.

Concrete should have support for a <nav> menu

One element lacking from concrete.css is a good-looking <nav> menu.

Inspirations include holiday css and awsm.css.