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

clay-css

v2.24.3

Published

Liferay's web implementation of the Lexicon Design Language

Downloads

8,083

Readme

Jump to Section

About

Clay is Liferay's web implementation of the Lexicon Design Language. It is built with HTML, CSS, and Javascript with Bootstrap as a foundation.

You can view the various components on the Clay site.

Building

If you would like to contribute, or make changes on your system you need to do the following:

Clone the repo

Clone the repo to your computer

Install Node.js (v4.6.0 LTS) and NPM

If you don't already have it installed. You can find more info here: http://nodejs.org/ Node and NPM come bundled together, so you only need to install one package.

Install the NPM modules

Run npm install inside of the packages/clay-css directory

Modify files in src/

The files are generated from the src/ directory, however, most of the files you'd be interested in changing are in src/content/. Files can be either HTML (.html) or Markdown (.md). Every file in src/content/ has a heading at the top in YAML format that looks something like:

---
title: Title of the Page
---

This section has a couple of options that can be leveraged for different purposes. Those will be covered below.

Build the static files

Run gulp build to generate the static files.

View the files

The generated files are placed into the build/ directory. Sass files in the .scss format are generated to CSS, Markdown files with the extension of .md are generated to HTML, and HTML files have one bit of processing applied, which is that HTML inside of triple ticks is escaped, like so:

```
<div>Foo</div>
```

File Heading Options

There are a couple of properties you can add to the headings of files, only one of which is required:

title:: (Required) This is used for the title of the page in the heading and in the navigation sidebar

navIndex:: The navigation is sorted alphabetically by default, but if you pass a navIndex: property, it will manually sort the item into that position. The property is any number, with 0 as the first position, but you can also pass in a keyword of last to force an item to the end.

section:: If you want to group multiple files into sections, in each of those files, pass the same title to the section: property. That title will be used for the section heading, and the files will be sorted in there. The navIndex: property works inside of sections as well.

Available Build Tasks

You can pass these options when running gulp.

build: This is the default task, so running just gulp will fire off the build task. This will generate all of the HTML/CSS/etc into the build/ directory.

watch: Because running a script after every change can get tedious, run gulp watch to rebuild the files automatically as you change files.

serve: Starts a local server on port 3000 and also runs the watch task.

Updating Bootstrap Version and Dependencies

Bootstrap can be updated or downgraded by using the command:

npm install --save-dev --save-exact bootstrap@the_version

Popper.js can be updated or downgraded by using:

npm install --save-dev --save-exact popper.js@the_version

Then run gulp build or gulp-serve to compile Clay CSS with the new version