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

slush-boilerplum

v1.0.1

Published

A quick 'n' dirty UI sketchpad for proof-of-conceptin', script testin', or just-let-me-tryin'.

Downloads

1

Readme

boilerplum

A quick 'n' dirty UI sketchpad for proof-of-conceptin', script testin', or just-let-me-tryin'.

Boiled plums?

Not really.

Installation

Who needs a solid foundation when you can have a Slush-y one? Boilerplum is a slush generator that creates a small local development environment suited for UI developers low on time and high on ambition.

To get started, you will need to have the following dependencies installed globally on your machine:

If you want to avoid wearing out your Ctrl+F5 keys (or Command+R on Mac), you should set up your favorite browser with the LiveReload extension. If enabled, your local app will refresh the browser automatically when files change as the app is running.

Boiling Plums

Create a new directory and direct a new command/terminal window to that path. Run:

slush boilerplum

Assuming I haven't broken something, this should initialize boilerplum setup. Boilerplum will ask you a few quick questions, work a little magic, and set up a new folder structure within the target folder. Once the folder is set up, install the rest of the project dependencies:

npm install

If you are using jQuery in your project, you will need to install that with Bower:

bower install

After dependencies are installed, you can initialize file watching, live reload, and compilation by running:

gulp serve --watch

from the target folder. Additional build command tasks are set up in the gulpfile of your newly slushed project.

Out of the Box

Boilerplum sets up a default file structure of:

[your target folder]
├──  .sass-cache
├──  src
│    ├──  sass
│    │    ├──  _functions.scss
│    │    ├──  _mixins.scss
│    │    ├──  _normalize.scss
│    │    ├──  _variables.scss
│    │    └──  main.scss
│    ├──  img
│    │    └──  *
│    ├──  index.html
│    ├──  js
│    │    ├──  main.js
│    │    └──  plugins
│    │    │    └── (Javascript dependencies installed via Bower)
├──  node_modules (once dependencies are installed)
│    └── *
├──  .bowerrc (if configured to use jQuery)
├──  .gitignore (if configured to include default git files)
├──  bower.json (if configured to use jQuery)
├──  config.rb
├──  gulpfile.js
├──  package.json
└──  README.md (if configured to include default git files)

Working With Boilerplum

When you run gulp serve --watch in your newly plum-boiled folder, the application will:

  1. Start up a local server to serve up your index.html file
  2. Set a watch on your HTML, Sass, Javascript, and image files that will automatically reload the instance in the browser as files change (if LiveReload extension is installed in your browser)
  3. Initialize Compass compilation of .scss files, including sourcemaps and autoprefixing with the help of Autoprefixer
  4. Browserify your scripts

The output for all processes will be logged in the terminal/command prompt window, and the compiled files will be dumped into a dist folder in the root project directory. Once all initial script processing has completed, you can view your site at http://localhost:3000. If you have LiveReload enabled, you can begin making edits to your src directory and see changes appear in your browser as you edit.

Batteries Not Included (but Sass functions are)

The global.scss file in your css/src folder imports a few partials to help kick off your Sass-y style sheets:

###_functions.scss

  • rem($pixels) - returns the rem equivalent of a pixel measurement

    rem(22) => 1.375rem

  • pem($pixels) - returns the em equivalent of a pixel measurement

    pem(16) => 1em

_mixins.scss

  • linear-gradient($fallback, $direction, $colorstops...) - linear gradient background with solid color fallback support for older browsers

    @include linear-gradient(#fff, to bottom, #fff 0%, #000 100%)

  • keyframes($animation_name) - helper to build out animation with regular and -webkit-prefixed declarations

    @include keyframes(my-animation) {
    	from { color: #fff; }
    	to { color: #000; }
    }
    =>
    @-webkit-keyframes my-animation {
    	from { color: #fff; }
    	to { color: #000; }
    }
    @keyframes my-animation {
    	from { color: #fff; }
    	to { color: #000; }
    }

extends (in _mixins.scss)

See the Sass documentation for more general instructions on using extends.

  • %wai - styles that hide content visually while still making it accessible to screen readers

    @extend %wai => margin: 0; padding: 0; position: absolute; text-indent: -9999em; -webkit-appearance: none; z-index: -1;

###_normalize.scss

HTML default browser style overrides to reduce default cross-browser inconsistencies on HTML elements. Modified from normalize.css.

_variables.scss

Blank file to be used to store breakpoints, colors, and other values that will be commonly reused in your code, such as:

$large_mobile: 500px;
$end_mobile: 800px;
$purple: #4b0062;
$purple_dk: #2f003d;

Ready?

Go forth and make internet!