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

@odopod/odo-sassplate

v2.0.1

Published

Delete-key friendly SCSS boilerplate.

Downloads

16

Readme

Odo Sassplate

Delete-key friendly SCSS boilerplate.

Install

  1. Install the package.
npm install @odopod/odo-sassplate --save
  1. Copy styles.scss to your scss directory in your project (probably somewhere like src/css/).
  2. Change all the @imports to reference the files in node_modules, similar to how normalize.css is used.
  3. Install the node-sass-json-importer and integrate it into your build.
npm install node-sass-json-importer --save-dev

At this point, you should be able to compile your SCSS without any issues.

Setup

  1. You will want your own project variables, typography, and ui components, so copy extensions/variables.json, extensions/type-definitions.json, and extensions/component-definitions.json into your source CSS.
  2. Copy the _imports.scss file from Sassplate into your source CSS.
  3. Edit your new _imports.scss to make sure the @import paths are correct.
  4. Update the path for _imports.scss in your new styles.scss to reference the new file.
  5. Make a change in one of the .json files and recompile your CSS. You should see the change.

Customization

To make changes to styles from the Sassplate, you can add styles which override the existing ones, or replace the .scss file with your own copy.

All variables in extensions/_variables.scss are declared with !default, meaning it will assign the variable if it is not already assigned. This allows you to overwrite the variables without duplicating the file.

Mixins

Sassplate adds mixins as well. For details and method signatures, check out _mixins.scss. Here's a list of them:

  • breakpoint
  • breakpoints
  • augment-hit-area
  • keep-aspect
  • aspect
  • no-aspect
  • fill-parent
  • reset-fill-parent
  • clearfix
  • text-overflow
  • font-smooth
  • layer-promote
  • background-cover
  • size
  • table-center-wrap
  • table-center

Writing CSS with JSON

The basic structure for each json file looks like this:

{
  "scss-variable-name": {
    "Group Name in Style Guide": {
      "selector": {
        "property": "value"
      }
    }
  }
}

The above JSON would generate the following CSS:

.selector {
  property: value;
}

Special Properties

Some properties are treated differently than others.

Numeric Properties

Properties which expect a length (like width, padding-top, etc.) will append px if the unit is left off.

Color Properties

Properties which expect a color (like color, border-color, etc.) will use the get-color function to find the color you have defined in variables.json colors property.

Element States

For focus, hover, and active states, supply a new object with those styles:

"btn": {
  "focus": {
    "outline-color": "blue"
  },
  "hover": {
    "color": "white",
    "background-color": "blue"
  },
  "active": {
    "background-color": "mediumseagreen"
  }
}
.btn:focus {
  outline-color: #1b9ec6;
}

.btn:hover {
  color: white;
  background-color: #1b9ec6;
}

.btn:active {
  background-color: mediumseagreen;
}

docs-demo

To display a demo of your component in Odo Style Guide, use the docs-demo property.

"btn": {
  "docs-demo": {
    "demo-markup": "'<button class=\"btn\">Sign In</button>'",
    "dark-background": true
  }
}

Other boolean options you may add to docs-demo are text-center, dark-background, or light-background.

breakpoints

To style the selector at breakpoints, add the breakpoints property.

"type-title-1": {
  "font-size": 30,

  "breakpoints": {
    "sm": {
      "font-size": 40
    },
    "md": {
      "font-size": 50
    }
  }
}
.type-title-1 {
  font-size: 30px;
}

@media (min-width: 768px) {
  .type-title-1 {
    font-size: 40px;
  }
}

@media (min-width: 1024px) {
  .type-title-1 {
    font-size: 50px;
  }
}

children

Target children of the current selector with children. Notice the selector is wrapped in single quotes so that it remains a valid string when converted to SCSS.

"btn": {
  "children": {
    "'.btn__text'": {
      "display": "inline-block",
      "vertical-align": "middle"
    }
  }
}
.btn .btn__text {
  display: inline-block;
  vertical-align: middle;
}

qualifiers

Qualifiers are for overriding properties based on a class on the element.

"btn": {
  "qualifiers": {
    "en": {
      "line-height": 1.5,
    },
    "zh": {
      "color": "mediumseagreen"
    }
  }
}
.en .btn {
  line-height: 1.5;
}

.zh .btn {
  color: mediumseagreen;
}

modifiers

Modifiers are variants of a class, with only a few attributes that are different. For example, a .btn with an icon in it might need styles applied to the icon within it.

"btn": {
  "color": "blue",

  "modifiers": {

    "icon": {
      "padding-right": 12,

      "children": {
        "'.icon'": {
          "margin-right": 8
        }
      }
    }
  }
}
.btn {
  color: #1b9ec6;
}

.btn--icon {
  padding-right: 12px;
}

.btn--icon .icon {
  margin-right: 8px;
}

raw

Allow any selector to be appended to the main selector.

"btn": {
  "raw": {
    "'::after'": {
      "content": "'Sassplate'"
    }
  }
}
.btn::after {
  content: "Sassplate";
}

Documentation

Visit the Odo component directory for demos, code examples, and documentation.