Subreply CSS is a simple, yet modern and beautiful classless CSS style. It's suitable for both personal blogs and as a bootstrap. It was influenced by the clean social media Subreply. (Hence the name)
- Lightweight - Only weights 4 kB! (original version)
- Mobile responsive and image responsive
- Automatic dark/light theme (based on OS preferences)
- Custom emojis before
mailto:,sms:, andtel:links - Custom blockquotes and code blocks
- Beautiful font (Route 159)
- Fixing missing features from the original Subreply, such as radios and checkboxes
Wanna try it first? Visit the demo or go to my website, which uses Subreply CSS.
You can download the file subreply.css or subreply.min.css, or paste into your website's <head>
this snippet:
<link rel="stylesheet" href="https://cdn.statically.io/gh/HoangTuan110/subreply-css/main/subreply.css">You can also use the minified version in production mode:
<link rel="stylesheet" href="https://cdn.statically.io/gh/HoangTuan110/subreply-css/main/subreply.min.css">Initial release
Changes:
- The
margin: 0; padding: 0;CSS style has been removed to allow for natural rendering - Links (
a) now uses the accent (nice blue) color instead of black to make it unique from texts - Uses the same style for both
input[type="submit"]andbutton - Remove the
float: right;style on buttons andinput[type="submit"]elements, as it's annoying when using in paragraphs. - Add emojis before
mailto:,tel:, andsms:links to differentiate them from normal links - Clean out a bunch of class-based CSS, which is not what we wanted for a classless CSS
- Getting checkboxes to work
- Fixing the problem why the text in checkboxes are under the checkbox
- Removing the hover in
input[type="submit"]andbuttonfor good. - Remove
display: block;for image to avoid awkward displaying - Blockquotes now use background colors as the opposite colors of the text colors for readability
- Add minified version of the style
- Removing
line-heightinbody, input, label, select, textareatag so that text don't override each other - Fixing the width of
inputso that they aren't comically long - Making images responsive (Stolen from Sakura)
- Reduce the size of images so that they doesn't look too big, but are still easily visible
- Making the --regular size look bigger so it doesn't look so tiny on desktop
Copyright 2022-present Dang Hoang Tuan.
Original code by Lucian Marin.
This CSS style is under the MIT license.