Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="A markup language for managing HTML class names for responsive designs" />
<link rel="stylesheet" href="style.css" charset="utf-8">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Stylup: A markup language for managing HTML class names for responsive designs.</title>
</head>
<body class="[contrast low@morning medium@afternoon high@evening]">
​
  <div class="Container">
​
    <h1 class="[text uppercase wide]">Stylup</h1>
​
    <p class="[text center]">Stylup is a markup language for managing HTML class names in responsive designs. It parses a custom syntax into conventional HTML class names so your markup is less repetitive, especially in responsive designs.</p>
​
    <a class="Button" href="https://github.com/sevenupcan/stylup">Github</a>
​
    <h2 class="[text uppercase close]"><span>Usage</span></h2>
​
    <section>
      <h3 class="[span 3@md 4@lg]">Groups</h3>
      <div class="[span 7@md 6@lg]">
        <pre class="[style red@sm blue@md green@lg]">&lt;p class="<span class="highlight">[text underline uppercase]</span>"&gt;&lt;/p&gt;</pre>
        <small>Outputs: <pre>&lt;p class="text-underline text-uppercase"&gt;&lt;/p&gt;</pre></small>
      </div>
    </section>
​
    <section>
      <h3 class="[span 3@md 4@lg]">Block Queries</h3>
      <div class="[span 7@md 6@lg]">
        <pre class="[style red@sm blue@md green@lg]">&lt;div class="<span class="highlight">@sm([span 1] no-guttering)
            @md([span 2])
            @lg([span 4])
            @xl([span 8])</span>"&gt;&lt;/div&gt;</pre>
        <small>Outputs: <pre>&lt;div class="span-1-sm no-guttering-sm span-2-md span-4-lg span-8-xl"&gt;&lt;/div&gt;</pre></small>
      </div>
    </section>
​
    <section>
      <h3 class="[span 3@md 4@lg]">Inline Queries</h3>
      <div class="[span 7@md 6@lg]">
        <pre class="[style red@sm blue@md green@lg]">&lt;div class="<span class="highlight">hidden@sm [span 2@md 4@md 8@lg]</span>"&gt;&lt;/div&gt;</pre>
        <small>Outputs: <pre>&lt;div class="hidden-sm span-2-md span-4-md span-8-lg"&gt;&lt;/div&gt;</pre></small>
      </div>
    </section>
​
    <h2 class="[text uppercase close]"><span>Customise</span></h2>
    <small class="[text uppercase compact center]">(Coming soon)</small>
    <section>
      <h3 class="[span 3@md 4@lg]">Input</h3>
      <div class="[span 7@md 6@lg]">
        <pre class="[style red@sm blue@md green@lg]">&lt;div class="<span class="highlight">sm:hidden | span md:2 lg:4</span>"&gt;&lt;/div&gt;</pre>
        <small>Customise the syntax to your own tastes using regular expressions.</small>
      </div>
    </section>
​
    <section>
      <h3 class="[span 3@md 4@lg]">Output</h3>
      <div class="[span 7@md 6@lg]">
        <pre class="[style red@sm blue@md green@lg]">&lt;div class="<span class="highlight">sm__hidden md__span—2 lg__span-4</span>"&gt;&lt;/div&gt;</pre>
        <small>Change how Stylup outputs to conventional HTML class names to work with your own framework.</small>
      </div>
    </section>
    
    <h2 class="[text uppercase close]"><span>Feedback</span></h2>
    
    <p class="[text center]">If you have some feedback about Stylup I would love to hear from you. You can either raise  an issue on <a href="https://github.com/sevenupcan/stylup/issues">github</a> or send me a message on <a href="https://twitter.com/sevenupcan">twitter</a>.</p>
    
    <p class="Copyright [text center]">Copyright &copy; Gavin McFarland</p>
​
  </div>
​
  <script src="stylup.js"></script>
</body>
</html>
​
 
/* Reset */
​
body, h1, h2, h3, pre, p {
  margin: 0;
  padding: 0;
}
​
* {
  box-sizing: border-box;
}
​
body {
    font-family: Helvetica Neue, sans-serif;
    padding: 20px;
    font-size: 16px;
  background: white;
}
​
.Container {
  background: inherit;
}
​
.Container > * {
  max-width: 951px;
  margin-left: auto;
  margin-right: auto;
}
​
h1 {
  font-weight: 100;
  font-size: 3em;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 60px;
}
​
h2 {
  font-weight: 200;
  font-size: 20px;
  position: relative;
  text-align: center;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  margin-top: 80px;
  background: inherit;
}
​
h2::before {
  content: "";
  top: 50%;
  left: -20px;
  right: -20px;
  height: 1px;
  position: absolute;
  border-top: 1px solid rgba(0,0,0,0.2);
  z-index: 1;
}
​
h2 span {
  background: inherit;
  position: relative;
  z-index: 2;
  padding-left: 10px;
}
​
h3 {
  font-weight: normal;
  font-size: 1em;
  margin-top: 10px;
  margin-bottom: 20px;
}
​
p {
  font-weight: 200;
  letter-spacing: 1px;
  margin-top: 60px;
  margin-bottom: 40px;
}
​
pre {
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 26px 24px;
  font-family: Letter Gothic Std, menlo, monospace;
  font-size: 0.9em;
  overflow-x: scroll;
  margin-top: 10px;
  margin-bottom: 10px;
}
​
pre span {
  color: #4A90E2;
}
​
small {
  color: rgba(0,0,0,0.4);
  margin-top: 10px;
  font-size: 0.8em;
  display: block;
}
​
small pre {
  font-family: Andale Mono, menlo, monospace;
  font-size: 13px;
  padding: 0;
  border: none;
  display: inline;
  letter-spacing: -1px;
  word-wrap: break-word;
  font-size: 1em;
}
​
section {
  margin-bottom: 60px;
  margin-top: 60px;
  overflow: hidden;
}
​
a {
  font-weight: bold;
  text-decoration: none;
  color: inherit;
}
​
.Button {
  /*border: 1px solid rgba(0,0,0,0.2);*/
  background-color: rgba(0,0,0,0.2);
  padding: 10px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 16px;
  color: white;
  display: table;
  width: 100px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 80px;
  font-weight: normal;
}
​
.Button:hover {
  background-color: rgba(0,0,0,0.4);
}
​
.Copyright {
  color: rgba(0,0,0,0.4);
  font-size: 0.8em;
}
​
.style-blue .highlight {
  color: #4A90E2;
}
​
.style-red .highlight {
  color: #FF5146;
}
​
.style-green .highlight {
  color: #61B800 ;
}
​
.text-underline {
  text-decoration: underline;
}
​
.text-strikethrough {
  text-decoration: line-through;
}
​
.text-uppercase {
  text-transform: uppercase;
}
​
.text-capitalize {
  text-transform: capitalize;
}
​
.text-uppercase {
  text-transform: uppercase;
}
​
.text-capitalize {
  text-transform: capitalize;
}
​
.text-close {
  letter-spacing: 10px;
}
​
.text-wide {
  letter-spacing: 26px;
  padding-left: 26px;
}
​
.text-center {
  text-align: center;
}
​
.span-1 {
  width: 10%;
}
​
.span-2 {
  width: 20%;
}
​
.span-3 {
  width: 30%;
}
​
.span-4 {
  width: 40%;
}
​
.span-5 {
  width: 50%;
}
​
.span-6 {
  width: 60%;
}
​
.span-7 {
  width: 70%;
}
​
.span-8 {
  width: 80%;
}
​
.span-9 {
  width: 90%;
}
​
.hidden {
  display: none;
}
​
/* small devices */
@media only screen and (max-width: 420px) {
​
  .span-1-sm {
    width: 10%;
    float: left;
  }
​
  .span-2-sm {
    width: 20%;
    float: left;
  }
​
  .span-3-sm {
    width: 30%;
    float: left;
  }
​
  .span-4-sm {
    width: 40%;
    float: left;
  }
​
  .span-5-sm {
    width: 50%;
    float: left;
  }
​
  .span-6-sm {
    width: 60%;
    float: left;
  }
​
  .span-7-sm {
    width: 70%;
    float: left;
  }
​
  .span-8-sm {
    width: 80%;
    float: left;
  }
​
  .span-9-sm {
    width: 90%;
    float: left;
  }
​
  .text-underline-sm {
    text-decoration: underline;
  }
​
  .text-strikethrough-sm {
    text-decoration: line-through;
  }
​
  .text-uppercase-sm {
    text-transform: uppercase;
  }
​
  .text-capitalize-sm {
    text-transform: capitalize;
  }
​
  .hidden-sm {
    display: none;
  }
​
  .style-blue-sm .highlight {
    color: #4A90E2;
  }
​
  .style-red-sm .highlight {
    color: #FF5146;
  }
​
  .style-green-sm .highlight {
    color: #61B800 ;
  }
}
​
@media only screen and (min-width: 421px) and (max-width: 950px) {
​
  body {
    font-size: 20px;
  }
​
  .span-1-md {
    width: 10%;
    float: left;
  }
​
  .span-2-md {
    width: 20%;
    float: left;
  }
​
  .span-3-md {
    width: 30%;
    float: left;
  }
​
  .span-4-md {
    width: 40%;
    float: left;
  }
​
  .span-5-md {
    width: 50%;
    float: left;
  }
​
  .span-6-md {
    width: 60%;
    float: left;
  }
​
  .span-7-md {
    width: 70%;
    float: left;
  }
​
  .span-8-md {
    width: 80%;
    float: left;
  }
​
  .span-9-md {
    width: 90%;
    float: left;
  }
​
  .style-blue-md .highlight {
    color: #4A90E2;
  }
​
  .style-red-md .highlight {
    color: #FF5146;
  }
​
  .style-green-md .highlight {
    color: #61B800 ;
  }
​
  .text-underline-md {
    text-decoration: underline;
  }
​
  .text-strikethrough-md {
    text-decoration: line-through;
  }
​
  .text-uppercase-md {
    text-transform: uppercase;
  }
​
  .text-capitalize-md {
    text-transform: capitalize;
  }
​
  .hidden-md {
    display: none;
  }
}
​
@media only screen and (min-width: 951px) {
​
  body {
    font-size: 20px;
  }
​
  .span-1-lg {
    width: 10%;
    float: left;
  }
​
  .span-2-lg {
    width: 20%;
    float: left;
  }
​
  .span-3-lg {
    width: 30%;
    float: left;
  }
​
  .span-4-lg {
    width: 40%;
    float: left;
  }
​
  .span-5-lg {
    width: 50%;
    float: left;
  }
​
  .span-6-lg {
    width: 60%;
    float: left;
  }
​
  .span-7-lg {
    width: 70%;
    float: left;
  }
​
  .span-8-lg {
    width: 80%;
    float: left;
  }
​
  .span-9-lg {
    width: 90%;
    float: left;
  }
​
  .style-blue-lg .highlight {
    color: #4A90E2;
  }
​
  .style-red-lg .highlight {
    color: #FF5146;
  }
​
  .style-green-lg .highlight {
    color: #61B800 ;
  }
​
  .text-underline-lg {
    text-decoration: underline;
  }
​
  .text-strikethrough-lg {
    text-decoration: line-through;
  }
​
  .text-uppercase-lg {
    text-transform: uppercase;
  }
​
  .text-capitalize-lg {
    text-transform: capitalize;
  }
​
  .hidden-lg {
    display: none;
  }
}
​
 
var token = {
    query: /@(\w+)\((.+?)\)/gmi,
    property: /\[([\w\-]+)\s([\w\s/!:@\-]+)\]/gmi,
    shortQuery: /([\w\-:/]+)@([\w!]+)/gmi,
    normal: /[\w\-/]+/gmi
};
​
var makeRegex = function() {
​
  var array = [];
​
  Object.keys(token).forEach(function(key) {
    array.push(token[key].source);
  });
​
  var regex = array.join("|");
​
  return new RegExp(regex, "gmi");
​
};
​
var split = function(input) {
        return input.match(makeRegex());
};
​
var parse = function(input) {
  var array, htmlClass, item, output, _i, _j, _a, _len, _len1, len2;
​
  array = split(input);
​
  output = [];
    
    _len = array.length;
​
​
  for (_i = 0; _i < _len; _i++) {
    item = array[_i];
​
    input = item;
​
    // 1.0
    if (input.match(token.query)) {
​
      input.replace(token.query, function(match, p1, p2) {
​
        var htmlClass, query;
        query = p1;
        input = p2;
​
        input = split(input);
​
        for(var _g = 0; _g < input.length; _g++) {
​
         // 1.1
         if (input[_g].match(token.property)) {
​
          input[_g].replace(token.property, function(match, p1, p2) {
            var htmlClass, values;
            htmlClass = p1;
            values = p2;
​
            values = split(values);
​
​
            for(var _z = 0; _z < values.length; _z++) {
​
              output.push({
                htmlClass: htmlClass,
                value: values[_z],
                query: query
              });
            }
          });
        }
​
        // 1.2
        else {
          output.push({
            htmlClass: input[_g],
            query: query
          });
        }
​
        }
​
      });
    }
​
    // 2.0
    else if (input.match(token.property)) {
​
      input.replace(token.property, function(match, p1, p2) {
        var htmlClass, values;
        htmlClass = p1;
        input = p2;
        input = split(input);
​
​
        for(var _d = 0; _d < input.length; _d++) {
​
          // 2.1
          if (input[_d].match(token.shortQuery)) {
            input[_d].replace(token.shortQuery, function(match, p1, p2) {
              var query, values;
              values = p1;
              query = p2;
              output.push({
                htmlClass: htmlClass,
                value: values,
                query: query
              });
            });
          }
​
          // 2.2
          else {
            output.push({
              htmlClass: htmlClass,
              value: input[_d]
            });
          }
        }
      });
    }
​
    // 3.0
    else if (input.match(token.shortQuery)) {
      input.replace(token.shortQuery, function(match, p1, p2) {
        var htmlClass, query;
        htmlClass = p1;
        query = p2;
        return output.push({
          htmlClass: htmlClass,
          query: query
        });
      });
    }
​
    // 4.0
    else {
      htmlClass = input;
      output.push({
        htmlClass: htmlClass
      });
    }
  }
​
  return render(output);
};
​
​
var render = function(input) {
  var output = [];
​
  for (var i = 0; i < input.length; i++) {
    var object = input[i];
​
    var array = [];
    for (var property in object) {
      if (object.hasOwnProperty(property)){
        array.push(object[property]);
      }
    }
​
    array = array.join("-");
    output.push(array);
  }
​
  return output.join(' ');
​
};
​
​
var stylup = function() {
  elementList = document.querySelectorAll("[class]");
​
  for (_i = 0, _len = elementList.length; _i < _len; _i++) {
    item = elementList[_i];
        
        item.className = parse(item.className);
​
    
  }
};
​
stylup();
​
​
​
// Just a fun experiment
​
var addStyle = function(css) {
  var head = document.head || document.getElementsByTagName('head')[0],
      style = document.createElement('style');
​
  style.type = 'text/css';
  
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  }
  
  else {
    style.appendChild(document.createTextNode(css));
  }
​
  head.appendChild(style);
};
​
var timeOfDay = function() {
  var date = new Date();
  var timeOfDay = date.getHours();
  
  if (timeOfDay < 12) {
    addStyle('.contrast-low-morning { background: #FFFBEF; color: #F1A200;} .contrast-high-morning { background: #6A6662; color: white; } .contrast-medium-morning { background: white;}');
  }
  else if ((timeOfDay >= 12) && (timeOfDay < 18)) {
    addStyle('.contrast-medium-afternoon { background: white;} .contrast-low-afternoon { background: #FFFBEF; color: #F1A200;} .contrast-high-afternoon { background: #6A6662; color: white; }');
  }
  else {
    addStyle('.contrast-low-evening { background: #FFFBEF; color: #F1A200;} .contrast-medium-evening { background: white;} .contrast-high-evening { background: #6A6662; color: white; }');
  }
  
  
};
​
timeOfDay();
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sevenupcanpro
0viewers