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

sassboilerplate

v0.3.0

Published

A collection of common use Sass stylesheets, mixins and functions.

Downloads

6

Readme

Sass boilerplate

Building a collection of my common use Sass mixins, functions and snippets. All written with SCSS syntax.

NPM

Revision history

  • 2021-05-18 Another update to Retina media query evaluation method.
  • 2017-12-05 Update to Retina media query evaluation method.
  • 2017-03-15 Published initial npm package.
  • 2015-03-24 Major rewrite supporting Sass 3.4.0 and above only, along with dropping of IE8 support and various implementation changes.
  • 2014-10-02 Final release for Sass 3.2.0. Future revisions make strong use of features such as Sass maps and the @error directive. Release has been tagged as final3.2 if anyone is after it.
  • 2013-03-31 Initial release.

Library

resetbase.scss

Provides the following:

  • box-sizing: border-box applied to all elements.
  • CSS "reset" to base page elements.
  • font-size reset so 1em = 10px.
  • The obligatory clearfix.
  • Element hide/off canvas.
  • Text overflow with ellipsis helper.
  • Responsive image helper (images to their maximum width or container, preserving aspect ratio/height).
  • Removal of the tap highlight color from Webkit based browsers on touch enabled devices, proves to be rather annoying at times (applies to iOS/Mobile Safari in particular).

Designed for use with all modern browsers and IE8+. The default background, color and font-family can be overridden via Sass variables:

$resetBase_baseBackground: #000;
$resetBase_baseColor: #fff;
$resetBase_baseFontFamily: Arial,'Helvetica Neue',Helvetica,sans-serif;

@import 'resetbase';

...which would generate:

body,button,input,select,td,textarea,th {
	color: #fff;
	font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;
}

body {
	background: #000;
	font-size: 62.5%;
	line-height: 1;
}

The clearFix, hide, textOverflowEllipsis, responsiveImage and tapHighlightRemove definitions are implemented as Sass placeholders and used with the @extend directive, rather than littering HTML markup with things like class="clearfix" / class="hide":

.myclasswithclearfix {
	@extend %clearFix;
	border: 1px solid #000;
	color: #f00;
}

.mybutton {
	@extend %tapHighlightRemove;
	color: #f00;
	display: inline-block;
	font-weight: bold;
	height: 20px;
}

animationtransition.scss

Mixins for CSS3 animation, @keyframes and transition defintions.

Includes -webkit- vendor prefix (Firefox went prefix free since version 16).

collection.scss

A series of @functions for fetching what I consider collection values, defined within Sass map data types.

Currently for colors, font sizes, spacing (margin/padding/etc.) and z-indexes:

@import 'collection';

$colorMap: (
	blue: #1d90e0,
	grey: #898b8d,
	orange: #da4300
);

$fontSizeMap: (
	base: 1.2em,
	title: 1.3em
);

$spacingMap: (
	base: 20px,
	double: 40px
);

$zIndexMap: (
	base: 1,
	modal: 200,
	ceiling: 1000
);

.firstclass {
	color: color(blue);
	font-size: fontSize();
	margin-left: sp();
	z-index: zIndex(ceiling);
}

.secondclass {
	color: color(orange);
	font-size: fontSize(title);
	margin-left: sp(double);
	z-index: zIndex();
}

.zindexadjust {
	z-index: zIndex(modal,-5);
}

...generating:

.firstclass {
	color: #1d90e0;
	font-size: 1.2em;
	margin-left: 20px;
	z-index: 1000;
}

.secondclass {
	color: #da4300;
	font-size: 1.3em;
	margin-left: 40px;
	z-index: 1;
}

.zindexadjust {
	z-index: 195;
}

Note:

  • Omitting map key argument from fontSize(), sp() and zIndex() will return the first value in each Sass map.
  • Function sp($key[,$multiplier]) optional $multiplier float parameter allows for adjustment of the requested spacing map value.
  • Function zIndex($key[,$shift]) optional $shift integer parameter allows increment/decrement to returned z-index map value.
  • Invalid map keys given to any function will throw a fatal Sass error.

fontface.scss

Cross browser compatible @font-face embedding of webfont files:

  • eot (Internet Explorer)
  • svg (iOS legacy)
  • ttf (Safari, Android, iOS) and;
  • woff (Standards)

Implemented @font-face definition credit to Chris Coyier.

The fontFace() function accepts optional font-style and font-weight arguments - both which default to normal:

@import 'fontface';
@include fontFace('MyFont','font/myfont');

...generating:

@font-face {
	font-family: "MyFont";
	src: url("font/myfont.eot");
	src: url("font/myfont.eot?#iefix") format("embedded-opentype"),
		url("font/myfont.woff") format("woff"),
		url("font/myfont.ttf") format("truetype"),
		url("font/myfont.svg#MyFont") format("svg");
	font-style: normal;
	font-weight: normal;
}

respondwidth.scss

Media query mixins to assist with responsive width page layouts.

Breakpoints are defined in a $respondWidthMap map variable. As an example, how I typically implement using common device breakpoints:

@import 'respondwidth';

// respond breakpoint
// 997px - Infin (960px suggested frame/row width)
// 769px - 996px (732px suggested frame/row width)
// 481px - 768px (444px suggested frame/row width)
// 0px	 - 480px (300px suggested frame/row width)
$respondWidthMap: (
	centi: 996px,
	micro: 768px,
	nano: 480px
);

.pageframe {
	margin: 0 auto;
	width: respondWidthGet(centi,-36px);

	@include respondWidthFrom(centi) {
		padding: 0 50px;
	}

	@include respondWidthFromUpTo(micro,centi) {
		width: respondWidthGet(micro,-36px);
	}

	@include respondWidthFromUpTo(nano,micro) {
		width: respondWidthGet(nano,-36px);
	}

	@include respondWidthUpTo(nano) {
		width: 300px;
	}
}

...generating:

.pageframe {
	margin: 0 auto;
	width: 960px;
}

@media screen and (min-width: 997px) {
	.pageframe {
		padding: 0 50px;
	}
}

@media screen and (min-width: 769px) and (max-width: 996px) {
	.pageframe {
		width: 732px;
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	.pageframe {
		width: 444px;
	}
}

@media screen and (max-width: 480px) {
	.pageframe {
		width: 300px;
	}
}

Note:

  • The generated @media query min-width is deliberately returned 1px greater than the $respondWidthMap map value defined to provide isolation between each breakpoint range.
  • Invalid breakpoint map keys given to any of these functions; or a from breakpoint greater than upTo given to respondWidthFromUpTo() will throw a fatal Sass error.
  • Function respondWidthGet($key[,$shift]) returns the defined width for a given $key, useful for dependent calculations. An optional $shift integer parameter allows for increment/decrement to map value.

retina.scss

Allows for creation of styles (typically images) which are targeted to "retina" high pixel density displays.

Implemented @media query credit to Chris Coyier.

An example using retinaImage():

@import 'retina';
$logoWidth: 200px;

.companylogo {
	background: url(companylogo.png) no-repeat 0 0;
	height: 200px;
	width: $logoWidth;

	@include retinaImage('companylogo2x.png',$logoWidth);
}

...generating:

.companylogo {
	background: url(companylogo.png) no-repeat 0 0;
	height: 200px;
	width: 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (-o-min-device-pixel-ratio: 13/10),
	only screen and (min-resolution: 120dpi) {
	.companylogo {
		background-image: url(companylogo2x.png);
		background-size: 200px;
	}
}

Note:

  • Width argument passed to retinaImage() is optional, defaulting to 100% (background-size: 100%) if not defined.
  • A 100% width is usually suitable if the image is to span the full background width of the element, allowing the browser to determine a scaled height keeping the aspect ratio.
  • Providing a specific width is (typically) only needed for CSS spriting tasks.

Also included is retinaOnly() for arbitrary CSS style blocks:

@import 'retina';

.shinybutton {
	font-weight: bold;
	height: 200px;
	width: 100px;

	@include retinaOnly() {
		// reward for retina is a red border
		border: 1px solid #f00;
	}
}

vendor.scss

Mixins for several CSS properties that (still) require vendor prefixes:

  • backface-visibility($value), providing -webkit- vendor prefix.
  • linear-gradient($angle,$stops), providing -webkit- vendor prefix with alternative (reversed) $angle syntax for to top, to right, etc.
  • transform($value), providing -webkit- and -ms- (required with IE9) prefixes for transform().