- Building quick web page/app prototype?
- Want to see anything more pleasant than default browser styling from the very first page load?
- A beginner focused more on HTML?
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).
Tastes best with normalize.css
and with
a font of your choice
to improve default typography readability.
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
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">
Feel free changing whatever you like.
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
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> is a
flex box
with flex-flow: row.
Every its direct child is assigned a margin-right.
If you like this project, please, give it a ⭐ 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
Check project issues.
Any suggestions or bugs? Please, check notes on contribution.
This project wouldn't have ever happened without
%3D-Kottans-lightgrey.svg){kind=icon}