susam / spcss Goto Github PK

View Code? Open in Web Editor NEW

932.0 10.0 29.0 38 KB

A simple, minimal, classless stylesheet for simple HTML pages

License: MIT License

CSS 100.00%

css stylesheet boilerplate dark-color-theme minimalist

spcss's Introduction

SPCSS

SPCSS is a simple and plain stylesheet for simple text-based websites.

Demo
Use SPCSS
CDN URLs
Why SPCSS?
Features
License
Support

Demo

Check this demo page to see how SPCSS styles a simple HTML page.

SPCSS supports systems and web browsers with dark color theme too, so how the page looks depends on the color theme selected on your system or browser.

If you are unable to change your desktop or browser theme right now, here are some screenshots to see what the output looks like with both themes:

Use SPCSS

To use SPCSS, merely add this line of code to the <head> element of your HTML file:

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

Alternatively, download the CSS file from here, edit and customize it as per your requirements, and use it in your project. You are also welcome to fork this repository and customize it to maintain your own copy of sp.css with styles you frequently need.

CDN URLs

Use the following URL in the <link> tag to load version 0.9.0 (the current version at this time) of SPCSS:

https://cdn.jsdelivr.net/npm/[email protected]

Use the following URL in the <link> tag to always load the latest version of SPCSS:

https://cdn.jsdelivr.net/npm/spcss

If you need something really easy to remember, use this URL to load the latest version of SPCSS:

https://unpkg.com/spcss

Why SPCSS?

I often develop primarily text-based websites and webpages. The default style chosen by the web browsers while decent leaves a bit to be desired, so I often add a minimal stylesheet to improve the apperance of the document, hyperlinks, code blocks, blockquotes, tables, etc. This project shares the minimal stylesheet that I often rely on for styling simple websites and webpages.

You are welcome to fork this repository and customize it to maintain your own copy of sp.css with styles that you frequently need.

Features

Here is a summary of the style changes provided by SPCSS:

Support for dark color theme (prefers-color-scheme: dark).
Maximum width for the <body> element to prevent the lines from being too long. Shorter lines make it easier for our eyes to gauge the beginning and end of the lines.
Dark gray (#333) text color instead of black (#000) in light mode.
Increased line-height to add more room around the lines.
More margin above headings to separate them more conspicuously from preceding content.
Less margin below headings as well as less line-height for margins to associate them more tightly with succeeding content.
Support for heading anchor links to facilitate sharing direct links to sections of a page.
Support for special styling of keyboard input (<kbd>) within code blocks (<pre>).
Ensure width of images do not exceed the maximum width for the <body> element.
Simple styling for <figure> and <figcaption> elements such as margins aligned with the margins of text paragraphs, centered captions, reduced font size for captions.
Light gray background for code blocks and blockquotes.
Prevent very long lines of code from overflowing outside the gray box for code blocks. Instead, make the code block scrollable when the code overflows the gray box.
Light borders for table cells.

See this example page for a quick demonstration of some of these features.

License

This is free and open source software. You can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of it, under the terms of the MIT License. See LICENSE.md for details.

This software is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, express or implied. See LICENSE.md for details.

Support

To report bugs, suggest improvements, or ask questions, create issues.

spcss's People

Contributors

Stargazers

Watchers

spcss's Issues

activate GitHub pages

could you activate GitHub's "pages" option in the settings of this repo so github hosts this repo as a web page?
This would make it easy to see how the cp.css looks in action.

Double-Night-Mode issue on Firefox for iOS

When having iOS set to dark mode AND also enabling night mode in Firefox for iOS, the dark mode of SPCSS is broken (the effect is somewhat reversed).

Firefox for iOS: 29.2 (3120)
iOS: 14.2

If you don't have an iDevice, let me know when you have a proposed fix, so I can let you know if it works 👍

height: auto for image

I've dropped sp.min.css into a HTML page with an image and it was badly distorted. The width (original wider than viewport) was reduced, but the height stayed the same, so it was much too high.

Maybe add height:auto; into the img block?

Uneven line-height for superscript and subscript

I believe this could fix the issue:

sup, sub {
  line-height: 1;
}

A way to change mode

Not sure if you know, but it happen to me once, that not every one like dark mode when he have prefers dark mode option. So there should be a way to add darkmode if mode is light and add light when mode is dark by default.

feat: adding colors for selection

https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
Separate color based on color mode

Add max-height cap on image

Setting a max-height on images will put a cap on high-res versions e.g. https://placekitten.com/300/1500. Otherwise, users will face a long scroll of lengthy image in mobile view. This change do not introduce any additional bloated CSS but makes overall user experience streamlined. Another traditional way to handle this would be using a pseudo before/after selector on figure tag, placing a shaded background behind image, setting a fixed max-height|width on image, aligning it vertically and horizontally centered with respect to image tag for linear uniformity. This one will require 4-5 lines of additional CSS, introduces bloat of box model hacks and fine tuning positioning attribute, depending upon if set rules permits.

horizontal scrolling code snippets

Please consider reverting this behavior and instead using a simple line-wrapping strategy. The responsible thing to do would be to allow code to be seen in one glance, without navigating two planes of movement. I'm also willing to discuss a compromise of a smart and unobtrusive line break indicator, perhaps.

If that doesn't sway you, allow me to supply this data point: Horizontal scrolling code snippets are responsible for an 8% increase in rage-related strokes and cardiac events. You don't want that on your conscience, do you?

Why no table style

a table without a simple style looks really dumb. So why not have at least sth as simple as this:

table, th, td {
  border: 1px solid #aaa;
  border-collapse: collapse;
  overflow: auto;
  padding: 2px 5px;
}

(And btw, do you happen to know why firefox does not respect the theme i chose? Its not just with your index.html , its with all. I have chosen the dark theme, though websites still offer me the light verions)