├── README.md
├── index.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
 1 | Stylup
 2 | ======
 3 | 
 4 | > This repo has been deprecated. Please see https://github.com/limitlessloop/stylup instead.
 5 | 
 6 | Stylup is preprocessor that allows you to write class names in an easier manner when using utility classes for responsive designs.
 7 | 
 8 | ## Usage
 9 | 
10 | It works by looking for certain constructs inside each element's class attribute and then parses them into valid conventional HTML class names.
11 | 
12 | For example if you write
13 | 
14 | ```html
15 | <div class="hidden@sm [span 2@md 4@lg 8@xl]"></div>
16 | ```
17 | 
18 | Stylup will convert the markup into valid HTML class names
19 | 
20 | ```html
21 | <div class="hidden-sm span-2-md span-4-lg span-8-xl"></div>
22 | ```
23 | 
24 | Demo: http://sevenupcan.jsbin.com/yuhupi/
25 | 
26 | ## Installation
27 | 
28 | ```
29 | npm install stylup --save-dev
30 | ```
31 | 
32 | ### Gulp
33 | 
34 | Example using gulp, requires [gulp-dom](https://www.npmjs.com/package/gulp-dom).
35 | 
36 | ```
37 | var gulp        = require('gulp'),
38 |     dom         = require('gulp-dom'),
39 |     stylup      = require('stylup');
40 | 
41 | 
42 | gulp.task('stylup', function() {
43 |     return gulp.src('./src/**/*.html')
44 |         .pipe(dom(function(){
45 |             stylup(this);
46 |             return this;
47 |         }))
48 |         .pipe(gulp.dest('./dist'));
49 | });
50 | ```
51 | 
52 | ## Syntax
53 | 
54 | ### Groups
55 | 
56 | ```html
57 | <div class="[text uppercase strikethrough]"></div>
58 | ```
59 | 
60 | ### Queries
61 | 
62 | ```html
63 | <div class="@sm([columns 2]) @md([span 3])"></div>
64 | ```
65 | 
66 | ### Shorthand
67 | 
68 | ```html
69 | <div class="hidden@sm [span 2@md 4@lg 8@xl])"></div>
70 | ```
71 | 
72 | ## About / Feedback
73 | 
74 | This tool is a bit of an experiment. I started developing after trying to create my own CSS framework. I found that no matter how I organised my CSS it was still difficult to write HTML class names in a way which was quick and manageable. I looked at several different solutions and decided that creating a custom markup language was the direction I wanted to take.
75 | 
76 | I've taken inspiration from other authors who are also discussing similar things in this space. If you are interested on the subject you should also check out Glen Madderns, [Attribute Modules for CSS](http://glenmaddern.com/articles/introducing-am-css).
77 | 
78 | The current syntax I'm using was influenced by an idea Harry Roberts thought of to visually group [related class names](http://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/). I decided to use this format because it was easier to build and prove as a concept and I wanted it to feel distinctive yet familiar to existing space delimited HTML class names.
79 | 
80 | I started writing this tool as a project to practice my coding skills and since have learned a lot about JavaScript and programming. Unfortunately though you may notice some problems that I couldn't foresee. If you do find any bugs or have some feedback feel free to create an issue or get in touch with me.
81 | 
82 | Thanks to everyone who helped me write this tool and supported me along the way. A big thanks goes to [Justin Perry](https://github.com/ourmaninamsterdam), [Jim Myhrberg](https://github.com/jimeh) and Khalid Akram.
83 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | var token = {
  2 |     query: /@(\w+)\((.+?)\)/gmi,
  3 |     property: /\[([\w\-]+)\s([\w\s/!:@\-]+)\]/gmi,
  4 |     shortQuery: /([\w\-:/]+)@([\w!]+)/gmi,
  5 |     normal: /[\w\-/]+/gmi
  6 | };
  7 | 
  8 | var makeRegex = function() {
  9 | 
 10 |   var array = [];
 11 | 
 12 |   Object.keys(token).forEach(function(key) {
 13 |     array.push(token[key].source);
 14 |   });
 15 | 
 16 |   var regex = array.join("|");
 17 | 
 18 |   return new RegExp(regex, "gmi");
 19 | 
 20 | };
 21 | 
 22 | var split = function(input) {
 23 | 		return input.match(makeRegex());
 24 | };
 25 | 
 26 | var parse = function(input) {
 27 |   var array, htmlClass, item, output, _i, _j, _a, _len, _len1, len2;
 28 | 
 29 |   array = split(input);
 30 | 
 31 |   output = [];
 32 | 
 33 | 	_len = array.length;
 34 | 
 35 | 
 36 |   for (_i = 0; _i < _len; _i++) {
 37 |     item = array[_i];
 38 | 
 39 |     input = item;
 40 | 
 41 |     // 1.0
 42 |     if (input.match(token.query)) {
 43 | 
 44 |       input.replace(token.query, function(match, p1, p2) {
 45 | 
 46 |         var htmlClass, query;
 47 |         query = p1;
 48 |         input = p2;
 49 | 
 50 |         input = split(input);
 51 | 
 52 |         for(var _g = 0; _g < input.length; _g++) {
 53 | 
 54 |          // 1.1
 55 |          if (input[_g].match(token.property)) {
 56 | 
 57 |           input[_g].replace(token.property, function(match, p1, p2) {
 58 |             var htmlClass, values;
 59 |             htmlClass = p1;
 60 |             values = p2;
 61 | 
 62 |             values = split(values);
 63 | 
 64 | 
 65 |             for(var _z = 0; _z < values.length; _z++) {
 66 | 
 67 |               output.push({
 68 |                 htmlClass: htmlClass,
 69 |                 value: values[_z],
 70 |                 query: query
 71 |               });
 72 |             }
 73 |           });
 74 |         }
 75 | 
 76 |         // 1.2
 77 |         else {
 78 |           output.push({
 79 |             htmlClass: input[_g],
 80 |             query: query
 81 |           });
 82 |         }
 83 | 
 84 |         }
 85 | 
 86 |       });
 87 |     }
 88 | 
 89 |     // 2.0
 90 |     else if (input.match(token.property)) {
 91 | 
 92 |       input.replace(token.property, function(match, p1, p2) {
 93 |         var htmlClass, values;
 94 |         htmlClass = p1;
 95 |         input = p2;
 96 |         input = split(input);
 97 | 
 98 | 
 99 |         for(var _d = 0; _d < input.length; _d++) {
100 | 
101 |           // 2.1
102 |           if (input[_d].match(token.shortQuery)) {
103 |             input[_d].replace(token.shortQuery, function(match, p1, p2) {
104 |               var query, values;
105 |               values = p1;
106 |               query = p2;
107 |               output.push({
108 |                 htmlClass: htmlClass,
109 |                 value: values,
110 |                 query: query
111 |               });
112 |             });
113 |           }
114 | 
115 |           // 2.2
116 |           else {
117 |             output.push({
118 |               htmlClass: htmlClass,
119 |               value: input[_d]
120 |             });
121 |           }
122 |         }
123 |       });
124 |     }
125 | 
126 |     // 3.0
127 |     else if (input.match(token.shortQuery)) {
128 |       input.replace(token.shortQuery, function(match, p1, p2) {
129 |         var htmlClass, query;
130 |         htmlClass = p1;
131 |         query = p2;
132 |         return output.push({
133 |           htmlClass: htmlClass,
134 |           query: query
135 |         });
136 |       });
137 |     }
138 | 
139 |     // 4.0
140 |     else {
141 |       htmlClass = input;
142 |       output.push({
143 |         htmlClass: htmlClass
144 |       });
145 |     }
146 |   }
147 | 
148 |   return render(output);
149 | };
150 | 
151 | var render = function(input) {
152 |   var output = [];
153 | 
154 |   for (var i = 0; i < input.length; i++) {
155 |     var object = input[i];
156 | 
157 |     var array = [];
158 |     for (var property in object) {
159 |       if (object.hasOwnProperty(property)){
160 |         array.push(object[property]);
161 |       }
162 |     }
163 | 
164 |     array = array.join("-");
165 |     output.push(array);
166 |   }
167 | 
168 |   return output.join(' ');
169 | 
170 | };
171 | 
172 | var stylup = function(document) {
173 |     var elementList = document.querySelectorAll("[class]");
174 |     var _i = 0;
175 |     var _len = 0;
176 |     for (_i = 0, _len = elementList.length; _i < _len; _i++) {
177 |         var element = elementList[_i];
178 |             if (element.className !== "") {
179 |                 element.className = parse(element.className);
180 |             }
181 |         }
182 | };
183 | 
184 | module.exports = stylup;
185 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stylup",
 3 |   "version": "0.0.2",
 4 |   "description": "A custom markup language for managing HTML class names for responsive designs",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/sevenupcan/stylup.git"
12 |   },
13 |   "keywords": [
14 |     "HTML",
15 |     "CSS",
16 |     "class",
17 |     "names"
18 |   ],
19 |   "author": "Gavin McFarland",
20 |   "license": "ISC",
21 |   "bugs": {
22 |     "url": "https://github.com/sevenupcan/stylup/issues"
23 |   },
24 |   "homepage": "https://github.com/sevenupcan/stylup#readme"
25 | }
26 | 


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