Concisely generate CSS style rules within Javascript. Features:
darken and saturateSlideshow introduction: https://docs.google.com/present/view?id=dfm357b6_49c4d3fpdm&interval=15
Add this line to your application's Gemfile:
gem 'csster'
And then execute:
$ bundle
Or install it yourself as:
$ gem install csster
For Rails, within your application.js, add
//= require csster
npm install csster
All code is packaged into a single Javascript file download, csster.js. There are no external dependencies.
require('csster.js'); // however you manage dependencies
Csster.style({
h1: {
fontSize: 18,
color: 'red'
}
});
The result is inserted in DOM automatically at the bottom of the <head> element:
...
<style type="text/stylesheet">
h1 {
font-size: 18px;
color: red;
}
</style>
</head>
...
Csster.buildCss accepts arrays or hashes of rules and returns a text string of the Css rules.
The caller is responsible for writing to the browser.
The Csster.style method accepts CSS rules passed either as arrays or hashes, arrays just being
a way to order the hashes. For example:
Csster.style({
ul: {
margin: 5,
padding: 0,
},
'ul li:first': {
paddingLeft: '20px'
}
}
Note that
float needs to quoted since it's a reserved word.)opacity, z-index, etc.Csster supports nesting of rules to keep things more concise:
{
ul: {
margin: 5,
li: {
paddingLeft: 20,
'&:hover': {
color: 'red'
}
}
}
}
The "li" property in this case might be a selector or might be a property name. A list of valid property names is used to identify properties right now, and otherwise it's considered a sub-selector.
Csster supports SASS's & operator, to indicate that the selector should be combined with the parent selector.
Instead of the default "any descendent" space character being inserted, no space is inserted.
Combined rules (with commas) are expanded as expected, so nested rules with commas have their parents expanded.
Most manipulations you'll want don't require any special syntax. They will fall into Javascript's language support, as far as any math or looping. Use Javascript to write necessary functions! Include them directly in the CSS rule definitions.
Colors can be particularly brittle in CSS, so color conversion functions are included. The easiest way to enable this is to call:
Csster.colorizeString()
Now the String prototype will include SASS-like color functions:
"#ab342c".darken(%) -- make color darker by given percent"#ab342c".lighten(%) -- make color lighter by given percent"#ab342c".saturate(%) -- make color more saturated by given percent. To desaturate, use negative values for the percent. Note that "#ab342c".saturate(-100) renders in grayscale.There are also color conversion routines if you want to build your own manipulation.
"#ab342c".toRGB()"#ab342c".toHSL()Csster.hslToHexColor(h,s,l)Opacity is currently not supported by the color model.
Although the Javascript language probably offers enough flexibility for most of what you want, macros are also a core part of Csster.
There are a host of pre-made macros that may be useful:
Csster.macros.roundedCorners(radius) -- add rounded corners on all sidesCsster.macros.roundedCorners(side, radius) -- add rounded corners on specified side: 'top', 'left', 'bottom' or 'right'Csster.macros.roundedCorners(corner, radius) -- add rounded corners to a specified corner: 'tl', 'tr', 'bl' or 'br'Csster.macros.imageReplacement(width, height, img, imgXPosition=0, imgYPosition=0) -- phark image replacement with optional background image offset.Csster.macros.boxShadow([xoffset, yoffset], radius, color)Csster.macros.verticalCentering(height) and horizontalCentering(width) -- center using the top 50% / margin-top -width/2 technique. See http://stackoverflow.com/questions/148251/css-centering-tricksCsster.macros.clearfix() -- standard clearfixCsster.browserInfo() -- basic information about the current browser, if available. Useful for generating alternative rules.To "mix these in", use the has, mixin or mixins key:
{
'div#featured_box': {
backgroundColor: '#394c89',
has: roundedCorner(5)
}
}
Multiple macros can be included by making that a list, eg. has: [roundedCorners(5), dropShadow()].
You can also make these pseudo properties using the Csster.setMacro method. For example,
Csster.setMacro('roundedCorners', (px) => {
return { borderRadius: px }
})
As you might expect, this defines a property that is rendered with the given function. Therefore:
...
Csster.style({ div: roundedCorners: 5 })
It's all Javascript, so macros and more complex functions are easy to write. To mix in a set of values, create a function that returns a hash of values, for example:
function roundedCorners(radius) {
return {
'-webkit-border-radius': radius,
'-moz-border-radius': radius,
'border-radius': radius
}
}
A macro's properties will be overwritten similar to how the cascade takes the last defined value: later ones override earlier ones.
By default, property names are validated against recent HTML specs.
The build-in tool rejects non-standard property names,
although by default popular "-moz" and "-webkit" properties are added.
Use Csster.addPropertyNames to supplement property names it might not
consider valid.
At this time of history, though, validation is not necessarily what you want. To turn this off, use:
Csster.propertyNameValidator.setConfig('strictNames', false)
By default, any browser extension property (such as -moz-boo) is allowed. To
restrict this, turn on the validation:
Csster.propertyNameValidator.setConfig('anyBrowserExtension', false)
If jQuery is loaded before Csster, it provides a "csster" plugin:
$('.sidebar').csster({ border: '5px solid green', padding: 10 });
As expected, this adds a rule to the document with the ".sidebar" selector.
In general, this can be called identically to the css() function.
This is useful is the DOM on the page is dynamic and when a rule is more efficient than applying
a style repeatedly to all the DOM nodes.
There are a few limitations: Currently a "context" is not supported. And be careful, since not all jQuery selectors are valid CSS selectors-- nothing is done to convert or report unsupported selectors (just like regular CSS).
Function that outputs a set of rules into the DOM is Csster.insertCss and can be replaced if desired.
Csster.browser to call Csster.browserInfo(), which returns the same thing.has: macro implementations to mixin:.git checkout -b my-new-feature)git commit -am 'Add some feature')git push origin my-new-feature)If you like this and would like me to do more intereactions like this, send me an email... or money https://venmo.com/ndpsoft or https://www.gofundme.com/ndp-software
bin/build.sh#2 VERSION= code.bin/build.shrake buildgit checkin...git push...rake release # Ruby Gemnpm publish # Node moduleThe design was driven by the specs.
There are now two sets of tests. The first are unit and out-of-browser functional tests run with jasmine. If your npm paths are set up correctly, jasmine should do it.
There's also an (older) in-browser test, in demo/functional_runner.html. Opening this in a browser should do it.
Finally, there are a couple manual "demo" files that need to be examined in a browser, to make sure they are working. These are in the demo folder.
./bin/build.sh
This project comes from my frustration of trying to build standalone Javascript widgets. Web projects always involve the combination of HTML DOM, CSS and Javascript. It's often simpler to generate the necessary DOM within your Javascript, removing any coupling (and a simpler calling convention) to a specific web page. But most widgets have certain style rules. To avoid any coupling with the CSS at all, styles can be included inline, but these gets bulky and hard to read. The "rule" nature of CSS is nice. So widgets then have a Javascript and CSS component. Wouldn't it be nice, though, to remove that CSS component.
With the advent of SASS, the coupling is even more complicated, as now there's some other tool completely unrelated to your component, written in some other language. Wouldn't a unified approach be nice?
Copyright (c) 2010-2020 Andrew J. Peterson Apache License
FAQs
Csster: Write CSS in JS or Coffeescript, with macros, color math, etc.
We found that csster demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Our redesigned Repositories page adds alert severity, filtering, and tabs for faster triage and clearer insights across all your projects.
Security News
Slopsquatting is a new supply chain threat where AI-assisted code generators recommend hallucinated packages that attackers register and weaponize.
Security News
Multiple deserialization flaws in PyTorch Lightning could allow remote code execution when loading untrusted model files, affecting versions up to 2.4.0.