sass-director/index.html at gh-pages · una/sass-director · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sass Director</title>
  <style>@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic);@import url(http://fonts.googleapis.com/css?family=Fjalla+One);body,fieldset,form,html,legend,li,ol,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p{margin-top:0}fieldset,img{border:0}legend{color:#000}li{list-style:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}table{border-collapse:collapse;border-spacing:0}caption,td,th{text-align:left;vertical-align:top;font-weight:400}input,select,textarea{font-size:110%;line-height:1.1}abbr,acronym{border-bottom:.1em dotted;cursor:help}*,:after,:before{margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html{-webkit-font-smoothing:antialiased;height:100%}body{font-family:"Carrois Gothic",sans-serif;font-weight:400;padding:2em 10% 4em;max-width:1000px;margin:0 auto;background:#eef0f0;min-height:100%;position:relative}h1,h2,h3{font-family:"Fjalla One",serif;font-weight:700}h1{font-size:3.5em;margin-bottom:.25em;color:#5ab1bb}h2{color:#4e6766;font-family:"Carrois Gothic",sans-serif;text-transform:uppercase;font-size:.9em;letter-spacing:2px}.subtitle{margin:-.8em 0 2em}p{line-height:1.5}a,button{transition:.3s;-webkit-transition:.3s;-moz-transition:.3s}a{color:#c69}a:focus,a:hover{color:#ddabc4}header{text-align:center}label{color:#5ab1bb;text-transform:uppercase;font-weight:800;width:100%;display:block;margin:1em 0 .5em}input[type=radio]{background-color:transparent;border:.15em solid #5ab1bb;border-radius:50%;box-shadow:inset 0 0 0 0 #dee2e2;cursor:pointer;font:inherit;height:1em;outline:0;width:1em;-moz-appearance:none;-webkit-appearance:none;vertical-align:middle;margin-right:.25em;margin-left:.6em}input[type=radio]:checked{background-color:#5ab1bb;box-shadow:inset 0 0 0 .1875em #eef0f0;-webkit-transition:background .15s,box-shadow .1s;transition:background .15s,box-shadow .1s}radiogroup{margin-bottom:1em;display:inline-block}.check-area{display:inline-block;margin-bottom:1em}input[type=checkbox]{background-color:transparent;border:.15em solid #5ab1bb;box-shadow:inset 0 0 0 0 #dee2e2;cursor:pointer;font:inherit;height:1em;outline:0;width:1em;-moz-appearance:none;-webkit-appearance:none;vertical-align:middle;margin-right:.25em;margin-left:.6em}input[type=checkbox]:checked{background-color:#5ab1bb;box-shadow:inset 0 0 0 .1875em #eef0f0;-webkit-transition:background .15s,box-shadow .1s;transition:background .15s,box-shadow .1s}button[type=submit]{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:#5ab1bb;border:none;cursor:pointer;display:block;font-family:"Carrois Gothic",sans-serif;font-size:1em;font-weight:800;margin:0 auto 1em;outline:0;padding:.5em;text-transform:uppercase;width:100%}button[type=submit]:focus,button[type=submit]:hover{background:#569aa1}textarea{border:none;outline:#5ab1bb solid 2px;background:#dee2e2;padding:1em;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:5.625em;max-height:12.5em;font-family:monospace;width:100%}.logo{transform:rotate(5deg);max-width:145px}.half{width:50%;float:left;display:block;padding:2.5%}@media (max-width:750px){.half{width:100%}}.notice{margin-top:1em;display:block}.container{position:relative}footer{position:absolute;height:2.5em;right:0;bottom:0;left:0;text-align:center}.clear{clear:both}.example-list li{float:left;outline:lightgrey solid 1px;padding:1em;margin:1em 1em 0 0}.example-list pre{background:#fff;padding:1em;margin-top:1em}</style>
  <meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
  <header>
    <a href="http://una.github.io/sass-director"><img class="logo" src="sass-director.svg" alt="Sass Director Logo"></a>
    <h1>Sass Director</h1>
    <h2 class="subtitle">For directing Sass directories</h2>
  </header>

  <p>Just sort out your Sass project architecture in a Sass manifest file (i.e. main.scss) or use an example from the <a href="examples/index.html">showcase</a>. Then, in your terminal, within the same directory as (only your) manifest file, paste the output generated below. It will quickly build all of your directories and files. Check out the <a href="http://github.com/una/sass-director">docs</a> for the <strong>node module</strong>, or this blog <a href="http://una.github.io/sass-manifests">post</a> for more information!</p>

  <form action="javascript:doTheThing()" class="half">
    <label for="text-input">1. Paste Sass Manifest file:</label>
    <textarea id="input-text" type="textfield" name="input-text"></textarea>

    <radiogroup>
      <label for="extension">2. Select Options:</label>
      <input type="radio" name="extension" value=".scss" checked />.scss
      <input type="radio" name="extension" value=".sass" />.sass
    </radiogroup>

    <div class="check-area">
        <input type="checkbox" name="underscore" value="_" checked /> Prefix files with "_"
    </div>

    <button type="submit">3. Submit</button>
  </form>

  <div class="half">
    <label for="output-text">4. Use terminal command:</label>
    <textarea id="output-text" type="textfield" name="output-text" onclick="this.select()"></textarea>
  </div>

  <div class="clear"></div>
</div>

<p>You can now install Sass Director as a <strong>Plugin for Sublime Text (2 or 3)</strong>. The easiest way to install it is with <a href="https://packagecontrol.io/packages/Sass-Director">Package Control</a> inside of the text editor. Simply search for `Sass Director`.</p>

<footer>
  Made with love by <a href="http://una.github.io">Una</a> | View the <a href="http://github.com/una/sass-director">Github repo</a>
</footer>

<script async src="scripts.js" type="text/javascript"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-36758177-6', 'auto');
  ga('send', 'pageview');

</script>
</body>
</html>