Stylesheets

You can write your stylesheets using the SCSS syntax.

This is a superset of CSS so you can also stick to standard CSS syntax

you can @import another partial stylesheet

name your partial with an underscore eg: _reset

then you can import it with eg:


 @import "reset";

Naming

Give your stylesheet a name myname and it will be at the path /stylesheets/myname in your site.

you can include it in your template with eg the following:


<link rel="stylesheet" href="/stylesheets/myname.css" type="text/css" >

Common resources

There are a number of common resources that you can use

css reset

from http://meyerweb.com/eric/tools/css/reset


 @import "common/reset";

normalize

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.


 @import "common/normalize";

animate.css

from https://daneden.github.io/animate.css/


 @import "common/animate";

compass

The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions.


 @import "common/compass";

bootstrap v3.3.7 / v5.3.2

the popular bootstrap framework


 $icon-font-path:"/static/bootstrap-3.3.7/fonts/";
 @import "common/bootstrap-3.3.7/bootstrap";

in your template you may have to include the javascript


 <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js" ></script>

or use the script link from the cdn.

foundation v6.2.4

the popular foundation framework


 @import "common/foundation-6.2.4/foundation2";
 @include foundation-everything;

in your template you may have to include the javascript


 <script src="/static/foundation-6.2.4/js/foundation.min.js" ></script>

bourbon

bourbon contains useful mixins


 @import "common/bourbon-4.2.7/bourbon";

neat

neat has mixins for a responsive grid


 @import "common/neat-1.8.0/neat";

concise

consise is a compact framework


 @import "common/concise-4.0.1/concise";

susy

susy Your markup, your design, your opinions | our math.


 @import "common/susy-2.2.12/susy";

neutron

neutron is a Sass framework that empowers you to create flexible, clear, and semantic website layouts.


 @import "common/neutron-0.9.1/neutron";

breakpoint

breakpoint makes writing media queries in Sass super simple.


 @import "common/breakpoint-2.7.0/breakpoint";

groundwork

groundwork Responsive Design Made Easy


 @import "common/groundwork-2.5.0/groundwork";

slicknav

slicknav.. get started with mobile awesomeness

for a themed css ..



 @import "common/slicknav-1.0.10/slicknav";

 .slicknav_menu {
	display:none;
 }

 @media screen and (max-width: 800px) {
	.js #standard-menu{
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
  }

or just for the basic css which you can then style yourself ..


 @import "common/slicknav-1.0.10/core";

and then you will need some html something like ..


        .
        .
        <div id="mobile-menu"></div>
        <div id="standard-menu">
             {% menu %}
        </div>
        .
        .
        .
        <script src="https://secure.parkaa.com/assets/javascript/jquery-1.12.3.min.js"></script>
        <script src="https://secure.parkaa.com/assets/javascript/jquery.slicknav-1.0.10.min.js"></script>
        <script>
          $('html').addClass("js");
          $('#standard-menu').slicknav({prependTo:"#mobile-menu"});
        </script>