Override default browser styles
source link: https://www.tuicool.com/articles/hit/ANNBRjZ
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
default-beauty.css
If anything above is what you would tick then this project will be of use for you.
The idea behind is to beautify a bit default styles whenever you just cannot (or just do not want to) pay much efforts to styling yet.
Not really beautiful but rather anything you might live with for a while.
Note that index.html contains no style or element class definitions (with exception of pre-formatted block contents).
Table of Contents
Installation
Tastes best with normalize.css
and with a font of your choice to improve default typography readability.
Installation options
Use either of the methods:
- NPM:
npm install --save normalize.css && npm install --save default-beauty.css
oryarn add normalize.css && yarn add default-beauty.css
- Use a CDN of your choice to include normalize.css and default-beauty.css
- Download latest releases of normalize.css and default-beauty.css
Fonts
You may find the following snippet sufficient to start with. Just add it to your web page's <head>
to have a bit better typography right off.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Overpass%20Mono"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css">
TOC :arrow_double_up:
Special features
Feel free changing whatever you like.
CSS3 variables
default-beauty.css
employs CSS variables (more on MDN ) with a somewhat not a 100% browser support and therefore may not pass strict validation .
Should you face any issues with it, please let me know .
Quick fix:
- Download
default-beauty.css
or fork this project - Replace every
var(--...)
with a relevant value from:root
section - Remove variable definitions from
:root
section
Page <header>
and <footer>
Just add <header> and <footer> elements to have distinctive styling of your page header and footer.
Both <header>
and <footer>
are flex boxes with flex-flow: row
.
Last element in the <footer>
(and first as well if it is the only element in the <footer>
) floats to the right. If this not what you want remove margin-left: auto;
rule from footer > *:last-child
ruleset.
<nav>
element
<nav>
is a flex box with flex-flow: row
.
Every its direct child is assigned a margin-right
.
TOC :arrow_double_up:
Credits to the project
If you like this project, please, give it a :star:️ on github and/or add the following somewhere in the bottom of your beautified page.
<p><small> Styled with <a href="https://github.com/necolas/normalize.css" target="_blank"> normalize.css <i class="fab fa-github-square"></i> </a> and <a href="https://github.com/OleksiyRudenko/default-beauty.css" target="_blank"> <i class="fas fa-heart"></i> Default-Beauty.css <i class="fab fa-github-square"></i> </a> </small></p>
It will look like this (but beautified): Styled with normalize.css and Default-Beauty.css
TOC :arrow_double_up:
TODO
Check project issues .
Any suggestions or bugs? Please, check notes on contribution .
TOC :arrow_double_up:
Credits
This project wouldn't have ever happened without
TOC :arrow_double_up:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK