csster 1.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d82632c37cb32738b8993eef7fb7ff350729ffef
+  data.tar.gz: 87ca49392d6e8be6387fc41777a4ea8ca0f25ae4
+SHA512:
+  metadata.gz: 61b42ab7e1b06a81deebe3730b055f7d573e3af3fb68f868c5113e37b89213414d00379569bd96d482ce5d10001746f13135c2beb8842f287ce87775170dd312
+  data.tar.gz: 0f5f3577b761eda7720e3c20929c41cd3434da334722136f172c742eaea7024b66bbab5d17bcc50f73842648196c2ec26bc61fe45da5006ef54b52ca58e65f3c

data/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

data/README.md

@@ -0,0 +1,305 @@
+# Csster
+
+<a href="https://travis-ci.org/ndp/csster" id="status-image-popup" title="build status image" name="status-images" class="open-popup">
+            <img src="https://travis-ci.org/ndp/csster.svg" >
+          </a>
+          
+Concisely generate CSS style rules within Javascript.  Features:
+
+* standard "object literal"/JSON format with good editor support
+* nesting to DRY up stylesheets
+* color functions like <code>darken</code> and <code>saturate</code>
+* built-in macros for common CSS idioms like *clearfix*, *rounded corners*, *drop shadows*.
+* extension points for custom behavior or cross-browser support.
+* and all the plain old Javascript behavior: functions, data structures, looping, Math operations, etc.
+
+Slideshow introduction: https://docs.google.com/present/view?id=dfm357b6_49c4d3fpdm&interval=15
+
+## Usage
+
+### Bundler (Rails) Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'csster'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install csster
+    
+Within your `application.js`, add 
+
+    //= require csster
+
+
+### Node NPM Install
+
+    npm install csster
+
+### Creating Stylesheets (Brower/Client Side)
+
+All code is packaged into a single Javascript file download, [csster.js](http://ndpsoftware.com/csster/csster.js). There are no external dependencies.
+
+```javascript
+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 &lt;head&gt; element:
+
+```html
+...
+&lt;style type="text/stylesheet"&gt;
+h1 {
+font-size: 18px;
+color: red;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+...
+```
+
+### Format of CSS Rules
+
+The *style* method accepts CSS rules passed either as arrays or hashes, arrays just being
+a way to order the hashes. For example:
+
+<pre>
+{
+    ul: {
+      margin: 5,
+      padding: 0,
+    }
+    'ul li:first': {
+      paddingLeft: 20px
+    }
+}
+</pre>
+
+Note that
+
+* property names are automatically converted to hyphenated format from camelcase, so in many cases you can omit the quotation marks. ('float' needs to quoted since it's a reserved word.)
+* all raw numbers are assumed to be "pixels" (or "px"), and rendered as such.
+* any sort of selectors are allowed... they are just passed through to the stylesheet.
+
+#### Nesting
+Csster supports nesting of rules to keep things more concise:
+<pre>
+{
+    ul: {
+      margin: 5,
+      li: {
+        paddingLeft: 20,
+        '&:hover': {
+          color: 'red'
+        }
+      }
+    }
+}
+</pre>
+
+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.
+
+
+
+
+#### Functions
+Most manipulations will fall into Javascript's language support, as far as any math or looping. Use Javascript to write necessary functions.
+
+functions/color.es6 contains SASS-like color functions mixed into the base String object:
+
+*  <code>"#ab342c".darken(%)</code> -- make color darker by given percent
+*  <code>"#ab342c".lighten(%)</code> -- make color lighter by given percent
+*  <code>"#ab342c".saturate(%)</code>  -- make color more saturated by given percent. To *desaturate*, use negative values for the percent. Note that <code>"#ab342c".saturate(-100)</code> renders in grayscale.
+
+There are also color conversion routines if you want to build your own manipulation.
+
+*  <code>"#ab342c".toRGB()</code>
+*  <code>"#ab342c".toHSL()</code>
+*  <code>Csster.hslToHexColor(h,s,l)</code>
+
+Opacity is currently not supported by the color model.
+
+#### Macros using "has" key
+
+There are a host of pre-made macros that may be useful:
+
+* <code>roundedCorners(radius)</code> -- add rounded corners on all sides
+* <code>roundedCorners(side, radius)</code> -- add rounded corners on specified side: <code>'top'</code>, <code>'left'</code>, <code>'bottom'</code> or <code>'right'</code>
+* <code>roundedCorners(corner, radius)</code> -- add rounded corners to a specified corner: <code>'tl'</code>, <code>'tr'</code>, <code>'bl'</code> or <code>'br'</code>
+* <code>imageReplacement(width, height, img, imgXPosition=0, imgYPosition=0)</code> -- phark image replacement with optional background image offset.
+* <code>boxShadow([xoffset, yoffset], radius, color)</code>
+* <code>verticalCentering(height)</code> and <code>horizontalCentering(width)</code> -- center using the top 50% / margin-top -width/2 technique. See http://stackoverflow.com/questions/148251/css-centering-tricks
+* <code>clearfix()</code> -- standard clearfix
+
+To "mix these in", use the "has" key:
+
+<pre>
+{
+    'div#featured_box': {
+      backgroundColor: '#394c89',
+      has: roundedCorner(5)
+    }
+}
+</pre>
+
+Multiple macros can be included by making that a list, eg. <code>has: [roundedCorners(5), dropShadow()]</code>.
+
+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:
+
+<pre>
+    function roundedCorners(radius) {
+        return {
+            '-webkit-border-radius': radius,
+            '-moz-border-radius': radius,
+            'border-radius': radius
+        }
+    }
+</pre>
+
+A macro's properties will be overwritten by properties within including selector (or later included macros), similar to how the cascade takes the last defined value.
+
+
+## jQuery Integration
+
+If jQuery is loaded first, Csster provides a "csster" method:
+
+<pre>
+   $('.sidebar').csster({ border: '5px solid green', padding: 10 });
+</pre>
+
+As expected, this adds a rule to the document with the ".sidebar" selector.
+In general, this can be called identically to the <code>css()</code> 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).
+
+## Extending Csster
+
+Csster is built as an extensible system.
+
+### Adding Custom Property Names
+Use <code>Csster.addPropertyNames</code> to add any non-standard property names you'd like to be considered valid. The build-in tool rejects non-standard property names, although by default popular "-moz" and "-webkit" properties are added.
+
+### Pre-process rules
+<del>Functions called before properties are processed stored in <code>Csster.propertyPreprocessors</code>. Callback is provided a hash of properties to values, which it modifies in any way it wants. This is used to interpret macros.</del>
+
+<del>### Post-processing
+Functions called after rules are processed stored in <code>Csster.rulesPostProcessors</code>. Called with an array of processed rules. Can be used to eliminate duplicates, modify selectors, etc. Standard list simplifies overly complex selectors with multiple IDs.
+
+A convenient built-in function is <code>compressSelectors</code>. Using this processor, rules with multiple '#'s are simplified. For example, '#a #b #c' becomes '#c'. Usually this is what you will want, so include it with <code>Csster.rulePostProcessors.push(Csster.compressSelectors);</code>.
+
+This is used to write custom browser overrides. For example, this one makes opacity work for IE:
+
+<pre>
+  Csster.rulesPostProcessors.push(function ieOpacity(rules) {
+    // http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
+    if (Csster.browserInfo().msie) {
+      for (var i = 0; i &lt; rules.length; i++) {
+        var rule = rules[i];
+        var value = rule.props['opacity']
+        if (value) {
+          value = Math.round(value * 100.0);
+          rules[i].props['filter'] = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + value + ')';
+        }
+      }
+    }
+  });
+</pre>
+</del>
+
+### Inserting into the DOM
+Function that outputs a set of rules into the DOM is <code>Csster.insertCss</code> and can be replaced if desired.
+
+## V2.0 Changes
+
+### To upgrade from 1.0 or before
+
+* Change `Csster.browser` to call `Csster.browserInfo()`, which returns the same thing.
+* Change `has:` macro implementations to `mixin:`.
+
+### Other changes:
+
+* use ES6 for implementation and provide a more compressed and clean script.
+* add ability to turn off property name validation.
+* add ability to warn about unknown browser extensions for property names.
+
+
+## Links
+
+* [Demo of the color functions and macros](http://ndpsoftware.com/csster/demo.html)
+* [Demo of using to build a chart](http://ndpsoftware.com/csster/demo_chart.html)
+* [Blog post](http://ndpsoft.blogspot.com/2010/09/introducing-csster.html)
+
+
+## Development
+
+### Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request
+
+
+### TDD
+
+The design was driven by [the specs](http://ndpsoftware.com/csster/spec_runner.html).
+
+### Building
+
+`./bin/build.sh`
+
+
+
+## Todo
+
+* decompile existing stylesheets
+
+
+
+## Motivation
+
+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?
+
+
+## Similar projects
+
+http://revnode.com/oss/css/
+
+## Legal
+
+Copyright (c) 2010-2016 Andrew J. Peterson
+[Apache License](https://github.com/ndp/csster/raw/master/LICENSE)
+