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

ctr

v0.4.1

Published

The CSS Framework

Downloads

26

Readme

ctr /// The CSS Framework

npm npm wercker status David

Description

There are many words/examples you can read in the documentation that detail what, why, and how, but I’ll give a brief overview. ctr is a CSS framework built with JavaScript to provide object oriented functionality to allow for a rich hierarchy of inherited CSS components to better facilitate a CSS architecture similar to OOCSS. Albeit ctr and OOCSS differ vastly in application and you construct your CSS in ctr using true objects which allows for ctr to be constructed in YAML, JavaScript, and Less. Although ctr shares the same goal of OOCSS - encouraging code reuse as well as maintainable CSS styles.

The object oriented architecture of ctr also allows for a rich hierarchy of inherited CSS components so that it’s not required to list each class in your HTML every single time. A functionality that is encompassed through the class feature of ctr. An idea presented by Philip Walton and his article The Future of OOCSS: A Proposal. However, to accomplish this, there has to be a supporting framework, and that is what ctr and all its various features provide.

My favorite feature of ctr is its ability to abstract away the tedium and pain-points from creating complex CSS logic for pseudo-classes such as hover, focus, and active. All you need to do is list the CSS properties and values in the state object, and ctr automatically configures the proper pseudo-class and the corresponding negation CSS pseudo-class (:not()). It also configures the transition-property, transition-duration, transition-delay, and transition-timing-function for all CSS properties. Furthermore, ctr provides similar abstractions for animation, elements such as before and after, as well as media queries, and much much more.

Finally, ctr comes pre-packed with some of the best CSS libraries such as:

Status

As I've outlined over at ctr-lang.com and in the documentation, the code base is extended way past its means. That being said, the hope is that I'll be able to secure funding to embark on a rewrite from the ground up. At the same time, things are pretty solid, so it goes without saying I believe and hope it will be nothing but smooth sailing for you as well.

Bugs & Contributions

I'm on the fence as to how I want to handle bug and contributions, but I'll lay down my current thoughts. I initially had hoped to raise funding for a rewrite but that obviously was wishful thinking, although, not all is lost because the code base is workable up to a point. I'll gladly spend the time fixing bugs if they warrant the time. However, if it's a complex edge case I doubt I will spend the time. So if you think it warrants my time and yours by all accounts, please pull an issue.

Structure

For the time being, all ctr assets reside under this repository, that is the, Stylus plugin, Less plugin, YAML API, and the JavaScript API. Hopefully, the rewrite will materialize, and if that's the case, I'll separate assets out to create a much cleaner structure.

  • /lib -> Allz the magic
    • ctr-stylus.js -> Stylus Plugin Logic
    • ctr-less.js -> Less Plugin Logic
    • ctr-js.js -> Js API class constructor
    • /ctr-js-nodes -> All Js methods for the ctr-js.js class
    • /ctr-js-nodes -> The actual logic behind ctr
  • /dist
    • ctr.styl -> The most important file, which is both embarrassing and impressive in its own right. This Stylus file contains two Stylus Functions that act as a janky templating solution to provide the proper syntactical structure. Along the lines of mustache but for CSS. Removing this file; thus the Stylus dependency is one of the main reasons for the rewrite.
  • __tests__ -> Allz the test, and it has it's own README.md

Best, te