npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

default-beauty.css

v0.9.1

Published

An implicit replacement for browsers' default styling

Downloads

3

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

rudenkorudenko

Keywords

boilerplatenpmmodulenodecss

Readme

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.

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 :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 Kottans

TOC :arrow_double_up: