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

wi-library

v1.2.20

Published

This CSS library is meant to be used in conjunction with [Compassion.com's Site MVP CSS](https://www.compassion.com/css/site-mvp.css)

Downloads

65

Vulnerabilities

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

Links

Git

Maintainers

jhodgesjhodges

Keywords

Readme

W&I Library

This CSS library is meant to be used in conjunction with Compassion.com's Site MVP CSS

NOTE: As of update 1.2.0, elements and component stylings have been removed. Going forward, this library will be only used for grid and utilities.

Table of Contents

Settings

Settings are used throughout the library to populate color, grid, spacing, display and alignments options.

Breakpoints

The library comes with 6 distinct breakpoints. These breakpoints are used throughout the project for other tools, objects, components and utilities.

| Breakpoint | REM | PX | |------------|---------|--------| | xs | 22.5rem | 360px | | sm | 32.5rem | 520px | | md | 45rem | 720px | | lg | 62.5rem | 1000px | | xl | 80rem | 1280px | | xxl | 100rem | 1600px |

Breakpoints are used as a modifier for other stylings. For instance, you may want to have an element show a different text color on mobile opposed to the desktop version. To do this, you would add the breakpoint modifier to the class.

<div class="text-white text-md-black"></div>

The above markup would show white text for devices under the md breakpoint width, but black text for devicdes over the md breakpoint width.

Colors

Below is a list of commonly used colors in the library that are used to transform backgrounds, typography and other color-related attributes.

| | name | hex | |------------------------------------|-----------|-----------| | #000000 | black | #000000 | | #005eb8 | blue | #005eb8 | | #F1F9FF | blue100 | #F1F9FF | | #D1E4F2 | blue200 | #D1E4F2 | | #4BA3E4 | blue500 | #4BA3E4 | | #00386d | blue900 | #00386d | | #20556B | dark-teal | #20556B | | #FFB500 | gold | #FFB500 | | #425563 | gray | #425563 | | #f9f9f9 | gray100 | #f9f9f9 | | #CCCCCC | gray200 | #D8D8D8 | | #D8D8D8 | gray300 | #CCCCCC | | #798894 | gray500 | #798894 | | #425563 | gray700 | #425563 | | #2F2F2F | gray900 | #2F2F2F | | #88BE6D | green | #88BE6D | | #C13E2D | red | #C13E2D | | #0086BF | teal | #0086BF | | #FFFFFF | white | #FFFFFF | | #ffd100 | yellow | #ffd100 |

Grid

Container

The container object is used to "contain" content within a bounds, and provide a gutters for the content.

<div class="container">
	...
</div>

This object has varients based on the breakpoint widths.

<!-- XL container-->
<div class="container-xl">
	...
</div>

<!-- LG container -->
<div class="container-lg">
	...
</div>

Row

This object is a flex container, intended for use in conjunction with the Container and Column objects.

<div class="row">
	...
</div>

Column

This object adds right and left gutters, while flexing to certain percantages of a base 12 grid.

<div class="row">
	<!-- Full width -->
	<div class="col-12">
		...
	</div>
</div>

The column can be adjusted based on particualr breakpoints. (See breakpoints)

<div class="row">
	<!-- Full width, then 4/12 width at medium viewport -->
	<div class="col-12 col-md-4">
		...
	</div>

	<!-- Full width, then 8/12 width at medium viewport -->
	<div class="col-12 col-md-8">
		...
	</div>
</div>

Utilities

Aspect Ratios

If you need an element to fit a certain aspect ratio, this is the utility for you. The class is formatted as such: aspect-{ratio}.

| Name | Ratio | |------------|---------------------------------------| | sqaure | 1:1 | | standard | 4:3 | | wide | 16:9 | | letterbox | 2.35:1 | | responsive | Conforms to size of parent container. |

<div class="aspect-square">
  <img src="{src}" alt="A sqaure image" />
</div>

<div class="aspect-wide aspect-md-responsive">
  <img src="{src}" alt="An image that is responsive above the md breakpoint and 16:9 below it." >
</div>

Background Colors

You can apply a background color to an element by giving it a class of bg-{colorName}.

<div class="bg-gray"><!--CONTENT HERE --></div>

The above markup would produce a <div> with a gray background. (See colors)

You may also set a background color to transparent by using the class name bg-transparent.

This can be modified by adding the breakpoint modifier to the class name. bg-md-gray would give a gray background to the element only at or above the md breakpoint. (See breakpoints)

This utility is able to be modified on hover of an element:

<div class="bg-blue hover:bg-blue900">Blue background that turns to dark blue on hover.</div>

Borders

Border Widths

You can apply a border color to an element by giving it a class of b-w-{borderWidth}.

<div class="b-w-1"></div>

| name | value | |------|-------------| | 0 | border: 0 | | 1 | border: 1px | | 2 | border: 2px | | 3 | border: 4px | | 4 | border: 8px |

You can also select a certain side of the element to apply the border styling:

<div class="b-w-t-2"></div>

| side | value | |------|--------------------| | t | border-top: ### | | r | border-right: ### | | b | border-bottom: ### | | l | border-left: ### |

Border Colors

You can apply a border color to an element by giving it a class of b-c-{colorName}.

<div class="b-w-1 b-c-gray"></div>

The above markup would produce a <div> with a gray border color. (See colors)

Border Styles

This applies a border style to the element by giving it a class of b-s-{style}.

<div class="b-s-solid"></div>

| style | |--------| | none | | dotted | | dashed | | solid | | double |

Rounded

<div class="rounded-1"></div>

Will set a rounded edge for the element.

| name | value | |--------|-----------------------| | none | border-radius: 0 | | 1 | border-radius: .25rem | | 2 | border-radius: .5rem | | 3 | border-radius: 1rem | | 4 | border-radius: 2rem | | circle | border-radius: 50% |

Box Shadow

<div class="box-shadow-1"></div>

You can affect the box shadow property of an element by choosing an option below:

| name | value | |------|----------------------------------------| | none | box-shadow: none | | 1 | box-shadow: 0 3px 6px rgba(0,0,0,.15) | | 2 | box-shadow: 0 3px 12px rgba(0,0,0,.15) | | 3 | box-shadow: 0 3px 25px rgba(0,0,0,.15) |

Display

<!-- A link displayed as a block -->
<a class="d-block">Link</a>

You can modify the display property of an element by using on the following options:

| name | description | |----------------|----------------------------------| | d-none | sets the display to none | | d-block | sets the display to block | | d-flex | sets the display to flex | | d-grid | sets the display to grid | | d-inline | sets the display to inline | | d-inline-block | sets the display to inline-block | | d-inline-flex | sets the display to inline-flex | | d-table-cell | sets the display to table-cell | | d-table-row | sets the display to table-row |

<div class="d-none d-lg-block">Woot woot</div>

The above markup would be hidden for viewports below lg, but displayed as black for lg viewports and above.

Flex

Flex options can be modified.

Align Items

<div class="row align-items-center">
  <!-- FLEXED CONTENT -->
</div>

| name | description | |------------------------|--------------------------------------------| | align-items-center | align items of flex container to center | | align-items-flex-start | align items of flex container to beginning | | align-items-flex-end | align-items of felx container to end |

Align Self

<div class="row">
  <div class="col-12 align-self-center"></div>
</div>

| name | description | |-----------------------|-------------------------| | align-self-center | align self to center | | align-self-flex-start | align self to beginning | | align-self-flex-end | align self to end |

Flex Property

<div class="d-flex">
  <div class="flex-1">Flexed 1</div>
  <div class="flex-none">Flexed none</div>
</div>

| name | description | |-----------|-----------------------------------------| | flex-1 | Sets the flex attribute to 1 | | flex-full | Sets the flex to none and width to 100% | | flex-auto | Sets the flex attribute to auto | | flex-none | Sets the flex attribute to none |

Justify Content

<div class="row justify-content-center">
  <!-- FLEXED CONTENT -->
</div>

| name | description | |----------------------------|------------------------------------------------| | justify-content-center | justify content of flex container to center | | justify-content-flex-start | justify content of flex container to beginning | | justify-content-flex-end | justify content of felx container to end |

Order

<div class="row">
  <!-- order-1 will be shown second -->
  <div class="col-6 order-1"></div>
  <!-- order-0 will be shown first -->
  <div class="col-6 order-0"></div>
</div>

The order of a flex container can be modified.

| name | description | |------|------------------------| | 0 | order will be set to 0 | | 1 | order will be set to 1 | | 2 | order will be set to 2 | | 3 | order will be set to 3 | | 4 | order will be set to 4 | | 5 | order will be set to 5 |

Wrap

<div class="flex-nowrap"><!-- FLEX WILL NOT WRAP --></div>

| name | description | |--------|---------------------------------------| | nowrap | items in flex box will not wrap | | wrap | items in flex box will wrap (default) |

Grid

Grid Template Columns

Sets the number of columns in the grid.

<div class="d-grid grid-cols-2">
  <div>Column width of 50%</div>
  <div>Column width of 50%</div>
</div>

| name | description | |--------|-------------| | 1 | 100% | | 2 | 50% | | 3 | 33.333% | | 4 | 25% | | 5 | 20% |

Grid Gap

Sets the gap between columns and rows.

<div class="d-grid grid-gap-2">
  <div>Gap of 1rem</div>
  <div>Gap of 1rem</div>
</div>

<div class="d-grid grid-cols-2 grid-gap-x-2">
  <div>Left and right gap of 1rem</div>
  <div>Left and right gap of 1rem</div>
</div>

<div class="d-grid grid-gap-y-2">
  <div>Bottom and top gap of 1rem</div>
  <div>Bottom and top gap of 1rem</div>
</div>

| name | description | |------|-------------| | 0 | 0rem | | 1 | .5rem | | 2 | 1rem | | 3 | 1.5rem | | 4 | 2rem | | 5 | 5rem |

Object

Set the object-fit and object-position attributes.

Object Fit

<img class="object-fit-cover" />

| name | description | |---------|---------------------------------------| | contain | Image is contained within the bounds. | | cover | Image covers the bounds. | | fill | Image fills the bounds. |

Object Position

Set the object-position attribute.

<img class="object-position-center" />

| name | desciption | |---------------|---------------------------------------------------| | center | image is at center | | center-top | image is at horizontal center and vertical top | | center-bottom | image is at horizontal center and veritcal bottom | | left | image is at left | | left-center | image is at horizontal left and vertical center | | left-top | image is at horizontal left and veritcal top | | left-bottom | image is at horizontal left and vertical bottom | | right | image is at right | | right-center | image is at horizontal right and vertical center | | right-top | image is at horizontal right and vertical top | | right-bottom | image is at horizontal right and vertical bottom |

Overflow

Set the oveflow property of an element.

<div class="overflow-auto"></div>

| name | description | |--------|--------------------------------------| | auto | sets the overflow property to auto | | hidden | sets the overflow property to hidden |

Position

Set the positioning property of the element.

<div class="position-absolute"></div>

| name | |----------| | static | | asbolute | | fixed | | relative | | sticky | | inherit |

You can also adjust the top, left, right and bottom properties.

<div class="position-absolute top-0"></div>
<div class="position-absolute bottom-0"></div>
<div class="position-absolute left-0"></div>
<div class="position-absolute right-0"></div>

| name | value | |-------|---------| | n8 | -5rem | | n7 | -4rem | | n6 | -3rem | | n5 | -2rem | | n4 | -1rem | | n3 | -.75rem | | n2 | -.5rem | | n1 | -.25rem | | 0 | 0rem | | 1 | .25rem | | 2 | .5rem | | 3 | .75rem | | 4 | 1rem | | 5 | 2rem | | 6 | 3rem | | 7 | 4rem | | 8 | 5rem |

Spacing

Set padding and margins for an element.

Spacing Axis

| name | description | |------|----------------| | t | top | | b | bottom | | tb | top and bottom | | r | right | | l | left | | rl | right and left |

Spacing Units

| name | value | |------|--------| | 0 | 0rem | | 1 | .25rem | | 2 | .5rem | | 3 | .75rem | | 4 | 1rem | | 5 | 2rem | | 6 | 3rem | | 7 | 4rem | | 8 | 5rem |

Margin

<div class="m-2">
  <!-- ALL MARGIN AXIS ARE SET TO SPACING UNIT 2 -->
</div>
<div class="m-rl-2">
  <!-- MARGIN RIGHT AND LEFT SET TO SPACING UNIT 2 -->
</div>

You can also set margin to negative by adding an n modifier to the spacing unit number.

<div class="m-rl-n2">
  <!-- MARGIN RIGHT AND LEFT SET TO NEGATIVE SPACING UNIT 2 -->
</div>

Padding

<div class="p-rl-n2">
  <!-- PADDING RIGHT AND LEFT SET TO NEGATIVE SPACING UNIT 2 -->
</div>

Gutter

Gutter is the space between columns and the row.

| name | description | |------|---------------------------------------------------------------------------| | 0 | row margin left and right of 0, column paddding left/right 0 | | 1 | row margin left and right of -0.5rem, column padding left/right of 0.5rem | | 2 | row margin left and right of -1rem, column padding left/right of 1rem | | 3 | row margin left and right of -1.5rem, column padding left/right of 1.5rem | | 4 | row margin left and right of -2rem, column padding left/right of 2rem |

Text

Font Family

Use this utility to update the element's font family attribute.

| name | description | |-------|-----------------------------------------| | sans | The theme's sans serif font, Montserrat | | serif | The theme's serif font, Centruy |

Text Alignment

| name | description | |-------------|---------------------| | text-left | text aligned left | | text-center | text aligned center | | text-right | text aligned right |

Text Color

See color variables above for a complete list of colors.

<div class="text-blue">Blue text goes here.</div>

This utility is able to be modified on hover of an element with the hover: utility:

<div class="text-blue hover:text-blue900">Blue text that turns to dark blue on hover goes here.</div>

Text Decoration

| name | description | |-------------------|----------------------| | text-line-through | line through word | | text-none | no text decoraitions | | text-underline | underline word |

This utility is able to be modified on hover of an element:

<div class="text-none hover:text-underline">Text with no underline has an underline on hover</div>

Text Line Heights

| name | value | |--------------------|-------| | text-line-height-1 | 1em | | text-line-height-2 | 1.3em | | text-line-height-3 | 1.8em |

Font Sizes

| name | value | |-----------|---------| | text-1 | .875rem | | text-2 | 1rem | | text-3 | 1.25rem | | text-4 | 1.5rem | | text-5 | 1.75rem | | text-6 | 2rem | | text-7 | 2.5rem | | text-8 | 3rem | | text-9 | 4rem | | text-10 | 5rem |

Font Weights

| name | value | |----------------|------------------| | text-lighter | font-weight: 400 | | text-normal | font-weight: 500 | | text-bold | font-weight: 700 | | text-400 | font-weight: 400 | | text-500 | font-weight: 500 | | text-700 | font-weight: 700 |

Widths

You can adjust the width of an element with the class of w-{width}.

| name | value | |--------|-------------| | auto | width: auto | | 25 | 25% | | 50 | 50% | | 75 | 75% | | 100 | 100% | | 100px | 100px | | 250px | 250px | | 500px | 500px | | 750px | 750px | | 1000px | 1000px |

Z-Index

You can use a .z-{index} utliity class to adjust the z-index of the element.

| value | |-------| | 0 | | 1 | | 10 | | 20 | | 30 | | 40 | | 50 |

<div class="z-0">z-index of 0</div>
<div class="z-10">z-index of 10</div>