diff --git a/css/sustainable.css b/css/sustainable.css index 7b94f63..08c820e 100644 --- a/css/sustainable.css +++ b/css/sustainable.css @@ -1,15 +1,15 @@ /*! - * Sustainable CSS v0.0.5 (https://github.com/pdelboca/sustainable-css/) + * Sustainable CSS v0.0.6 (https://github.com/pdelboca/sustainable-css/) * Copyright 2023 - Licensed under MIT * * Sustainable CSS reuses system colors: * https://drafts.csswg.org/css-color-4/#css-system-colors */ -:root { + :root { color-scheme: light dark; font-family: sans-serif; - --theme-color: rgba(0, 119, 204); + --color-10: rgba(0, 119, 204); --max-width: 800px; } @@ -37,11 +37,15 @@ fieldset, input, select, textarea, button { padding: .5em; } +button { + border-width: 1px; +} + fieldset, input:not([type=submit]), select, textarea { border: 1px solid; } -button, input[type=submit], input[type=reset] { +input[type=submit], input[type=reset] { cursor: pointer; } @@ -60,17 +64,31 @@ details > summary { } /* Branding and colors */ -h1, h2, h3, h4, h5, h6 { - color: var(--theme-color); -} a { - color: canvastext; + color: inherit; + text-decoration-color: var(--color-10); } + a:hover { font-weight: bold; } + input { - accent-color: var(--theme-color); + accent-color: var(--color-10); +} + +input[type=submit], input[type=reset] { + background-color: var(--color-10); + color: canvas; +} + +fieldset { + border-color: var(--color-10); +} + +mark { + background-color: var(--color-10); + color: canvas; } /* Article */ diff --git a/demo.html b/demo.html index 214ac57..4e33c96 100644 --- a/demo.html +++ b/demo.html @@ -6,6 +6,11 @@ Sustainable.css Demo + @@ -33,9 +38,12 @@

Paragraph

Details

Click to expand -

I just added cursor: pointer; to the summary element. Good enough.

+

I just added cursor: pointer; to the summary element, good enough.

+

Anchors and links

+ Default font color that becomes strong on hovering and accented underline. +

Forms

@@ -49,7 +57,7 @@

Forms

- The following form is just 10 lines of CSS. Good enough. + The following form is just 10 lines of CSS, good enough.

diff --git a/index.html b/index.html index 65b7441..02b7e90 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,11 @@ Sustainable CSS + @@ -16,8 +21,8 @@
-

Sustainable.css

-

A sustainable and good enough CSS boilerplate that: +

Sustainable.css

+

A sustainable and good enough CSS boilerplate that:

  1. Leverages web browsers built-in aesthetics.
  2. It embraces semantic HTML.
    3. @@ -28,25 +33,25 @@

    Sustainable.css

  3. Is built with sustainability in mind.

-

It is 2023, Web Browers are amazing at rendering and handling natively light-dark schemes. Let's built on that.

+

It is 2023, Web Browers are amazing at rendering and handling natively light-dark schemes, I'm building on top of that.

Yet another minimalistic CSS Framework?

Yes.

- I built sustainable.css because I usually do lots of simple websites that require a couple of basic things: + I built Sustainable.css because I usually do lots of simple websites that require a couple of basic things:

  1. Some kind of centering
    2. -
  2. Customizing color pallettes.
    3. +
  3. Some basic color pallette.
  4. Support for dark/light schemes
    5. -
  5. Works great on mobile
    6. +
  6. Support for mobile
- I built this framework to help me with that. I hope it helps you too. + I built this framework to help me with that and I hope it helps you too.

Is it for me?

-

Sustainable.css aims to be good enough at styling plain HTML. Perfect for MVPs and sites +

Sustainable.css aims to be good enough at styling plain HTML. Perfect for MVPs and sites built on HATEOAS.

It does not provide styling that you will probably change anyways (like headers font size and margins) nor layout @@ -55,17 +60,17 @@

Is it for me?

Sustainability?

With sustainability I refer to several things:

    -
  1. It is just a few KB, Sustainable.css does not require lot of bandwith and energy to work.
    2. +
  2. It is just a few KB, Sustainable.css does not require lot of bandwith and energy to work.
  3. It will work as long as HTML and CSS work, with extremely low maintenaince.
    4. -
  4. It is not hosted nor packaged with expensive pipelines or infrastructure.
    5. +
  5. It is not hosted nor packaged with expensive pipelines or infrastructure. (#NoBuild FTW!)
  6. Web browsers spends lots of money on styling and rendering features. I build on top of that.

-

A Good Enough color pallette

+

Branding

Since I'm trying to delegate as much as possible to the browser defaults, I just choose a color that goes good with Black & White (Colors with 4.5:1 contrast on Black and White). - This way I can leverage the browser's light-dark scheme, the user's preferences and I make sure that colors I choose are accesible. + This way I can leverage the browser's light-dark scheme knowing that the pallete color will be accesible in both modes.

I might extend this as I explore and understand better minimalistic ideas to add color to a website. @@ -78,8 +83,23 @@

Customization

So far only 2 variables are exposed: + +

+ Sustainbale.css is being developed with the 60/30/10 design rule in mind (being 60% the main black/white used for backgrounds!). +

+

+ --color-10 will customize: +

+

+

+ It's up to you to use it to add some extra "splash" of it to your UI. (For this page I decided to style strong tags and the main header with it) +

Sustainable.css in action