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

table-baseline.css

v2.1.0

Published

A good start for styling your tables

Downloads

10

Readme

table-baseline.css

A good start to your table styles that covers most of the challenges and a few edge cases

License Downloads

NPM

npm install --save table-baseline.css

Download https://raw.githubusercontent.com/paceaux/table-baseline/master/src/baseline.table.css

What does it do?

It gives you a good start

Built on the typography-baseline foundations, it gives you a good, small set of styles for tables to work with

Gives you a "no-design" design

For those times where you need just a bit more than a Normalize, but way less than Bootstrap, this gets your tables there.

This is a fairly unopinionated approach to making sure that tables look like tables

Browser Support

  • Firefox
  • Chrome
  • Edge
  • Safari
  • Opera

Usage

While this is relatively unopinionated, there are a few "opinions" to consider:

  • em for for font-size
  • a unitless line-height
  • rem for left/right spacing
  • text-spacing based on the golden ratio (.618 / 1.618)

Fitting it into a CSS architecture

This would come after a reset / normalize and and after your set baseline styles. If you're a fan of ITCSS, this is in the Elements layer.

Modifying without Swearing or Heavy Drinking

One of the really annoying things about other CSS frameworks (cough cough Bootstrap) is that you mostly have to write new CSS to overwrite the existing styles. Often that means raising specificity, which is really stinking annoying. This is designed to avoid that by using CSS Variables

The table baseline sets most of the CSS variables on the table. As CSS variables are subject to the cascade, you can override any variable at any time by changing its value on the relevant selector. You can import this into your current CSS setup, and overwrite all the variables by setting new ones whereever makes sense.

All of the variables are prefixed with table so that they can't collide with any other css variables you may have.

They also inherit values from the typography-baseline. But if you choose not to use it, that's totally fine! They all have default values.

So if you want the --tablePrimaryBgColor to be different, you can write the following in your own stylesheet:

table.myClass {
    --tablePrimaryBgColor: #c0ffee;
}

No raising specificity. Just changing a variable.

If you want to theme the header of the table, or even a particular widget, it's just:

.myClass thead {
    --tableAlternatingBgColor: #c0ffee;
}

Colors

All of the colors variables are abstractions from the color palette. This is so you can change these colors without having to touch your neutral palette.

    --tableBaseTextColor: var(--colorNeutralDarker);
    --tableBodyPrimaryBgColor: transparent;
    --tableBodyAlternatingBgColor: rgba(165,165,165, .3);

    --tablePrimaryBgColor: var(--tableBodyPrimaryBgColor);
    --tableAlternatingBgColor: var(--tableBodyAlternatingBgColor);

Line Heights

The --baseLineHeight is applied to body copy, and the --smallLineHeight is used on titles:

    --tableBaseLineHeight: var(--smallLineHeight, 1.2);
    --tableSmallLineHeight: 1;

Text Sizes

You have a minimum of 6 text sizes in two categories: --table<n>TextSize and --table<n>TitleSize. You have a "base" and then superlatives or diminutives to describe the deviation from that base. e.g.:

    --tableBiggestTextSize: var(--biggerTextSize, 1.2em);
    --tableBiggerTextSize: var(--bigTextSize, 1.1em);
    --tableBaseTextSize: var(--smallTextSize, .8em);
    --tableSmallerTextSize: var(--smallerTextSize, .75em);
    --tableSmallestTextSize: var(--smallerTextSize, .618em);

You may notice that title sizes overlap with base text sizes. This is intentional! You have the flexibility to have your smaller headings be the same as larger text, or to create new title sizes for your headings that won't overlap with the text.

    --tableBiggestTitleSize: var(--baseTitleSize, 1.5em);
    --tableBiggerTitleSize: var(--biggestTextSize, 1.3em);
    --tableBaseTitleSize: var(--tableBiggestTextSize);
    --tableSmallerTitleSize: var(--tableBiggerTextSize);
    --tableSmallestTitleSize: var(--tableBaseTextSize);

Variables Set Per Section

The tbody, tfoot, and thead all rely on a few key variables:

  • --tableCellSize
  • --tableHeaderSize
  • --borderWidth
  • --tablePrimaryBgColor
  • --tableAlternatingBgColor

The <th> and <td> elements use these variables for their presentation. This is so that you can theme each section of the table without having to raise specificity. You could just add this in a later stylesheet:

thead {
    --tablePrimaryBgColor: orange;
}

Font families

You have two font families to choose from.

    --tableBaseFontFamily: var(--baseFontFamily,  'Georgia','Times New Roman', 'serif');
    --tableTitleFontFamily: var(--titleFontFamily, 'Helvetica', 'Arial', 'sans-serif');

Conventions and Standards

Style guide

The CSS follows the guidelines established here.

Naming Conventions

CSS Variable names follow a convention established here.