jgthms / minireset.css

A tiny modern CSS reset

minireset.css

A tiny modern CSS reset that covers the basics:

• resets the font sizes: so that using semantic markup doesn't affect the styling
• resets the block margins: so that the spacing is only applied when you need it
• resets tables: so that tabular data only takes the space it needs
• preserves the inline paddings: so that buttons and inputs keep their default layout
• sets the border-box box sizing: so that borders and paddings don't affect the set dimensions
• sets responsive media elements: so that images and embeds scale with the browser width

Download/Install

Download the latest version

npm install minireset.css

Or clone the repo.

Options

It will be available in your modules directory in /node_modules/minireset.css/:

• minireset.css: CSS rules
• minireset.min.css: minified CSS rules (recommended for production sites)
• minireet.sass: CSS rules written in SASS (recommended for SCSS/SASS projects)
• minireset.css.lit.js: CSS rules exported as a CSSResult object for LitElement projects (recommended for Web Component projects based on LitElement)

CDN

GitHub CDN for minireset.min.css

Copyright and license

Code copyright 2019 Jeremy Thomas. Code released under the MIT license.

minireset.css's Issues

iframe height auto

Not 100% sure it's an issue but when I upgraded Bulma some of the social iframe buttons had too big of an height. See screenshot. If the height: auto is toggled off the Github button returned to its normal height.

Link: https://swiss-element.netlify.com/

Duplicate rules for textarea's margin

Lines 15 and 46 in minireset.css set textarea { margin: 0; } both.

Question about UL and OL

Hey @jgthms, I hope you’re well.

I’m just wondering what the decisioning was for

ul {
  list-style: none;
}

But omitting ol from list-style: none?

Thanks.

*:before, *:after rules glitches MacOS Safari

*:before, *:after {box-sizing: inherit;} is causing some weird behaviour in MacOS Safari's webinspector:

For some reason I can't explain when inspecting the DOM in Safari :before and :after elements keep appearing and disappearing all the time without doing anything.

Considering logical props

That's not a real issue, but what about keeping the reset really modern by using start aka logical props:

minireset.css/minireset.css

Line 80 in 66b8b83

text-align: left;

font-family on form fields

This reset feels like it's definitely missing font-family: inherit on things like form fields.

Add a default background and color on :root?

So I wanted to suggest this because as it turns out, some browsers don't set the body's background to #FFFFFF or its colour to #000000 by default, this can happen on some browser themes or if the user set their own colours.

And this breaks many many websites, but many people who use settings and themes like that blame it on the devs of the website.

Since not a lot of devs are aware of this and yet most people would want to have a reliable background and text colour, maybe it would be a good idea to add

:root {
    background: #FFF;
    color: #000;
}

Since :root has the lowest CSS priority, it should not break anything, most people apply the background on html or body anyway.

I don't wanna debate on if those people are right or wrong to change their default background and text colour, there is also no actual HTML or CSS standards saying browsers should set the background to a certain colour as far as I'm aware, so it's not like they're 100% wrong.

I am not sure if this is in the minimalistic scope of your project, I do feel like it is because it is a very elemental reset that you could argue would help many websites out there. And that, if more people were aware of this, everyone would start their project by resetting the background and text colour.

Trouble linking

Am I an idiot? I'm having trouble linking this like this:

<link rel="stylesheet" href="https://raw.githubusercontent.com/jgthms/minireset.css/master/minireset.css">

But works when I download and import locally. 🙉

[img] display: block

Hey,

how about adding this, to avoid the unwanted, very weird space below images. Or is this issue already covered with something else?

img{
    display: block; /* avoids space at bottom */
}

Block fix

Copying code from Bulma: https://github.com/jgthms/bulma/blob/master/css/bulma.css#L312. Shouldn't minireset.css include a precaution for HTML5 elements for older browsers?

article,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block;
}

Seems like it should be the second rule, beneath

... {
  margin: 0;
  padding: 0;
}

remove overflow-y: scroll from html

On page-filling, no-overflow webpages this leaves a permanent scrollbar on the screen.

Make available via bower

Hey,

can you please make the package available via bower! That would be very awesome, thank you.

add @charset "UTF-8"; ?

add @charset "UTF-8"; ?

[media] - max-width

Hey @jgthms !
First, congrats for the project. Great idea.

About the media's content: how about adding iframe in the responsive declaration?

Something like that:

img,
embed,
object,
audio,
video,
iframe {
  height: auto;
  max-width: 100%;
}

Little fix to do on the README.md

Hi guys,

A letter is missing ;)
minireset.sass instead of minireet.sass

✌️

Add bower support ?

Hello,
It could be great if this library can be loaded using bower

What do you think ?

Minireset conflict with custom styles

minireset.css/minireset.sass

Line 78 in 66b8b83

&:not([align])

I'm using a simple rule:

td
  text-align: center

since the rule in the minireset is more specific, it take precedence over mine.

I can easily solve this by modifing the minireset, but then what is the idea of using the minireset. I could use my own version, but the truth is that I dont even know what does the line that I removed.

This is an issue and a question...

What &:not([align]) does? I couldn't find anything on the web (I mean like, what exactly does?)

Instead .sass try to write .scss, can be more useful

Instead .sass try to write .scss, can be more useful.

And maybe better some mixins like "@include box-sizing(border-box);"