66

Override default browser styles

 5 years ago
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.

mUjyeyN.png!web

Check live demo .

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:

  1. NPM: npm install --save normalize.css && npm install --save default-beauty.css or yarn add normalize.css && yarn add default-beauty.css
  2. Use a CDN of your choice to include normalize.css and default-beauty.css
  3. 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:

  1. Download default-beauty.css or fork this project
  2. Replace every var(--...) with a relevant value from :root section
  3. 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:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK