🚿 A modern CSS reset

Related tags

CSS css reset ress
Overview

A brunch and the ress name

Modern CSS reset

Build Status Size npm

Installation

npm install --save ress

or

bower install --save ress

Features

  1. Apply box-sizing: border-box; in all elements.
  2. Reset padding and margin in all elements.
  3. Specify background-repeat: no-repeat in all elements and pseudo elements.
  4. Inherit text-decoration and vertical-align to ::before and ::after.
  5. Remove the outline when hovering in all browsers.
  6. Specify font-family: monospace in code elements.
  7. Reset border-radius in input elements.
  8. Specify font inheritance of form elements.
  9. Remove the default button styling in all browsers.
  10. Specify textarea resizability to vertical.
  11. Apply cursor: pointer to button elements.
  12. Apply tab-size: 4 in html.
  13. Style select like a standard input.
  14. Style cursor by aria attributes.
  15. Hide content from screens but not screenreaders.

Crossbrowser

ress uses Normalize.css under the hood with some customizations to apply a solid base to start your stylesheet.

Browser support

Inherit from Normalize

CDN

unpkg

https://unpkg.com/ress/dist/ress.min.css

RawGit

# Production
https://cdn.rawgit.com/filipelinhares/ress/master/dist/ress.min.css

# Development
https://rawgit.com/filipelinhares/ress/master/dist/ress.min.css

License

MIT Β© Filipe Linhares

Comments
  • Apply cursor: pointer to button elements

    Apply cursor: pointer to button elements

    It has always bugged me that buttons don't default to the pointer cursor. An implementation that excludes the "disabled" attribute would make sense.

    button {
    cursor: pointer;
}

button:disabled {
    cursor: default;
}
    feature request 
    opened by matchai 10
  • Weird looking radio buttons in Safari Mobile

    Weird looking radio buttons in Safari Mobile

    I think this is because of:

    button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
}

    and

    input {
  border-radius: 0;
}

    Should we add :not([type=checkbox]):not([type=radio]) to those?

    feedback wanted 
    opened by masylum 5
  • Remove form elements' focus outline

    Remove form elements' focus outline

    This removes outlines around focused form elements, which is not consistently applied across all browsers. Most notably, Chrome recently rolled out an update which adds large outlines around focused form elements.

    See also https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

    feature request feedback wanted 
    opened by jakobw 3
  • Button color

    Button color

    The button style adds a "color: inherit" property, which adds complexity to style the button

    /* Apply cursor pointer to button elements */
button,
[type='button'],
[type='reset'],
[type='submit'],
[role='button'] {
  cursor: pointer;
  color: inherit;
}
    request in review 
    opened by jeanmatthieud 2
  • Input content multiline

    Input content multiline

    Hi, I've noticed that the property word-break: break-word is behaving differently in different browsers. In particular, the content of an input tag, if too long, will break on multiple lines in Safari but not in Chrome.

    Since the default value is word-break: normal I would suggest changing this. Let me know. Thanks

    opened by matteobad 2
  • button:active color property is not reset

    button:active color property is not reset

    button:active color property is not reset. This is problematic in Safari which uses

    input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::-webkit-file-upload-button:active, button:active {
  color: activebuttontext;
}

    where activebuttontext is code for white.

    opened by AndrewPrifer 2
  • [disabled] rule is defined too soon

    [disabled] rule is defined too soon 

    /* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

    This rule is overridden by the button rule that sets the cursor to pointer.

    Solution: define the rule later in the CSS.

    opened by Mikk36 1
  • Change out rawgit links to jsDelivr

    Change out rawgit links to jsDelivr

    opened by gregoryhammond 1
  • border-style on iframe elements

    border-style on iframe elements

    Hi @filipelinhares,

    I noticed that iframe on chrome (didn't test other browsers) have the following:

    border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;

    I was thinking that maybe we could add a border-style: none to align default styling. What do you think? Is this in the scope of this library?

    Thank you in advance 😁

    request in review 
    opened by matteobad 1
  • Avoid `cursor: default` when `aria-disabled=

    Avoid `cursor: default` when `aria-disabled="false"`

    Before fix

    • <a href="" aria-disabled="false"> => default cursor
    • <a href="" aria-disabled="true"> => default cursor

    After fix

    • <a href="" aria-disabled="false"> => pointer cursor
    • <a href="" aria-disabled="true"> => default cursor
    opened by yassh 1
  • Bump ini from 1.3.5 to 1.3.8

    Bump ini from 1.3.5 to 1.3.8

    Bumps ini from 1.3.5 to 1.3.8.

    Commits
    • a2c5da8 1.3.8
    • af5c6bb Do not use Object.create(null)
    • 8b648a1 don't test where our devdeps don't even work
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
Owner
● filipe
empathy is important
● filipe
GitHub https://ress-css.surge.sh
A bare-bones CSS reset for modern web development.

A modern CSS reset A tiny little reset that you can use as the basis of your CSS projects. You can read a breakdown of it here. Installation NPM: npm

Andy Bell 2.7k Jan 1, 2023
🚿 A modern CSS reset

Modern CSS reset Installation npm install --save ress or bower install --save ress Features Apply box-sizing: border-box; in all elements. Reset paddi

● filipe 1.9k Jan 4, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
A classless CSS framework to write modern websites using only HTML.

new.css new.css A classless CSS framework to write modern websites using only HTML. It weighs 4.8kb. All it does is set some sensible defaults and sty

null 3.6k Jan 3, 2023
A modern alternative to CSS resets

normalize.css A modern alternative to CSS resets NPM npm install --save normalize.css CDN See https://yarnpkg.com/en/package/normalize.css Download Se

Nicolas Gallagher 49.4k Jan 5, 2023
A modern alternative to CSS resets

A modern alternative to CSS resets

Nicolas Gallagher 49.4k Jan 1, 2023
A modern, responsive CSS boilerplate library to kickstart any web-based project.

Peacock CSS Peacock is a modern, responsive CSS boilerplate library to kickstart any web-based project. It is simple, lightweight and it contains all

Binary Birds 8 Jan 23, 2022
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight β€’ Accessible β€’ Customisable β€’ Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
Modern framework to print the web correctly.                                               

Modern framework to print web pages correctly How to use Simply include the right stylesheet(s) in your html and load it only for a printer. Gutenberg

Fabien Salathe 4.6k Dec 29, 2022
A modern static resume template and theme. Powered by Jekyll and GitHub pages.

modern-resume-theme A modern simple static resume template and theme. Powered by Jekyll and GitHub pages. Host your own resume on GitHub for free! Vie

James Grant 1.5k Dec 31, 2022