Reseter.css - A Futuristic Alternative To Normalize.css And CSS Resets

  • By Reseter.css
  • Last update: Dec 26, 2022
  • Comments: 15


Reseter.css

A Futuristic Alternative to Normalize.css and CSS Resets
Twitter URL

WebsiteRequest a FeatureReport a Bug

馃 Benefits

  • No need to start from scratch. Reseter.css doesn't remove all the browser styles, but instead redefines the useful ones
  • Never switch technologies. sass, less, scss, stylus, and styled-components support available.
  • Never find yourself fixing browser issues. Includes browser fixes for a wide range of browsers.
  • No need debugging load time for Reseter.css. It's sized ~0.7kb. Moreover, we are consistently trying to reduce it.
  • Get all the benefits of normalize.css. It includes all normalizations!
  • Get a better box sizing for a better experience. box-sing: border-box set
  • Completely production ready code with browser support testing and source build ci

Why do I use a css reset

There are many inconsistencies between browsers. Like Firefox 3 has a margin on top of paragraphs but Internet Explorer 7 doesn't have any margin. There are thousands of browsers with hundreds of versions. Each version at least has 500+ inconsistencies with different browsers' different versions. How to keep up? This is an easy to use solution called reseter.css

Browser Inconsistencies

馃啔 There are other resets, why reseter.css?

Feature Reseter.css Normalize.css Sanitize.css Reset.css
Normalizations
Basic elemental styles Partial
Size (by bundle phobia) GitHub file size in bytes GitHub file size in bytes GitHub file size in bytes GitHub file size in bytes
Minified version npm bundle size (Minify yourself) (Minify yourself) (Minify yourself)
GZIP version npm bundle size (Compress yourself) (Compress yourself) (Compress yourself)
Box sizing
Browser support Customizable Last 3 versions Last 3 versions Unknown

馃殌 Get It Running Quick

  1. You can find some templates for a faster experience in the templates section down below

  2. Create A HTML File

    <!DOCTYPE html>
    <html>
      <head>
        <title>Reseter.css Quick Start</title>
      </head>
      <body>
          <h1>Reseter.css Quick Start</h1>
          <p>Hey fella! Don't forget to change the title text an remove this paragraph and the heading</p>
      </body>
    </html>
  3. Call Reseter.css

    <!-- To be placed in the head tag -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />
  4. Star this repository, if you like the project! It means a lot to the development team, Those stars a boosting happiness for our team

  5. How about reading a guide for best performance? Here's the link to optimizing reseter.css for production

  6. Lastly you can view our wiki for best practices and performance guides

  7. 馃コ All Set Now

馃摎 Quick Templates

馃専 Installation

There are various ways to install reseter.css. Like package managers, content delivery networks, local copies...

馃摝 Package Managers

馃挐 NPM Npm Downloads

npm install reseter.css

馃惐 Yarn Yarn Downloads

yarn add reseter.css

CDN CDN Hits

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css" />

Usage

Reseter.css as said, is a zero-dependency project and excels in integrating with all kinds of usage options! These are a few easy guides for people to start

<head>
  <link rel="stylesheet" type="text/css" href="path/to/reseter.min.css" />
  <link
    rel="stylesheet"
    type="text/css"
    href="path/to/your-custom-stylesheet.css"
  />
</head>

Warning!

Make Sure To Link Your Custom Stylesheet After Reseter.css Else Your Custom Styles Might Not Be Implemented

More

馃殔 Optimize

Note all of these guidelines are for static websites, frameworks like react have their own guide (please refer them)

  • Never import reseter.css via css, though this a option, it is not recommended for website loading, rather use html link tags

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css">
  • Use this easy loading trick to make your life a lot easier

    <link rel="preload" as="style" href="https://cdn.jsdelivr.net/npm/reseter.css" onload="this.rel='stylesheet';this.onload=null">
    
    <noscript>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reseter.css">
    </noscript>
  • Find more at our wiki

馃摓 We're Ready To Support

Road Map

  • Comment Blocks In The Sources

  • Long Documentation

  • Guide

All of these items are moved to the Benefits section once done

Thanks to our supporters

GitHub Stargazers

Github

https://github.com/krishdevdb/reseter.css

Comments(15)

  • 1

    Request: Support Old Tags

    Is your feature request related to a problem? Please describe. Support tags like acronym

    Describe the solution you'd like Use abbr, acronym instead of abbr.

  • 2

    font-family for pre/code

    FYI, using the following, from my own list, and integrated the one in the repository.

    pre,
    code,
    kbd,
    samp {
      font-family: "Fira Code", 
        "Cascadia Code", 
        Consolas, 
        "Inconsolata",
        Monaco,
        Menlo,
        "Noto Mono",
        "Roboto Mono",
        "Droid Sans Mono", 
        "Ubuntu Mono",
        "Ubuntu Monospace",
        "Source Code Pro", 
        "Oxygen Mono",
        "Liberation Mono", 
        "DejaVu Sans Mono", 
        "Bitstream Vera Sans Mono", 
        monospace,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
      font-size: 1.04rem;
    }
    

    The developer fonts above represent some of the more common fonts, all of which will render/display better than the default which is often a Courier derivative. The above fonts list are all sans-serif developer fonts with an aesthetic which will at least be closer to the default font family.

    Reason on the ordering...

    • Fira Code - the most complete font in terms of fixed width with width-proper emojii support.
    • Cascadia Code - Windows (newer)
    • Consolas - Windows (common)
    • Inconsolata - Consolas look-alike, open-source.
    • Droid Sans Mono - Android
    • Monaco - MacOS
    • Menlo - iOS
    • others - more common alternative fonts installed on different platforms
    • monospace - Default fallback
    • *Emoji - emoji character supprt as fallback
  • 3

    Update reseter.css

    Thank you for contributing! Please confirm this pull request meets the following requirements:

    Which change are you proposing?

    • [ ] Adding A New Element's Reset
    • [x] Editing A Old Element's Reset
    • [ ] Removing A Elements's Reset

    Write Something About It Here works on the opacity of placeholder in input. (pseudoelement)


    My PR Meets The Following Criterias:

    • [x] It Redifines Usefull Defaults (If you are doing it for h1 you redifine the font size to be big enough)
    • [x] My Content Is Responsive If Applicable (If you are defining any px values please convert them to rem for responsiveness)
    • [x] My Content Is Tested. That It Doesn't Breaks The Element
    • [x] My Content Is Not My Personal Opinion
    • [ ] I have used the command yarn *:build

    I've added the following sources:

    • [ ] less
    • [ ] scss
    • [ ] sass
    • [ ] stylus

    Fixes #16 Check #16

  • 4

    Docs: Reseter.css Web Site Display Bug

    Describe the bug Under the Tweet and GitHub star buttons display bug

    To Reproduce Steps to reproduce the behavior:

    1. Go to https://krishdevdb.github.io/reseter.css/
    2. See bug

    Expected behavior Not display bug

    Screenshots Screen Shot 2021-04-13 at 12 16 24 Screen Shot 2021-04-13 at 12 16 32

    Desktop (please complete the following information):

    • OS: macOS Catalina ver 10.15.7
    • Browser: Chrome
    • Version: Version 89.0.4389.114 (Official Build) (x86_64)

    Additional context Is it a bug specific to GitHub Pages?

  • 5

    [Feat]: paragraph spacing

    Detailed Description

    Don't have time for a PR at the moment, appended to my local copy, but probably a good idea to add..

    p + p {
      margin-top: 1rem;
    }
    

    Contributing

    • [X] I have read the project's contribution guidelines.

    Code of Conduct

    • [X] I agree to follow this project's Code of Conduct

    Anything else?

    No response

  • 6

    Word Break inconsistency between Chrome and Firefox

    Is your feature request related to a problem? Please describe. Chrome doesn't wrap its links at all while Firefox does. Chrome uses a different default value for word-break then Firefox as after adding word-break: break-word; on its links it behaved the same way as Firefox did. I also saw that similar questions have come up before and they were put aside because of "unexpected behaviors", but this seems like a special case as it to only happens with the tag so it could be an exception.

    Describe the solution you'd like

    a {
      cursor: pointer;
      color: #3333e1;
      background-color: transparent;
      text-decoration: none;
      word-break: normal;
    }
    

    Additional context Originally Opened By @Gaboris at necolas/normalize.css#851 Plus, Original Solution By @VixieTSQ in necolas/normalize.css#852

  • 7

    docs: add krishdevdb as a contributor

  • 8

    Bug: Linguistic Issue and referential issue in the readme.md

    Describe the bug Going through the 'Why do I use a CSS Reset' part, I noticed that there is a Firefox browser referenced in the table, but instead of the firefox heading, the heading says 'with Resetter.css'.

    Also, on the first line of this section, instead of using 'Down is the result', which could be misleading as the status of the website, 'Below is the result' can be used.

    To Reproduce Steps to reproduce the behaviour:

    1. Go to the ReadMe.md page.
    2. Go to section 'Why do I use a CSS Reset'
    3. See the error

    Expected behaviour The table heading should say Firefox, instead of 'with Resetter.css'

    Screenshots image

    Desktop (please complete the following information):

    • NA

    Smartphone (please complete the following information):

    • NA

    Additional context Add any other context about the problem here.

  • 9

    Placeholder opacity in FireFox

    Is your feature request related to a problem? Please describe. FireFox (latest version as of posting) has a slightly lower opacity for input placeholders. See my screenshot below. You fix this with:

    I suggest adding it to reseter.css.

    Describe the solution you'd like Fix The Issue By Adding input::placeholder { opacity: 1; } to reseter.css

    Additional context screeshot

    Originally Publish By @starkana in sindresorhus/modern-normalize#46

  • 10

    Request: Downgrade node requirement unless you really need it

    Is your feature request related to a problem? Please describe. We are using the LTS version of Node which is not supported by this package.

    Describe the solution you'd like Downgrade the required Node version to the latest LTS.

    Describe alternatives you've considered Upgrading to a non-LTS version is not possible on the project I'm currently working, so not much that can be done here.

    Additional context Screenshot 2021-04-08 at 20 31 59

  • 11

    showcase.png Image not showing

    @krishdevdb

    showcase image needs to be fixed 
    
    • There seems to be some issue with Image
    • and there is no space after the mark sign I think It will look better if it's fixed

    Screenshot_1

  • 12

    chore(deps-dev): bump postcss-cli from 9.0.2 to 10.1.0

    Bumps postcss-cli from 9.0.2 to 10.1.0.

    Changelog

    Sourced from postcss-cli's changelog.

    10.1.0 / 2022-11-29

    • Allow running --watch mode in non-TTY contexts, like Docker (#448)
    • Update dependencies

    10.0.0 / 2022-06-29

    • BREAKING: Drop Node 12 support (#438)
    • Add support for ESM config files (#437)

    9.1.0 / 2021-12-10

    • Don't write to files if they're unchanged (#320, #417)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • 13

    From normalize: Line-height should be 1.5 to comply the WCAG guideline

    Original issue in Normalize: https://github.com/necolas/normalize.css/issues/864

    Particularly the bit about Turkish characters is interesting.

    The guideline in question: https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

    Currently using 1.15 in this repo (https://github.com/resetercss/reseter.css/blob/main/css/reseter.css#L10)

  • 14

    Adding colours to the documentation website for better experience.

    Screenshot (66)

    I liked the documentation a lot. Could you add some colourful shades so that the docs become a bit easy to read? I tried changing the color temporarily, which looked better.

  • 15

    Bug: incorrect selector for disabled buttons

    Noticed an issue where the pointer style is being applied to buttons even though they are disabled. Here is the current code that provides this styling.

    [type='button']:not(disabled),
    [type='reset']:not(disabled),
    [type='submit']:not(disabled),
    button:not(disabled) {
      cursor: pointer;
    }
    

    I believe that to proper select disabled buttons we have to do it this way:

    [type='button']:not([disabled]),
    [type='reset']:not([disabled]),
    [type='submit']:not([disabled]),
    button:not([disabled]) {
      cursor: pointer;
    }
    

    However, can we not just utilize the :enabled selector?