Goldilocks-CSS works without a package manager or dependencies! For this beta phase, there are currently 2 ways to get started with Goldilocks-CSS: download from Github or use a CDN.

Install manually

Download Goldilocks-CSS files from Github (use link in navbar) and link one of the following files into the head of your website:

Core includes Layouts, Common Elements and Helpers

<link rel="stylesheet" media="screen" href="./dist/goldilocks.core.min.css">

Core Plus Popular Add-on Elements and Components

<link rel="stylesheet" media="screen" href="./dist/goldilocks.core-extended.min.css">

Core and Extended Items Plus Secondary Add-on Elements and Components

<link rel="stylesheet" media="screen" href="./dist/goldilocks.all.min.css">

Install from CDN

Alternatively, you can use jsdelivr CDN to link to Goldilocks-CSS. Use only one link for the package that you need.

<link rel="stylesheet" media="screen" href="https://cdn.jsdelivr.net/gh/zaphodbb-pm/goldilocks-css/dist/goldilocks.core.min.css">

<link rel="stylesheet" media="screen" href="https://cdn.jsdelivr.net/gh/zaphodbb-pm/goldilocks-css/dist/goldilocks.core-extended.min.css">

<link rel="stylesheet" media="screen" href="https://cdn.jsdelivr.net/gh/zaphodbb-pm/goldilocks-css/dist/goldilocks.all.min.css">

Starter HTML template

An example starter template that sets up the basic page structure. This typical for Github Pages use with the Jekyll template language. 


            <!doctype html>
            <html class="no-js" lang="en">
                <head>
                    <meta charset="utf-8">
                    <title>Installations for Goldilocks CSS</title>
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <meta name="description" content="Goldilocks-CSS is a lightweight CSS framework based on grid that is HTML5 and CSS3 standards compliant.
                    It is 100% responsive, fully modular, no javascript required and available for free on an MIT license.">

                    <link rel="icon" type="image/png" href="https://zaphodbb-pm.github.io/goldilocks-css/favicon.png">
                    <link rel="stylesheet" media="screen" href="https://cdn.jsdelivr.net/gh/zaphodbb-pm/goldilocks-css/dist/goldilocks.all.min.css">
                </head>

                <body>
                    <div id="page-top" class="page-wrapper">

                        <div class="page-main-nav">
                            <div class="navbar is-primary has-sidebar" role="region" aria-label="Main Navbar">
                                <div class="navbar-left">
                                    <!--add your own logo -->
                                    <a href="https://zaphodbb-pm.github.io/goldilocks-css/home.html">
                                        <img src="https://zaphodbb-pm.github.io/goldilocks-css/img/logo.png" height="192" width="192" alt="Project Logo">
                                    </a>
                                </div>

                                <div class="navbar-center" >
                                    <!-- add your main page links here -->
                                    <nav aria-label="Primary links">
                                        <ul>
                                            <li>
                                                <a class="icon-nav" href="https://github.com/zaphodbb-pm/goldilocks-css/page-one">
                                                    <span class="icon-bg-bookmark"></span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>

                                <div class="navbar-right">
                                    <!-- add your links here -->
                                    <nav aria-label="Secondary actions">
                                        <ul>
                                            <li>
                                                <a class="icon-nav" href="https://github.com/zaphodbb-pm/goldilocks-css" rel="nofollow" aria-label="link to github two">
                                                    <span class="icon-bg-github"></span>
                                                </a>
                                            </li>
                                            <li>
                                                <a class="button is-secondary has-hover" href="#page-top">
                                                    <span>Top</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>

                        <!-- include heading and main content -->
                        <header class="page-header">
                            <h1>Installations</h1>
                        </header>

                        <main class="main-content">
                            Content
                        </main>

                        <footer class="page-footer"></footer>
                    </div>

                </body>
            </html>