Skip to content

Latest commit

 

History

History
81 lines (63 loc) · 2.29 KB

README.md

File metadata and controls

81 lines (63 loc) · 2.29 KB

WSS

WSS, or Website Style Scripts, is a little project I've made that can convert CSS (Allowing for nested elements, as how SCSS does it) into usable HTML.

This can create nearly any webpage in existence, and to prove so I've remade the Creative Tim Material Kit landing page example into CSS, which compiles to a perfect replica.

The CSS may be found here: landing-page.scss

And its compiled output here: landing-page.html

Here's another example input:

html {
    head {
        title {
            content: 'My Title'
        }
    }

    body {
        h1, #top {
            content: 'This Is A Title';
            background-color: green;
            html-title: 'The paragraph title';
        }

        p, .class1, .class2, #id {
            color: blue;
            content-0: 'Left paragraph ';

            a {
                content: 'followed by a';
                html-href: 'https://github.com/RubbaBoy/CSSWebsite';
            }

            content-2: ' right paragraph.';
            content-3: 'Some more content in the paragraph, featuring ';

            a {
                content: 'another link';
                html-href: 'https://github.com/RubbaBoy/CSSWebsite';
            }

            content-5: ' right about ';

            a {
                content: 'here';
                html-href: 'https://github.com/RubbaBoy/CSSWebsite';
            }

            content-7: '.';
        }
    }
}

The above output:

<html>
  <head>
    <title>My Title</title>
  </head>
  <body>
    <h1 id="top" title="The paragraph title" style="background-color: green;">This Is A Title</h1>
    <p id="id" class="class1 class2" style="color: blue;">
        Left paragraph 
      <a href="https://github.com/RubbaBoy/CSSWebsite">followed by a</a>
         right paragraph.
        Some more content in the paragraph, featuring 
      <a href="https://github.com/RubbaBoy/CSSWebsite">another link</a>
         right about 
      <a href="https://github.com/RubbaBoy/CSSWebsite">here</a>
        .
    </p>
  </body>
</html>