Skip to content

Latest commit

 

History

History
164 lines (119 loc) · 5.95 KB

README.md

File metadata and controls

164 lines (119 loc) · 5.95 KB
Raw

default-beauty.css

MIT Licensed CSS Variables

  • 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.

default-beauty

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 ⏫

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 ⏫

Credits to the project

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

TOC ⏫

TODO

Check project issues.

Any suggestions or bugs? Please, check notes on contribution.

TOC ⏫

Credits

This project wouldn't have ever happened without Kottans

TOC ⏫