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.cssoryarn 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.cssor fork this project - Replace every
var(--...)with a relevant value from:rootsection - Remove variable definitions from
:rootsection
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
-
77
Vim Yaml Syntax file from http://www.vim.org/scripts/script.php?script_id=739 Yaml files in vim 7.4 are really slow, due to core yaml syntax. This sy...
-
71
Details (Whiteboard: [design-decision-denied])
-
41
Big important edit to set the record straight This blog post got reposted on reddit with the title "Compiz effects are coming back to GNOME-Shell". That is not what is happening here at all. Don't expect any of this stuff to make it into any upc...
-
45
Why a Default Method Cannot Override an Object’s Methods? [Snippet] DZone's Guide to Why a Default Method Cannot Override an Object’s Methods? [Snippet] Wan...
-
8
There are a variety of “buttons” in HTML. You’ve got: <button>Button</button> <input type="button" value="Button"> Plus, for better or worse, people like having links that are style...
-
9
Collaborator frivoal commented
-
4
Technical Articles
-
7
Should CSS Override Default Browser Styles? CSS overrides can change the default look of almost anything: You can use CSS to over...
-
7
Custom Maven Plugin: Override default build lifecycle How to create a custom Maven plugin which overrides default build lifecycle I have created another example to dem...
-
7
How to Override Default Options in Neovim2022-12-02Nvim189 words 1 min read 9 times readA very common confusion for new use...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK