Getting Started

QUEENS is a quick to understand easy everything no-nonsense styling system to create websites that look great.

Before Download

You should know how to write basic HTML.

Inside the Downloaded File

QUEENS includes a CSS folder and a SASS folder. A CSS file is a cascading style sheet, it tells your website how it should look - the colors, the fonts, and more. By linking your HTML webpage to queens.css you can begin building a website that looks great. If you would like to customize the QUEENS styling to meet your personal preference, use the SASS folder to update styling.

How to Download QUEENS

Click this link: Download QUEENS

How to Connect the Stylesheet to your HTML

Begin with an HTML document in the text editor of your choice. In the head portion, connect to queens.css and the script for the mobile navigation.

HTML Example
    <head>
        <link rel="stylesheet" href="path/to/queens.css">
        <script>
            /* Mobile Nav Method From https://www.w3schools.com/howto/howto_js_off-canvas.asp */
            function openNav() {
                document.getElementById("mobile-navigation").style.width = "75%";
            }
        </script>
    </head>                          
                           

How to Use the SASS Files to Customize QUEENS

To adjust the styling of queens.css, open the SASS folder. Different styles are separated by type. Most style changes can be accomplished by updating the _variables.scss. This file includes fonts and colors. To change a style, simply change the value of that variable and then compile queens.scss to queens.css by using a SASS compiler. More advanced styling changes are editable through the _layout.scss, _style.scss, and _base.scss. Layout includes the grid, navigation, and responsive systems. Style includes the font, color, button, form, and container systems.