Simple.css is a CSS template that allows you to make a good looking website really quickly.
Find out more at https://simplecss.org.
Any evergreen browser > IE11 (why is IE still a thing?)
Simple.css is a CSS template that allows you to make a good looking website really quickly.
Home Page: https://simplecss.org
License: MIT License
Simple.css is a CSS template that allows you to make a good looking website really quickly.
Find out more at https://simplecss.org.
Any evergreen browser > IE11 (why is IE still a thing?)
How do I enable dark mode for my webpage?
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.
It's too high and looks weird on mobile.
Why don't you have classes for some very common styles in development, like "btn btn-primary" like bootstrap?
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).
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
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...
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;
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.
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; }
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. ๐
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.
would be nice if the standard html5 layout can be styled(article,section,sidebar etc). Thanks!
fieldset {
border: 0;
padding: 0;
margin: 0;
}
Without this any HTML using <fieldset>
shows ugly borders and has additional padding/margin.
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?
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;
}
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.
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!
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)
name
, files
, etcThe 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.
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!
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
label {
font-weight: bold;
}
(like <summary>
and <th>
).
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!
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
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?
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.
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.
This replaces opacity: 0.8;
with filter: brightness(1.2);
please update the vercel link the desciption with the new one https://simplecss.org
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.
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;
}
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?
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.
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?
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.
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 ๐
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?
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?
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.
This definition:
Lines 51 to 54 in 68ddf6a
<pre>
blocks impossible because every <span>
that would define a local highlighting colour leads to the global sans serif font.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.
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>
The website https://simplecss.org/ looks broken due to the CSS file missing on cdn.simplecss.org
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.