├── LICENSE
├── README.md
├── bower.json
├── cute-js.png
├── cute.png
├── index.htm
└── src
    ├── cute.js
    └── cute.min.js


/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright 2019 bmarkov
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Cute CSS in JS
 2 | 
 3 |  
 4 | [![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/bmarkov/cute-css/blob/master/LICENSE)
 5 | [![npm](https://img.shields.io/npm/v/cute-css.svg?style=flat)](https://www.npmjs.com/package/cute-css)
 6 | [![License: APACHE](https://img.shields.io/badge/license-APACHE-blue.svg)](https://github.com/bmarkov/cute-css/blob/master/LICENSE)
 7 | 
 8 | # <Cute>
 9 | 
10 | ## Installation 
11 | 
12 | ```js
13 | npm i cute-css
14 | ```
15 | 
16 | [Live Demo ↗](https://bmarkov.github.io/cute-css/)
17 | 
18 | ```
19 | cute`
20 |     font-size: 1.5em;
21 |     text-align: center;
22 |     color: palevioletred;     
23 |     `
24 |     .querySelector('.wrapper');
25 | 
26 |   cute`
27 |     padding: 4em;
28 |     background: papayawhip;
29 |     `
30 |     .querySelector('.title');
31 | ```
32 | 
33 | ```
34 | <div class="wrapper">
35 |   <div class="title">Hello!!! I am Cute</div>
36 | </div>
37 | ```
38 | 
39 | The above code's result is:
40 | 
41 | [<img src="https://raw.githubusercontent.com/https://github.com/bmarkov/cute-css/master/cute-js.png" alt="Screenshot of Cute CSS">](https://bmarkov.github.io/cute-css/)
42 | 
43 | ```
44 |  cute`
45 |       display: inline-block;
46 |       border-radius: 3px;
47 |       padding: 0.5rem 0;
48 |       text-decoration: none;
49 |       text-align: center;
50 |       font-size: 18px;
51 |       line-height: 1.6;
52 |       margin: 0.5rem 1rem;
53 |       width: 11rem;
54 |       cursor: pointer;
55 |       background: #3F51B5;
56 |       color: #fff;
57 |       border: 2px solid #3F51B5;
58 |       transition: all 0.2s;
59 | 
60 |       ${properties => properties.secondary ? cute.css`
61 |         background: white;
62 |         color: #3F51B5;
63 |       ` : ''}
64 | 
65 |       ${onhover => cute.css`
66 |         background: #444;
67 |         color: #fff;
68 |         border-color: #444;
69 |       `}    
70 | 
71 |       ${onactive => cute.css`
72 |         background: #007ACC;
73 |         color: #fff;
74 |         border-color: #007ACC;
75 |       `}                  
76 |     `
77 |     .okButton()
78 |     .cancelButton({secondary: true})
79 | ```            
80 | 
81 | ```
82 |    <primary-button id="okButton">OK</primary-button>
83 |    <secondary-button id="cancelButton">CANCEL</secondary-button>
84 | ```     
85 | 
86 | [<img src="https://raw.githubusercontent.com/https://github.com/bmarkov/cute-css/master/cute.png" alt="Screenshot of Cute CSS">](https://bmarkov.github.io/cute-css/)
87 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cute-css",
 3 |   "authors": [
 4 |     "Boyko Markov"
 5 |   ],
 6 |   "description": "Cute allows you to easily write CSS in JS to style HTML Elements and Custom Elements",
 7 |   "license": "Apache-2.0",
 8 |   "keywords": [
 9 |      "css in js",
10 |      "css",
11 |      "js",
12 |      "css in javascript",
13 |      "dynamic css",
14 |      "web component"
15 |   ],
16 |   "main": "",
17 |   "ignore": [
18 |     "**/.*",
19 |     "**/node_modules",
20 |     "**/bower_components",
21 |     "**/tests"
22 |   ],
23 |   "dependencies": {
24 |  
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/cute-js.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bmarkov/cute-css/b65a97ae09f311d6919f574e92c9265e0da1d6af/cute-js.png


--------------------------------------------------------------------------------
/cute.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bmarkov/cute-css/b65a97ae09f311d6919f574e92c9265e0da1d6af/cute.png


--------------------------------------------------------------------------------
/index.htm:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6 | <meta name="description" content="CSS in Javascript">  
  7 | <meta name="author" content="Boyko Markov and Smart contributors">
  8 | <meta name="generator" content="Jekyll v3.8.5">
  9 | <title>Cute - CSS in JS</title>
 10 | <style>
 11 | .bd-text-purple-bright {
 12 | 	color: #7952b3 !important;
 13 | }
 14 | .btn-secondary {
 15 | 	background: #7952b3 !important;
 16 | 	border-color: #7952b3 !important;
 17 | }
 18 | </style>
 19 | <!-- Bootstrap core CSS -->
 20 | <link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet">
 21 | <!-- Documentation extras -->
 22 | 
 23 | <link href="https://getbootstrap.com/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
 24 | <link href="https://www.htmlelements.io/styles/site.css" rel="stylesheet">
 25 | <link href="https://www.htmlelements.io/source/styles/smart.default.css" rel="stylesheet">
 26 | <script src="https://www.htmlelements.io/source/smart.core.js"></script>
 27 | <script type="text/javascript" src="https://www.htmlelements.com/wp-content/design/assets/js/run_prettify.js"></script>
 28 |    
 29 | 
 30 | 
 31 |   </head>
 32 |   <body>
 33 |     <main class="bd-masthead" id="content" role="main">
 34 |   <div class="container">
 35 |     <div class="row align-items-center">
 36 |       <div class="col-md-8 order-md-1 text-center text-md-left pr-md-5">
 37 |         <h1 class="mb-3 bd-text-purple-bright">Cute</h1>
 38 |         <p class="lead">
 39 |           CSS in Javascript
 40 |         </p>
 41 |         <p class="lead mb-4">
 42 |      <strong>Cute</strong> allows you to write CSS code in Javascript</p>
 43 | 	 
 44 |         <ul>
 45 | <li>Utilising tagged template literals and the power of CSS.
 46 | </li>
 47 | <li>Automatic CSS - adds css to a web page on demand, fully automatically. Your users load the least amount of code necessary.
 48 | </li>
 49 | <li>No class name bugs - unique class names for your styles. You never have to worry about duplication or misspellings.</li>
 50 | <li>Removes the mapping between components and styles</li>		
 51 | <li>FREE</li>
 52 | </ul>
 53 | 		</p>
 54 |         <div class="row mx-n2">
 55 |           <div class="col-md-4 px-2">
 56 |             <a href="https://github.com/bmarkov/cute-css/" class="btn btn-lg btn-secondary w-100 mb-3">Download</a>
 57 |           </div>
 58 |         </div>
 59 |         <p class="text-muted mb-0">
 60 |           Currently Cute 1.0. Only 4 KB
 61 |         </p>
 62 |       </div>
 63 |     </div>
 64 | 
 65 |   </div>
 66 | </main>
 67 | 
 68 | <div class="masthead-followup row m-0 border border-white">
 69 |   <div class="col-12 col-md-12 p-3 p-md-5 bg-light border border-white">
 70 |     <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
 71 |     <svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="32" height="32" fill="none" stroke="currentcolor" stroke-width="2" class="text-primary mb-2" viewBox="0 0 32 32" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><title>Import</title><path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></svg>
 72 | 
 73 |     <h3>Installation</h3>
 74 |     <p>Include cute.js files via npm.</p>
 75 | 
 76 | <figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm <span class="nb">install </span>cute-css</code></pre></figure>
 77 | 
 78 |    <hr class="half-rule">
 79 | 	<h3>Getting Started</h3>
 80 | <p>With <code>Cute</code> you write CSS in Javascript. CSS is automatically injected into the page.</p>
 81 | 	
 82 | <p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="boyko-markov" data-slug-hash="gqZpRE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Cute">
 83 |   <span>See the Pen <a href="https://codepen.io/boyko-markov/pen/gqZpRE/">
 84 |   Cute</a> by Boyko Markov (<a href="https://codepen.io/boyko-markov">@boyko-markov</a>)
 85 |   on <a href="https://codepen.io">CodePen</a>.</span>
 86 | </p>
 87 | <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 88 | <p>This example creates two simple components, a wrapper and a title, with some styles attached to it:
 89 | </p>
 90 | <h3>Styling multiple elements</h3>
 91 | <p>We can use querySelector or querySelectorAll with <code>Cute</code> to style HTML Element or multiple HTML Elements with a single call.</p>
 92 | <p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="boyko-markov" data-slug-hash="OdrVoL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Cute Nav ">
 93 |   <span>See the Pen <a href="https://codepen.io/boyko-markov/pen/OdrVoL/">
 94 |   Cute Nav </a> by Boyko Markov (<a href="https://codepen.io/boyko-markov">@boyko-markov</a>)
 95 |   on <a href="https://codepen.io">CodePen</a>.</span>
 96 | </p>
 97 | <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 98 | <h3>Adapting based on properties</h3>
 99 | <p>Conditionally apply CSS</p>
100 | <p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="boyko-markov" data-slug-hash="BMvNGy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Cute Buttons">
101 |   <span>See the Pen <a href="https://codepen.io/boyko-markov/pen/BMvNGy/">
102 |   Cute Buttons</a> by Boyko Markov (<a href="https://codepen.io/boyko-markov">@boyko-markov</a>)
103 |   on <a href="https://codepen.io">CodePen</a>.</span>
104 | </p>
105 | <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
106 | <br/>
107 | <p>Styling based on attributes. With <code>Cute</code>, you can add Conditional CSS based on attributes, class names or states.
108 | <ul>
109 | 	<li>Property based:
110 | 	<pre class="prettyprint">
111 | ${properties => properties.secondary ? cute.css`
112 | 	background: white;
113 | 	color: #3F51B5;
114 | ` : ''}
115 | 	</pre>
116 | 	</li>
117 | 	<li>Attribute based:
118 | 	<pre class="prettyprint">
119 | ${attrThemed => cute.css`
120 | 	background: white;
121 | 	color: #3F51B5;
122 | `}
123 | 	</pre>
124 | 	</li>	
125 | 	<li>Class Name based:
126 | 	<pre class="prettyprint">
127 | ${classNameThemed => cute.css`
128 | 	background: white;
129 | 	color: #3F51B5;
130 | `}
131 | 	</pre>
132 | 	</li>		
133 | 	<li>Hover: 
134 | <pre class="prettyprint">
135 | ${onhover => cute.css`
136 | 	background: #fff;
137 | 	color: #007ACC;
138 | 	border-color: #007ACC;
139 | `} 
140 | </pre>	
141 | 	</li>
142 | 	<li>Active:
143 | <pre class="prettyprint">
144 | ${onactive => cute.css`
145 | 	background: #fff;
146 | 	color: #444;
147 | 	border-color: #444;
148 | `} 
149 | </pre>	
150 | 	</li>	
151 | <li>Focus:
152 | <pre class="prettyprint">
153 | ${onfocus => cute.css`
154 | 	background: #fff;
155 | 	color: #444;
156 | 	border-color: #444;
157 | `} 
158 | </pre>	
159 | <li>Disabled:
160 | <pre class="prettyprint">
161 | ${ondisabled => cute.css`
162 | 	background: #ff0000;
163 | 	color: #fff;
164 | 	border-color: #ff0000;
165 | `} 
166 | </pre>	
167 | 	</li>
168 | 	</li>	
169 | </ul>
170 | </p>
171 | <h3>Extending Styles</h3>
172 | <p>Quite often you might want to use HTML Element, but change its Style slightly for a single case. To achieve that, you can call again the <code>cute</code> function.</p>
173 | <p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="boyko-markov" data-slug-hash="BMvjpr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Cute Extending Styles">
174 |   <span>See the Pen <a href="https://codepen.io/boyko-markov/pen/BMvjpr/">
175 |   Cute Extending Styles</a> by Boyko Markov (<a href="https://codepen.io/boyko-markov">@boyko-markov</a>)
176 |   on <a href="https://codepen.io">CodePen</a>.</span>
177 | </p>
178 | <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
179 |   </div> 
180 |   <p>We can see that the new OrangeButton still resembles Button, but has additional CSS rules applied.</p>
181 | </div>
182 | <h3>Cute with Custom Elements</h3>
183 | <p><code>Cute</code> can create and style Custom Elements. The example below shows how to dynamically create and style Custom Elements</p>
184 | <p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="boyko-markov" data-slug-hash="GzPZoY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Cute Properties and Custom Elements">
185 |   <span>See the Pen <a href="https://codepen.io/boyko-markov/pen/GzPZoY/">
186 |   Cute Properties and Custom Elements</a> by Boyko Markov (<a href="https://codepen.io/boyko-markov">@boyko-markov</a>)
187 |   on <a href="https://codepen.io">CodePen</a>.</span>
188 | </p>
189 | <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
190 |     <footer class="bd-footer text-muted">
191 |   <div class="container-fluid p-3 p-md-5">
192 |     <ul class="bd-footer-links">
193 |       <li><a href="https://github.com/htmlelements">GitHub</a></li>
194 |     </ul>
195 |     <p>Designed and built by <a href="https://www.htmlelements.com/" target="_blank">https://www.htmlelements.com</a> </p>
196 |     <p>Currently v1.0.0. Code licensed Apache V2.0</p>
197 |   </div>
198 | </footer>
199 | 
200 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
201 | 	<script src="scripts/bootstrap.bundle.min.js"></script>
202 |   </body>
203 | </html>
204 | 


--------------------------------------------------------------------------------
/src/cute.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Owner: https://htmlelements.com/
  3 | */
  4 | 
  5 | (function () {
  6 |     'use strict';
  7 | 	
  8 | 	const cssCache = [];
  9 | 	
 10 | 	function addStylesheetRules (selector, css) {
 11 | 	  var styleEl = document.createElement('style');
 12 | 
 13 | 	  let rules = '';
 14 | 	  let hover = '';
 15 | 	  let active = '';
 16 | 	  let focus = '';
 17 | 	  let disabled = '';
 18 | 	  let attributeRules = [];
 19 | 	  let classNameRules = [];
 20 | 	  
 21 | 	  const json = Object.assign({}, css);
 22 | 		
 23 | 	  const serialize = function(css) {
 24 | 		 let rules = '';
 25 | 		 
 26 | 		 for(let cssProperty in css) {
 27 | 			if (cssProperty === 'onhover') {
 28 | 				hover = serialize(css[cssProperty]);
 29 | 				continue;			
 30 | 			}
 31 | 			else if (cssProperty === 'onactive') {
 32 | 				active = serialize(css[cssProperty]);
 33 | 				continue;			
 34 | 			}
 35 | 			else if (cssProperty === 'onfocus') {
 36 | 				focus = serialize(css[cssProperty]);
 37 | 				continue;			
 38 | 			}
 39 | 			else if (cssProperty === 'ondisabled') {
 40 | 				disabled = serialize(css[cssProperty]);
 41 | 				continue;			
 42 | 			}
 43 | 			else if (cssProperty.startsWith('attr')) {
 44 | 				attributeRules[cssProperty.replace('attr', '').toLowerCase()] = serialize(css[cssProperty]);
 45 | 				continue;			
 46 | 			}
 47 | 			else if (cssProperty.startsWith('className')) {
 48 | 				classNameRules[cssProperty.replace('className', '').toLowerCase()] = serialize(css[cssProperty]);
 49 | 				continue;			
 50 | 			}
 51 | 			else {
 52 | 				rules += cssProperty + ': ' + css[cssProperty] + '; ';	
 53 | 			}
 54 | 		 }
 55 | 		 
 56 | 		 return rules
 57 | 	  }
 58 | 	  
 59 | 	  rules = serialize(json);
 60 | 	  
 61 | 	  if (cssCache[rules]) {
 62 | 		  selector = cssCache[rules];
 63 | 		  
 64 | 		  return selector;
 65 | 	  }
 66 | 	  else {
 67 | 		cssCache[rules] = selector;
 68 | 	  }
 69 | 		
 70 | 	  const cssClass = '.' + selector;
 71 | 	  
 72 | 	  styleEl.innerHTML = cssClass + ' {' + rules + '}';
 73 | 
 74 | 	  for(let attributeName in attributeRules){
 75 | 		 styleEl.innerHTML += cssClass + '[' + attributeName  + '] {'  + attributeRules[attributeName] + '}';
 76 | 	  }
 77 | 
 78 | 	  for(let className in classNameRules){
 79 | 		 styleEl.innerHTML += cssClass + '.' + className  + ' {'  + classNameRules[className] + '}';
 80 | 	  }
 81 | 	  
 82 | 	  if (hover) {
 83 | 		styleEl.innerHTML += cssClass + ':hover {' + hover + '}';
 84 | 	  }
 85 | 	  
 86 | 	  if (active) {
 87 | 		styleEl.innerHTML += cssClass + ':active {' + active + '}';
 88 | 	  } 
 89 | 	  
 90 | 	  if (focus) {
 91 | 		styleEl.innerHTML += cssClass + ':focus {' + focus + '}';
 92 | 	  } 
 93 | 	  
 94 | 	  if (disabled) {
 95 | 		styleEl.innerHTML += cssClass + ':disabled {' + disabled + '}';
 96 | 	  } 
 97 | 	  
 98 | 	  // Append <style> element to <head>
 99 | 	  document.head.appendChild(styleEl);	  
100 | 	}
101 | 
102 | 
103 | 	const cssFromString = function(cssString) {
104 | 		const rules = cssString.split(';');
105 | 		const result = [];
106 | 
107 | 		for (let i = 0; i < rules.length; i++) {
108 | 			const rule = rules[i].toString();	
109 | 			const ruleWithoutComments = rule.replace(/(\/\*[^*]*\*\/)|(\/\/[^*]*)/g, '');	
110 | 			const splitRule = ruleWithoutComments.split(':');
111 | 			
112 | 			if (splitRule.length > 1) {
113 | 				result[splitRule[0].trim()] = splitRule[1].trim();
114 | 			}
115 | 		}
116 | 
117 | 		return result;
118 | 	}
119 | 
120 | 	const css = function(cssObject, options) {
121 | 		let result = [];
122 | 		
123 | 		if (Array.isArray(cssObject)) {
124 | 			for(let i = 0; i < cssObject.length; i++) {
125 | 				let rules = [];
126 | 				
127 | 				if (typeof cssObject[i] === 'function') {
128 | 					rules = css(cssObject[i], options);
129 | 					
130 | 					const functionName = cssObject[i].toString();
131 | 					
132 | 					if (functionName.startsWith('on') ||
133 | 					   (functionName.startsWith('attr')) ||
134 | 					   (functionName.startsWith('className'))
135 | 					) {
136 | 						const stateName = functionName.substring(0, functionName.indexOf('=')).trim()
137 | 						
138 | 						result[stateName] = rules;
139 | 						continue;
140 | 					}		
141 | 				}
142 | 				else {
143 | 					rules = cssFromString(cssObject[i].toString());
144 | 				}
145 | 		
146 | 				const keys = Object.keys(rules);
147 | 			
148 | 				for(let j = 0; j < keys.length; j++) {
149 | 					result[keys[j]] = rules[keys[j]];
150 | 				}	
151 | 			}	
152 | 		}
153 | 		else if (typeof cssObject === 'function') {
154 | 			return cssObject(options || {});		
155 | 		}
156 | 		else {
157 | 			return cssFromString(cssObject.toString());
158 | 		}
159 | 		
160 | 		return result;
161 | 	}
162 | 
163 | 	function constructWithOptions(
164 | 	  componentConstructor,
165 | 	  tag
166 | 	) {
167 | 	 
168 | 
169 | 	  const templateFunction = (...args) => componentConstructor(tag, args, this);
170 | 	  
171 | 	  return templateFunction;
172 | 	}
173 | 
174 | 	function CuteComponent(element, styles) {
175 | 		const tagName = !element.tagName ? element : element.tagName;
176 | 		
177 | 		const data = {
178 | 			tagName: tagName,
179 | 			styles: styles,
180 | 			element: element
181 | 		}
182 | 		
183 | 		const createComponent = function(options) {
184 | 			const cssResult = css(this.styles, options);				
185 | 			const element = typeof this.element === 'string' ? document.createElement(this.tagName) : this.element;	
186 | 			const className = tagName + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
187 | 			
188 | 			for(let option in options) {
189 | 				element[option] = options[option];	
190 | 			}
191 | 			
192 | 			const cachedClassName = addStylesheetRules(className, cssResult);
193 | 			
194 | 			if (cachedClassName) {
195 | 				element.classList.add(cachedClassName);
196 | 			}
197 | 			else {
198 | 				element.classList.add(className);
199 | 			}
200 | 			
201 | 			return element;
202 | 		}.bind(data);
203 | 						
204 | 		createComponent.__proto__.that = createComponent;
205 | 						
206 | 		return createComponent;
207 | 	}
208 | 
209 | 	const domElements = [
210 | 	  'a',
211 | 	  'abbr',
212 | 	  'address',
213 | 	  'area',
214 | 	  'article',
215 | 	  'aside',
216 | 	  'audio',
217 | 	  'b',
218 | 	  'base',
219 | 	  'bdi',
220 | 	  'bdo',
221 | 	  'big',
222 | 	  'blockquote',
223 | 	  'body',
224 | 	  'br',
225 | 	  'button',
226 | 	  'canvas',
227 | 	  'caption',
228 | 	  'cite',
229 | 	  'code',
230 | 	  'col',
231 | 	  'colgroup',
232 | 	  'data',
233 | 	  'datalist',
234 | 	  'dd',
235 | 	  'del',
236 | 	  'details',
237 | 	  'dfn',
238 | 	  'dialog',
239 | 	  'div',
240 | 	  'dl',
241 | 	  'dt',
242 | 	  'em',
243 | 	  'embed',
244 | 	  'fieldset',
245 | 	  'figcaption',
246 | 	  'figure',
247 | 	  'footer',
248 | 	  'form',
249 | 	  'h1',
250 | 	  'h2',
251 | 	  'h3',
252 | 	  'h4',
253 | 	  'h5',
254 | 	  'h6',
255 | 	  'head',
256 | 	  'header',
257 | 	  'hgroup',
258 | 	  'hr',
259 | 	  'html',
260 | 	  'i',
261 | 	  'iframe',
262 | 	  'img',
263 | 	  'input',
264 | 	  'ins',
265 | 	  'kbd',
266 | 	  'keygen',
267 | 	  'label',
268 | 	  'legend',
269 | 	  'li',
270 | 	  'link',
271 | 	  'main',
272 | 	  'map',
273 | 	  'mark',
274 | 	  'marquee',
275 | 	  'menu',
276 | 	  'menuitem',
277 | 	  'meta',
278 | 	  'meter',
279 | 	  'nav',
280 | 	  'noscript',
281 | 	  'object',
282 | 	  'ol',
283 | 	  'optgroup',
284 | 	  'option',
285 | 	  'output',
286 | 	  'p',
287 | 	  'param',
288 | 	  'picture',
289 | 	  'pre',
290 | 	  'progress',
291 | 	  'q',
292 | 	  'rp',
293 | 	  'rt',
294 | 	  'ruby',
295 | 	  's',
296 | 	  'samp',
297 | 	  'script',
298 | 	  'section',
299 | 	  'select',
300 | 	  'small',
301 | 	  'source',
302 | 	  'span',
303 | 	  'strong',
304 | 	  'style',
305 | 	  'sub',
306 | 	  'summary',
307 | 	  'sup',
308 | 	  'table',
309 | 	  'tbody',
310 | 	  'td',
311 | 	  'textarea',
312 | 	  'tfoot',
313 | 	  'th',
314 | 	  'thead',
315 | 	  'time',
316 | 	  'title',
317 | 	  'tr',
318 | 	  'track',
319 | 	  'u',
320 | 	  'ul',
321 | 	  'var',
322 | 	  'video',
323 | 	  'wbr',
324 | 
325 | 	  // SVG
326 | 	  'circle',
327 | 	  'clipPath',
328 | 	  'defs',
329 | 	  'ellipse',
330 | 	  'foreignObject',
331 | 	  'g',
332 | 	  'image',
333 | 	  'line',
334 | 	  'linearGradient',
335 | 	  'mask',
336 | 	  'path',
337 | 	  'pattern',
338 | 	  'polygon',
339 | 	  'polyline',
340 | 	  'radialGradient',
341 | 	  'rect',
342 | 	  'stop',
343 | 	  'svg',
344 | 	  'text',
345 | 	  'tspan'
346 | 	];
347 |     
348 | 	const data = {
349 | 		css: css,
350 | 		tag: (tag) => constructWithOptions(CuteComponent, tag)
351 | 	};
352 | 	
353 | 	const cuteComponent = (element) => function(options){
354 | 		for(let i = 0; i < this.styles.length; i++) {
355 | 			const currentStyles = this.styles[i];
356 | 			
357 | 			const cssResult = css(currentStyles, options);				
358 | 			
359 | 			const className = element.tagName.replace('-', '').toLowerCase() + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
360 | 			
361 | 			for(let option in options) {
362 | 				element[option] = options[option];	
363 | 			}
364 | 			
365 | 			const cachedClassName = addStylesheetRules(className, cssResult);
366 | 			
367 | 			if (cachedClassName) {
368 | 				element.classList.add(cachedClassName);
369 | 			}
370 | 			else {
371 | 				element.classList.add(className);
372 | 			}
373 | 		}
374 | 		
375 | 		return this;
376 | 	}
377 | 		
378 | 	const cute = window.cute = (...args) => (function(args) {
379 | 		if (!this.styles) {
380 | 			this.styles = [];
381 | 		}
382 | 		
383 | 		this.styles.push(args);
384 | 		
385 | 		return this;
386 | 		
387 | 	}.bind(data))(args);
388 | 	
389 | 	cute.tag = data.tag;
390 | 	cute.css = css;
391 | 	data.cute = cute;
392 | 	
393 | 	data.querySelector = function(selector, options) {		
394 | 		const element = document.querySelector(selector);
395 | 		
396 | 		if (!element) {
397 | 			return this;
398 | 		}
399 | 		
400 | 		return cuteComponent(element).bind(this)(options);
401 | 	}
402 | 	data.querySelectorAll = function(selector, options) {	
403 | 		const that = this;
404 | 		
405 | 		document.querySelectorAll(selector).forEach(function(element) {
406 | 			cuteComponent(element).bind(that)(options);
407 | 		});
408 | 		
409 | 		return this;
410 | 	}
411 | 	
412 | 	domElements.forEach(domElement => {
413 | 	  data[domElement] = (options) => {
414 | 		  return data.querySelectorAll(domElement, options);
415 | 	  }
416 | 	});
417 | 
418 | 	window.addEventListener('load', function() {
419 | 		const allElements = document.body.querySelectorAll('*');
420 | 
421 | 		allElements.forEach(element => {
422 | 			  if (element.id) {
423 | 				data[element.id] = data['#' + element.id] = cuteComponent(element);			
424 | 			  }
425 | 			  else if (element.classList.length > 0) {
426 | 				data['.' + element.className.split(' ')[0]] = cuteComponent(element);
427 | 			  }
428 | 			  
429 | 			  if (domElements.indexOf(element.tagName.toLowerCase()) === -1) {
430 | 				 class SmartHTMLElements extends HTMLElement {
431 | 					  constructor() {
432 | 						// Always call super first in constructor
433 | 						super();
434 | 					  }
435 | 					} 
436 | 				  customElements.define(element.tagName.toLowerCase(), SmartHTMLElements, {extends: 'div'});
437 | 			  }
438 | 		});
439 | 	});
440 | })();


--------------------------------------------------------------------------------
/src/cute.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | Owner: https://htmlelements.com/
3 | */
4 | !function(){"use strict";const t=[];function e(e,n){var s=document.createElement("style");let r="",i="",o="",a="",l="",c=[],d=[];const u=Object.assign({},n),h=function(t){let e="";for(let n in t)"onhover"!==n?"onactive"!==n?"onfocus"!==n?"ondisabled"!==n?n.startsWith("attr")?c[n.replace("attr","").toLowerCase()]=h(t[n]):n.startsWith("className")?d[n.replace("className","").toLowerCase()]=h(t[n]):e+=n+": "+t[n]+"; ":l=h(t[n]):a=h(t[n]):o=h(t[n]):i=h(t[n]);return e};if(r=h(u),t[r])return e=t[r];t[r]=e;const f="."+e;s.innerHTML=f+" {"+r+"}";for(let t in c)s.innerHTML+=f+"["+t+"] {"+c[t]+"}";for(let t in d)s.innerHTML+=f+"."+t+" {"+d[t]+"}";i&&(s.innerHTML+=f+":hover {"+i+"}"),o&&(s.innerHTML+=f+":active {"+o+"}"),a&&(s.innerHTML+=f+":focus {"+a+"}"),l&&(s.innerHTML+=f+":disabled {"+l+"}"),document.head.appendChild(s)}const n=function(t){const e=t.split(";"),n=[];for(let t=0;t<e.length;t++){const s=e[t].toString().replace(/(\/\*[^*]*\*\/)|(\/\/[^*]*)/g,"").split(":");s.length>1&&(n[s[0].trim()]=s[1].trim())}return n},s=function(t,e){let r=[];if(!Array.isArray(t))return"function"==typeof t?t(e||{}):n(t.toString());for(let i=0;i<t.length;i++){let o=[];if("function"==typeof t[i]){o=s(t[i],e);const n=t[i].toString();if(n.startsWith("on")||n.startsWith("attr")||n.startsWith("className")){r[n.substring(0,n.indexOf("=")).trim()]=o;continue}}else o=n(t[i].toString());const a=Object.keys(o);for(let t=0;t<a.length;t++)r[a[t]]=o[a[t]]}return r};function r(t,n){const r=t.tagName?t.tagName:t,i=function(t){const n=s(this.styles,t),i="string"==typeof this.element?document.createElement(this.tagName):this.element,o=r+Math.floor(65536*(1+Math.random())).toString(16).substring(1);for(let e in t)i[e]=t[e];const a=e(o,n);return a?i.classList.add(a):i.classList.add(o),i}.bind({tagName:r,styles:n,element:t});return i.__proto__.that=i,i}const i=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","marquee","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"],o={css:s,tag:t=>(function(t,e){return(...n)=>t(e,n,this)})(r,t)},a=t=>(function(n){for(let r=0;r<this.styles.length;r++){const i=this.styles[r],o=s(i,n),a=t.tagName.replace("-","").toLowerCase()+Math.floor(65536*(1+Math.random())).toString(16).substring(1);for(let e in n)t[e]=n[e];const l=e(a,o);l?t.classList.add(l):t.classList.add(a)}return this}),l=window.cute=((...t)=>(function(t){return this.styles||(this.styles=[]),this.styles.push(t),this}).bind(o)(t));l.tag=o.tag,l.css=s,o.cute=l,o.querySelector=function(t,e){const n=document.querySelector(t);return n?a(n).bind(this)(e):this},o.querySelectorAll=function(t,e){const n=this;return document.querySelectorAll(t).forEach(function(t){a(t).bind(n)(e)}),this},i.forEach(t=>{o[t]=(e=>o.querySelectorAll(t,e))}),window.addEventListener("load",function(){document.body.querySelectorAll("*").forEach(t=>{if(t.id?o[t.id]=o["#"+t.id]=a(t):t.classList.length>0&&(o["."+t.className.split(" ")[0]]=a(t)),-1===i.indexOf(t.tagName.toLowerCase())){class e extends HTMLElement{constructor(){super()}}customElements.define(t.tagName.toLowerCase(),e,{extends:"div"})}})})}();


--------------------------------------------------------------------------------