Giter Club home page Giter Club logo

reseter.css's Introduction


The Modern CSS Reset πŸš€

πŸ€“ Benefits

  • No need to start from scratch. Gardevoir doesn't remove all the browser styles, but instead redefines the useful ones
  • Never find yourself fixing browser issues. Includes browser fixes for a wide range of browsers.
  • No need debugging load time for Gardevoir. It's sized ~0.8kb. 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-sizing: 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 Gardevoir

Browser Inconsistencies

πŸ†š There are other resets, why Gardevoir?

Feature Gardevoir Normalize.css Sanitize.css Reset.css
Normalizations βœ… βœ… βœ… ❌
Basic elemental styles βœ… Partial βœ… ❌
Size (by bundle phobia) Compile with Sass GitHub file size in bytes GitHub file size in bytes GitHub file size in bytes
Minified version Compile with Sass ❌ (Minify yourself) ❌(Minify yourself) ❌(Minify yourself)
Box sizing βœ… ❌ βœ… ❌
Browser support Customizable Last 3 versions Last 3 versions Unknown

πŸš€ Get It Running Quick

  1. Create A HTML File

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

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

  4. How about reading a guide for best performance? Here's the link to optimizing Gardevoir for production

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

  6. πŸ₯³ All Set Now

🌟 Installation

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

πŸ“¦ Package Managers

πŸ’ NPM Npm Downloads Npm Downloads

npm install gardevoir

🐱Yarn Yarn Downloads Npm Downloads

yarn add gardevoir

⚑ CDN CDN Hits CDN Hits

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

✨ Usage

Gardevoir 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/gardevoir.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 Gardevoir Else Your Custom Styles Might Not Be Implemented

πŸš… Optimize

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

  • Never import Gardevoir 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/gardevoir" />
  • Use this easy loading trick to make your life a lot easier

    <link
      rel="preload"
      as="style"
      href="https://cdn.jsdelivr.net/npm/gardevoir"
      onload="this.rel='stylesheet';this.onload=null"
    />
    
    <noscript>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
    </noscript>

❀ Thanks to our supporters

GitHub Stargazers

reseter.css's People

Contributors

abhijithganesh avatar allcontributors[bot] avatar code-factor avatar deepmalamittal avatar dependabot[bot] avatar fayazpn avatar gouravmohanty7070 avatar higby avatar himanshu007-creator avatar imgbot[bot] avatar imgbotapp avatar kkrishguptaa avatar panquesito7 avatar pratikramteke avatar renovate[bot] avatar verma-kunal avatar viclop1597 avatar vixietsq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

reseter.css's Issues

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

Broken Links

Links broke due to the transfer to the org

GitHub issue templates and pr templates are broken since they no longer connect to krishdevdb/.github

Request: Detail Comments Explaining The Code

Detail Comments In The Source Explaining The Code

Checklist:

  • Add Comments
  • No Notice Like /*! reseter.css v1.1.1 | MIT License | github.com/krishdevdb/reseter.css */`
  • Comments Available In All Sources.
    • SASS
    • LESS
    • SCSS
    • Stylus
  • Changes Are Made In The Comments Branch and merged in a single pull request.
  • Reference Of All The Code In A Separate Web Page/Blog. Maybe At https://krishdevdb.github.io/reseter.css

Resource

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

[Feat]: Roll Out v2.0.0 as the changes promised are already made

Detailed Description

Roll Out v2.0.0 as the changes promised are already made, we can continue the docs simultaneously as docs won't be shipped to the package

Contributing

  • I have read the project's contribution guidelines.

Code of Conduct

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

Anything else?

No response

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Vulnerabilities

Renovate has not found any CVEs on osv.dev.

Detected dependencies

github-actions
.github/workflows/release.yml
  • actions/checkout v4@692973e3d937129bcbf40652eb9f2f61becf3332
  • actions/setup-node v4@1e60f620b9541d16bece96c5465dc8ee9832be0b
npm
package.json
  • @semantic-release/changelog 6.0.3
  • @semantic-release/commit-analyzer 13.0.0
  • @semantic-release/git 10.0.1
  • @semantic-release/github 10.1.6
  • @semantic-release/npm 12.0.1
  • @semantic-release/release-notes-generator 14.0.1
  • autoprefixer 10.4.20
  • brotli-size 4.0.0
  • bundlewatch 0.4.0
  • clean-css-cli 5.6.3
  • postcss 8.4.41
  • postcss-cli 11.0.0
  • sass 1.77.8
  • semantic-release 24.1.0

  • Check this box to trigger a request for Renovate to run again on this repository

Request:

Is your feature request related to a problem? Please describe.
I like the idea to reseter to have a consistent UI throughout all the browsers. I tried the mentioned demo in the readme.md and it loads the UI better but still it varies in the different browsers. I have tried with

  1. Chrome
  2. Microsoft edge
  3. Firefox

You can refer the attached screenshot for details.
image

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

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?

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.

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

[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

  • I have read the project's contribution guidelines.

Code of Conduct

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

Anything else?

No response

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

Documentation link broken in the About section

Hey @krishdevdb πŸ‘‹πŸ½ This docs link is broken in the about section of this repository, please do fix it.

Also, I was looking at this project and you all have maintained it well. Pretty good!! Keep it up folks πŸ”₯

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.

Gather Issues!

A humble request to everyone reading this. I request you to kindly, check out other CSS resets and normalizers. Find some issues or bugs in them using the bug tracker. Then repost it to this repository. Make sure to link to the actual issue, of the repo where you found it.

For example, #19 and #16 are taken from @starkana in sindresorhus/modern-normalize#46 and @Gaboris at necolas/normalize.css#851 respectively.

Thanks! Please Mention This Issue In Your Issue So That Everyone Reading This Page Will Get To Know What All Issues Have Been Made!

Bug: Several separate words we combines into one β€” but shouldn’t

Describe the bug
Please see screenshots

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://krishdevdb.github.io/reseter.css/
  2. Read the entire page, and you will see several separate words we combine into one β€” but shouldn’t.

Screenshots
If applicable, add screenshots to help explain your problem.
image
image
image
image
image
image

Desktop (please complete the following information):

  • OS: [Windows 10 Pro build 19042.928]
  • Browser [Firefox Developer Edition]
  • Version [89.0b3]

Additional context
Is it a bug specific to GitHub Pages?

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.