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

seq-theme-modern-slide-in

v2.0.0

Published

A minimalist theme for showcasing products

Downloads

14

Vulnerabilities

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

Links

Git

Maintainers

ianlunnianlunn

Keywords

sequencesequencejssequence themesequence.jssequence.js thememodern sliderproduct slider

Readme

Modern Slide In - Sequence.js Theme

A minimalist theme for showcasing products. Images and text become opaque as they slide in. Each pagination link is a preview of a steps product image.

This theme is powered by Sequence.js - The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.

Theme URL: http://sequencejs.com/themes/modern-slide-in/

Author: Ian Lunn - GitHub | Twitter | Email

Getting Started

To add a Sequence.js theme to your web page, complete the following:

  1. Download and unzip your theme
  2. Move the modern-slide-in folder to the same folder as the page you'd like the Sequence.js theme to appear on
  3. Add the theme's stylesheet within the <head></head> tags on your page, below existing stylesheets. For example:
<link rel="stylesheet" href="modern-slide-in/css/sequence-theme.modern-slide-in.css" />
  1. From modern-slide-in/index.html, copy everything inside the <body></body> tags, then paste into the page you'd like the theme to appear on.
  2. From modern-slide-in/index.html, copy any <script></script> elements found toward the bottom of the page and paste just before the closing </body> tag. This should include a reference to the Sequence.js library, its third-party dependencies, and the theme's options, for example:
<script src="modern-slide-in/scripts/imagesloaded.pkgd.min.js"></script>
<script src="modern-slide-in/scripts/hammer.min.js"></script>
<script src="modern-slide-in/scripts/sequence.min.js"></script>
<script src="modern-slide-in/scripts/sequence-theme.modern-slide-in.js"></script>

  1. Save your file and view in the browser. You're done!

  2. Optional: Internet Explorer 8 will show the mobile layout regardless of browser width. If you'd like to fix that, add a reference to respond.js after all references to CSS. This will add media query support to older browsers. For example:

<!--[if lt IE 9]>
  <script src="modern-slide-in/scripts/respond.min.js"></script>
<![endif]-->

Customizing a Theme

To customize how a theme behaves, its Sequence.js options can be changed in modern-slide-in/scripts/sequence-theme.modern-slide-in.js. See Options in the documentation.

To customize how a theme looks and how its step's transition, refer to the theme's stylesheet: modern-slide-in/css/sequence-theme.modern-slide-in.css.

It is recommended to read Setting Up a Theme in the documentation for an overview of how transitions are applied to Sequence.js steps.

Using Grunt.js to Develop a Theme

If you are familiar with Grunt.js, you can use it to automate common development tasks. This however is optional and isn't required for a theme to work.

Sequence.js and the themes it powers use Grunt.js to automate useful tasks. With Grunt.js installed (see Grunt.js' Getting Started), use the following command to install this theme's development dependencies:

npm install

Once development dependencies have installed you can use the commands grunt serve and grunt.

grunt serve

This command will start a development environment with the following automated tasks:

  • Starts a livereload session that will reload your browser whenever a file is changed (be sure to install livereload)
  • Opens your browser and navigates to http://localhost:8000/
  • Sets up a watch task to run the following sub-tasks:
    • Update the version number of the following files when changed in package.json:
      • scripts/sequence-theme.modern-slide-in.js
      • scss/sequence-theme.modern-slide-in.scss
      • css/sequence-theme.modern-slide-in.css
      • bower.json
    • Process any .scss files found in the scss directory, autoprefix them and then copy to css and minify
    • Refresh the browser when any changes are made in HTML, JS, CSS, or SCSS files

You only need to run grunt serve per each development session as the watch task will continue to operate as you modify files.

grunt

The grunt command is a manual version of the watch sub tasks listed for the grunt serve command.

Theme License

This theme is made available under a GPLv3 license.

Copyright © 2015 Ian Lunn Design Limited

Sequence.js License

This theme is powered by Sequence.js. Sequence.js is made available under the following licenses where applicable: