Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leo-henrique/leo-reset.css
CSS reset with the goal of resetting the default styles set by browsers, but maintaining some and totally beneficial styling standards.
https://github.com/leo-henrique/leo-reset.css
css3 reset-css scss
Last synced: about 1 month ago
JSON representation
CSS reset with the goal of resetting the default styles set by browsers, but maintaining some and totally beneficial styling standards.
- Host: GitHub
- URL: https://github.com/leo-henrique/leo-reset.css
- Owner: Leo-Henrique
- License: mit
- Created: 2022-11-15T13:08:15.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-24T19:34:39.000Z (almost 2 years ago)
- Last Synced: 2024-11-07T04:07:47.072Z (about 2 months ago)
- Topics: css3, reset-css, scss
- Language: SCSS
- Homepage: https://github.com/Leo-Henrique/leo-reset.css#-get-started
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# leo-reset.css
**⚠️ Warning**
This readme was written primarily with Google Translate. I'll be happy if you make an exception for any grammatical errors!
## 🔎 Introduction
`leo-reset.css` it's a CSS reset with the goal of resetting the default styles set by browsers, but maintaining some rarely insignificant and totally beneficial styling standards.
This reset is for anyone who prefers to define all styles from scratch and use modern practices that make styling easier.
### 💡 Inspiration
This CSS Reset was inspired by **meyerweb reset**, created by [Eric A. Meyer](https://meyerweb.com/eric/), whose author's code can be found [on this page of his website](https://meyerweb.com/eric/tools/css/reset/).
## 🚀 Get Started
This repository is distributed with the [npm package manager](https://www.npmjs.com/). Perform the [Installation of Node.js](https://nodejs.org/pt-br/) which already has npm as default package manager.
If you prefer not to use NPM, use the package via CDN as shown below.
### Installation
```bash
npm i leo-reset.css
```
### Use
You may prefer to use leo-reset.css through HTML or through CSS. In all cases, always include leo-reset.css before other stylesheets.
#### Use with HTML
Through NPM:
```html
```
Through CDN:
```html
```
#### Use with CSS
Through NPM:
```css
@import "/node_modules/leo-reset.css/dist/leo-reset.css"
layer(leo-reset.css);
```
Through CDN:
```css
@import url("https://cdn.jsdelivr.net/npm/leo-reset.css/dist/leo-reset.css")
layer(leo-reset.css);
```
[layer()](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) is just to create a new cascade layer to identify the styles applied by leo-reset.css. **You must [delete it in production](https://caniuse.com/?search=%40import%20layer)**.
## 💻 Features
You can mainly refer to the following file to see the main features with proper explanation of leo-reset.css:
`scss/lib/_patterns.scss`
## 🔗 Useful links
Here are links to the main styles applied in the *_patterns.scss* file:
* property *touch-action*
* [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#manipulation)
* [Can I Use](https://caniuse.com/?search=touch-action)
* property *-webkit-tap-highlight-color*
* [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color)
* [Can I Use](https://caniuse.com/?search=appearance)
* property *appearance*
* [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)
* [Can I Use](https://caniuse.com/?search=tap-highlight-color)
* property *text-decoration-skip-ink*
* [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink)
* [Can I Use](https://caniuse.com/?search=text-decoration-skip-ink)
* [Bootstrap breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/#max-width)
* [zoom in fields on safari browser for mobile](https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/)