kevquirk / simple.css Goto Github PK

Title should make it clear. There are three files in the npm package:

• simple.css
• simple.min.css
• simple-v1.css

simple.min.css is the minified version of the V1 styles, not the latest.

Currently, the text of the form demo does not contain the checkbox ID on the checkbox input. The page should be updated to reflect this.

In v1, when adding drop shadow or scale changes on hover, my website would automatically smoothly animate between those values, but it doesn't seem to be the case in v2? v2 just has an instant change from one to another. If this is intentional, is there a way for me to opt back into this feature? Thanks

Hi, thanks for the really convenient project.

As per #31, it's limited that the header style only applied to the direct child of body element. But sometimes we have to put all elements under a "root" <div> element. Like React or Vue, the root Component should be mounted to a root element other than body, and the DOM structure would be like:

<div id="root">
  <header><h1>App</h1></header>
</div>

So, under these frameworks I cannot apply the header style anymore. I totally understand what #31 is saying but it would be great if we can figure out other kind of <header> limitations.

Great library, I really enjoy using it. I noticed a couple of things I thought I'd share:

The select input, when used in multi-select mode, I get the triangle when I would not want it:

What I want:

Maybe this is intentional, but in case it is not:

/* Format forms */
textarea,
select,
input {
  /* ... */ 
  font-size: inherit;
  font-family: inherit;
}

I did not extensively test this everywhere... I did test on macOS (Safari), iOS (Firefox Focus), Linux (Firefox, Chromium).

It's a small change, but you could link every label to the input using the for attribute. That way the label is clickable. Semantics, but could help encourage that in the wild, which helps people make more a11y friendly sites 😊

https://simplecss.org/demo

This definition:

I am trying to include a wide image (3600x900) but it creates a horizontal scroll on the laptop. Ideally, the image should be contained within the device width with automatic scale-down. What should I do to the img section in the css? Thanks.

Firefox 84.0.1 (64-bit) on Fedora 33.

Hi. I maintain a list of CSS frameworks and people created both an issue and a PR to consider Simple.css. The addition is tracked here: troxler/awesome-css-frameworks#87

I had a look at Simple.css and stumbled upon your styling of links that look like buttons. You seem to encourage/support two different ways to achieve them which both are bad practice.

• In your demo, you use <button onclick="window.location.href='https://example.com';"> instead of a link. Falling back to JavaScript for a simple thing such as a link is not a good approach.

• simple.css contains a selector a button that targets buttons within links. Links are not allowed to contain interactive elements which a button clearly is.

Please provide a valid way to achieve links that look like buttons.

Just like https://github.com/sindresorhus/github-markdown-css has a github-markdown-light.css and github-markdown-dark.css to force light or dark mode. It there a simple-{light,dark}.css to force color theme?

This is a great and clean CSS.

Any chance of having Admonitions.
Something like in Jupyter will be great: https://jupyterbook.org/content/content-blocks.html.

Noto font is not displayed on my system. I fix it replacing Noto by "Noto Sans" font family in:

--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;

Not really an issue, but It would be nice to also have these input types (date / time / datetime-local) in the demo.

Lots of developers don't know about them and include javascript pickers instead of just using the native ones!

PS: love the html accordion!

the demo page link is wrong :)

please update the vercel link the desciption with the new one https://simplecss.org

This is a great CSS library. Reminds me of PicoCSS. Would you consider relicensing this to something a bit more permissive and liberal like MIT or BSD?

Not an issue, just sharing a tweak needed in my use case.

WordPress Gutenberg or my theme, adds top margin to the first heading in a container. Makes good sense in a blog post, but looks off in the Details / Summary accordion.

This little addition to the style sheet, takes care of removing the top margin of any first element following the summary.

details[open] summary + * { margin-top: 0; }

Screenshot when applied:

Version: latest as of 2022-02-16 of both simple.css and simple-v1.css

Problem: Some inline tags have a fixed size, irrespective of their container or context, including <code>,<pre>,<kbd>, and <samp>

Example: https://jsfiddle.net/pbarney/kL7a3b8m/1/

Content in <code> tag is significantly smaller than the rest of the text in the H1 element.

Suggested solution: perhaps use em rather than rem on those inline tags?

Any thought around having the typical nav ul li a styling be the vertical menu?

nav ul {
  list-style: none;
  text-align: left;
  padding-left: 1rem;
}
nav ul li {
  border-bottom: 1px solid var(--border);
}
nav ul li:first-child {
  border-top: 1px solid var(--border);
}
nav ul a {
  margin: 0;
  border: none;
}

Today there's no vertical navigation and it seems to be a fairly common practice to make a nav-ul list when creating vertical menus.

As per the HTML5 spec, I use <header> and <footer> tags throughout my pages at multiple levels. Mostly at the page level and the article level. See below examples.

The simple.css style currently handles every header and footer identically. So any header for (in my case) section and article gets treated in a similar way. Therefor I need to fix every header and footer other then the main ones.

My suggestion would be to turn this around: make the current header and footer only work for the top level ones. This could be achieved simply (no pun intended) by addressing it as body > header and body > footer respectively.

I know I can fork and edit the css file, but I'd like to use the official CDN and apply as little customization as possible.

<html>
  <head></head>
  <body>
    <header>
      <h1>Hello World</h1>
      <nav>
        <a href="/">Home</a>
        <a href="#">about</a>
      </nav>
    </header>
    <main>
      <section>
        <header>
          <h1>
            List header
          </h1>
        </header>
        <article>
          <header>
            <h2>Article 1</h2>
          </header>
          <p>Lorem ipsum...</p>
          <footer>
            <p>Published by /me</p>
          </footer>
        </article>
        <article>
          <header>
            <h2>Article 2</h2>
          </header>
          <p>Lorem ipsum...</p>
          <footer>
            <p>Published by /me</p>
          </footer>
        </article>
        <article>
          <header>
            <h2>Article 3</h2>
          </header>
          <p>Lorem ipsum...</p>
          <footer>
            <p>Published by /me</p>
          </footer>
        </article>
        <footer>
          <nav>
            <a href="#">Prev</a>
            <a href="#">Next</a>
          </nav>
        </footer>
      </section>
    </main>
    <footer>
      Copyright 2021 Etc.
    </footer>
  </body>
</html>

I tried to do:
<button><a href="test">test</a></button>

but I get:

By decreasing the opacity of a button on hover it makes it less clickable.

I propose to replace it a filter that increases brightness on hover.

Demo

Before

After

This replaces opacity: 0.8; with filter: brightness(1.2);

So..., in my opinion to make this library more accessible, the <button> element should get the cursor: pointer; property in the :hover state.

This will increase the possibilities and the feeling when using pages created with this library.

In the demo page, https://simplecss.org/demo you styled for a button, button... but the the element button must not appear as a descendant of the a element to be W3C valid.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fsimplecss.org%2Fdemo

label {
    font-weight: bold;
}

(like <summary> and <th>).

Hi!
Big fan of your work :) I was wondering if you could use the releases feature in GitHub for new updates on simple.css and simple.min.css. I'm using this stylesheet locally on my site and am hoping to watch for releases to know when to update.

The style for the first nav tag in the page is extremely good. But sometimes we need multiple nav tag in a page. For example, Hugo automatically creates a nav tag for Table of Contents. Here is the reference.

Unfortunately, simple.css treats every nav tag similarly. As a result, the table of contents does not look good.

Why don't you have classes for some very common styles in development, like "btn btn-primary" like bootstrap?

I tried to mimic the navigation link with svg icon that the demo employs with the github icon.

<nav>
    <a href="github.com">
        <svg class='icon'>
            <path ...>
        </svg>
        "github"
    </a>
</nav>

When I inspect the demo, there is a small stylesheet that is for this demo page.

I just copied the styles for .icon into my stylesheet, and for the most part it worked.

.icon {
  vertical-align: sub;
  padding-right: .25rem;
  display: inline-block;
  width: 1em;
  height: 1.3em;
  margin-right: 0.2rem;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

Should this be included in simple.css?

form button and nav button are not same size, use case:

<body>
    <header>
        <h1>My Site</h1>
        <nav>
            <a href="/">Home</a>
            <form method="post" action="/logout">
                <button type="submit">Logout</button>
            </form>
        </nav>
    </header>
    
    ...

Perhaps there's other ways of accomplishing this? Perhaps this is intentional?

The logout action is a POST and not a GET that's why I can't use a link...

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin.

The cursor does not change to a pointer when hovering over a button. Tested in Firefox and Chromium. You can make the pointer explicit, like what was already done for <summary>.

a button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  /* ... */ 
  cursor: pointer;
}

When using <input type="range" min="1" max="10"> and sliding to the min or max, the bar is not completely filled because of left and right padding. Visually looks like a bug.

Thanks for stylesheet!

It's too high and looks weird on mobile.

Why is this at 750px and all others at 720px?

(I'm a CSS noob)

I like the minimal styling but I don't like the fairly narrow main section; how do I make it have no more than x % of white space left and right of the main body? right now it seems hardcoded to some maximum width

The website https://simplecss.org/ looks broken due to the CSS file missing on cdn.simplecss.org

https://cdn.simplecss.org/simple.css

would be nice if the standard html5 layout can be styled(article,section,sidebar etc). Thanks!

Hi Kev, thanks for this awesome resource. My website can toggle between dark and light modes based on the browser settings, but is there a way to put a toggle switch on the website itself that users can use to switch between the modes independent of the browser settings? Thanks!

How do I enable dark mode for my webpage?

Hello,

The dark mode is installed by default in automatic ?

Thank you in advance for yours answer,

Have a nice Wednesday from the France the weather is cloudy and it is fourteen to three here,

Regards.

Azaretdodo.

Lighthouse reports elements with low contrast in the light theme:

cite

and more in the dark theme:

cite
figcaption
p (in the footer)

Firefox accessibility tools say, that the elements have contrast ratio 4.08, but the minimal is 4.5. The recommended would be 7 which is exactly the contrast ratio of all other elements on the page. It's not only an opinion of some tools, I have hard time reading on worse, older screens.

Add definition lists in simple.css

In my custom CSS I add <dl>, <dt>, <dd> styles as:

dl {
  display: grid;
  grid-template-columns: auto 1fr;
}

dl dt {
  grid-column-start: 1;
  color: var(--text-light);
}

dl dd {
  grid-column-start: 2;
}

First of all, thank you so much for this amazing project.

I've created a Zola theme built with simple.css

Here is the project repo: https://github.com/tarunjana/simplify

You may consider to add this theme to the showcase page. 😄

When an input is disabled:

<input type="text" name="first_name" disabled="">

It looks the same and is thus indistinguishable from an input that is not disabled:

It should be clear that the input is disabled. For example by changing the color:

input:disabled {
    background: #efefef;
}

Was just curious if there was any interest in publishing this project to npm?

I think this would be especially helpful for those who might want to depend on this project via a package manager like npm or yarn, e.g.

$ npm install simple.css

which would then support continued use and upgrades via package.json

"dependencies": {
  "simple.css": "^1.0.0"
}

Additionally, I'm pretty sure this would also have a knock on effect of making this automatically available via tools like unpkg, so users could also just pop this into a <link> tag as well, e.g.

<link rel="stylesheet" href="https://unpkg.com/simple.css/simple.css">

To implement, the following steps would need to be taken (and I can help by submitting a PR for steps 1 + 2)

1. Add a package.json to the project with minimum needed keys like name, files, etc
2. Update README.md / website with different options for usage / installation (package manager, unpkg, copy / paste)
3. Publish (by the maintainer) and test 🤞

I have some images need to be auto-resized, I put

img {
max-width: 100%;
height: auto;
}

at the root level of simple.css, it worked well for me, should this be the default?

Hi, I have just started using simple.css for some prototyping and I love the ease of use!

One issue, which apparently is a continuous saga here (looking at #10, #41) is styling elements as buttons. The currently provided solutions are <button onclick=""> and (undocumented, invalid) <a><button> nesting.

I would like to offer another approach with role="button" ARIA attribute. I am not quite sure if this is correct accessibility-wise, but I think it fits the goal of this library and allows easy styling for any element.

Would you be interested in PR for this change?