From 6dc84b92a396cdf3237c5543219b498fc35f0d79 Mon Sep 17 00:00:00 2001 From: pdelboca Date: Wed, 7 Feb 2024 17:53:39 -0300 Subject: [PATCH] Fixes for margin collapse. Adding main element as part of the design. --- css/style.css | 20 +++++++++++++++++ css/sustainable.css | 52 +++++++++++++++++++++++++++++++------------- demo.html | 33 ++++++++-------------------- index.html | 53 ++++++++++++++++++++------------------------- 4 files changed, 89 insertions(+), 69 deletions(-) create mode 100644 css/style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..90f3a98 --- /dev/null +++ b/css/style.css @@ -0,0 +1,20 @@ +header { + display: grid; + margin-inline: auto; + place-content: center; + text-align: center; + background-color: canvastext; + color: canvas; +} + +strong { + color: var(--color-10) +} + +h1 { + font-size: 3rem; +} + +h2 { + margin-top: 3rem +} \ No newline at end of file diff --git a/css/sustainable.css b/css/sustainable.css index 08c820e..8971cbc 100644 --- a/css/sustainable.css +++ b/css/sustainable.css @@ -1,6 +1,6 @@ /*! - * Sustainable CSS v0.0.6 (https://github.com/pdelboca/sustainable-css/) - * Copyright 2023 - Licensed under MIT + * Sustainable CSS v0.0.7 (https://github.com/pdelboca/sustainable-css/) + * Copyright 2023 by Patricio Del Boca - Licensed under MIT * * Sustainable CSS reuses system colors: * https://drafts.csswg.org/css-color-4/#css-system-colors @@ -18,10 +18,32 @@ } body { + line-height: 1.65; + font-size: 1.15rem; + margin-top: 0; +} + +main { max-width: var(--max-width); - padding: 0 20px 20px 20px; - margin-left: auto; - margin-right: auto; + margin: 4vb auto; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { +/* +* Setting margins to 0 to avoid margin collapse: +* https://www.joshwcomeau.com/css/rules-of-margin-collapse/ +*/ + margin:0; +} + +p ~ p { + margin-bottom: 0.75rem; } img { @@ -45,14 +67,10 @@ fieldset, input:not([type=submit]), select, textarea { border: 1px solid; } -input[type=submit], input[type=reset] { +input[type=submit], input[type=reset], button[type=submit] { cursor: pointer; } -ul > li, ol > li { - margin: 0.125em; -} - header > nav > * > a, header > nav > a { font-size: larger; text-decoration: none; @@ -61,11 +79,13 @@ header > nav > * > a, header > nav > a { details > summary { cursor: pointer; + padding: 0.5em; } /* Branding and colors */ a { color: inherit; + font-size: inherit; text-decoration-color: var(--color-10); } @@ -77,7 +97,7 @@ input { accent-color: var(--color-10); } -input[type=submit], input[type=reset] { +input[type=submit], input[type=reset], button[type=submit] { background-color: var(--color-10); color: canvas; } @@ -95,10 +115,12 @@ mark { article { border: 1px solid; border-radius: .25em; - padding: 0em 0.5em 0.5em 0.5em; + padding: 0.5em; } -article > footer { - font-size: 0.9em; +article footer { + font-size: 0.9rem; text-align: right; } - +article footer, article > p + p { + margin-top: 1rem; + } diff --git a/demo.html b/demo.html index 4e33c96..d5e1b06 100644 --- a/demo.html +++ b/demo.html @@ -6,46 +6,35 @@ Sustainable.css Demo - +
-
-
-

Header 1

-

Header 2

-

Header 3

-

Header 4

-
Header 5
-
Header 6
+
+

Header and paragraphs

+

Header and paragraphs do not have margins. Avoiding margin collapse makes styling way easier.

Top Navigation links

I only make the font-size: larger and text-decoration: none. You can then layout it as you want.

-

Paragraph

-

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque minima libero sint, veritatis quo ratione. Magni - assumenda fuga fugiat iure dolor eaque ratione culpa mollitia expedita voluptates. Alias, odio vel?

-

Details

Click to expand -

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

+

A little bit or margin is good enough

Anchors and links

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

Forms

-

Forms layout are always customized and the styling is highly coupled with the layout. Example: margins of labels are highly coupled with the decision on puting them above the input or besides it. That's why Sustainable.css do not add @@ -55,11 +44,9 @@

Forms

We focus on giving a small styling to the inputs elements and let the user define how to layout it and further customize it. We do recommend using the sadly forgotten fieldset element.

-

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

-
Monster Sight Form @@ -130,7 +117,6 @@

Block quote

Lists

-

We add just margin: 0.125em for some extra spacing.

  1. first item
  2. @@ -145,8 +131,7 @@

    Lists

  3. third item
- - +
\ No newline at end of file diff --git a/index.html b/index.html index 02b7e90..accd16f 100644 --- a/index.html +++ b/index.html @@ -5,67 +5,57 @@ + Sustainable CSS -
-
-
-

Sustainable.css

-

A sustainable and good enough CSS boilerplate that: +

+

A sustainable and good enough CSS boilerplate that:

    -
  1. Leverages web browsers built-in aesthetics.
    2. +
  2. Leverages web browsers built-in aesthetics (including system colors).
  3. It embraces semantic HTML.
  4. It focuses in basic styling, not layout.
  5. Is built with branding in mind so you can color pallette your site.
  6. It focuses to work properly on mobile.
  7. Works great with native browsers light/dark schemes
    8. -
  8. Is built with sustainability in mind.
    9. +
  9. Is built to last.
-

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: +

Yes.

+

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. Some basic color pallette.
  3. Support for dark/light schemes
  4. Support for mobile
- I built this framework to help me with that and I hope it helps you too. -

+

It helps me, 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 built on HATEOAS.

-

It does not provide styling that you will probably change anyways (like headers font size and margins) nor layout system (it's 2023, you should be leveraging modern CSS).

Sustainability?

-

With sustainability I refer to several things: +

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. It will work as long as HTML and CSS work, with extremely low maintenaince.
  3. It is not hosted nor packaged with expensive pipelines or infrastructure. (#NoBuild FTW!)
  4. Web browsers spends lots of money on styling and rendering features. I build on top of that.
-

Branding

@@ -75,39 +65,42 @@

Branding

I might extend this as I explore and understand better minimalistic ideas to add color to a website.

+

Customization

- Just add your own css file and override/extend whatever you want. + Just add your own css file and extend whatever you want. (This site adds 4 small css rules and some inlines)

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

+

Contributions

You can read the code, fork and contribute in the Github repository: pdelboca/sustainable-css. +
\ No newline at end of file