diff --git a/README.md b/README.md
index 6d9bf07..cf5f660 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-HTML utilities and SSG in Nix. Checkout [examples](./examples).
+CSS, HTML utilities and SSG in Nix. Checkout [examples](./examples).
 
 ## Examples
 
diff --git a/css.nix b/css.nix
new file mode 100644
index 0000000..1a3756c
--- /dev/null
+++ b/css.nix
@@ -0,0 +1,20 @@
+{ utils }:
+let
+  inherit (utils) mapAttrsToList concatStringsSep isList toString map;
+
+  evalCssValue = value: if isList value then concatStringsSep ", " (map toString value) else toString value;
+  evalInner = inner: concatStringsSep "\n" (mapAttrsToList (name: value: "${name}: ${evalCssValue value};") inner);
+  css = maybeAttrs:
+    if isList maybeAttrs
+    then concatStringsSep "\n" maybeAttrs
+    else concatStringsSep "\n" (mapAttrsToList (name: inner: "${name} {\n${evalInner inner}\n}") maybeAttrs);
+in
+{
+  inherit css;
+
+  media = rule: inner: ''
+    @media (${rule}) {
+        ${css inner}
+    }
+  '';
+}
diff --git a/examples/site.nix b/examples/site.nix
new file mode 100644
index 0000000..49b5d9b
--- /dev/null
+++ b/examples/site.nix
@@ -0,0 +1,19 @@
+{ pkgs, lib }:
+let
+  inherit (pkgs) htmlNix;
+  src = ./site;
+in
+htmlNix.mkServeFromSite (htmlNix.mkSiteFrom {
+  inherit src;
+  templater = context: pkgs.lib.pipe context [
+    lib.templaters.basic
+    ({ site, mkPage, ... }@result: {
+      site = site // {
+        "about.html" = with lib.tags; mkPage [
+          (h1 "About")
+          (p "testy test test")
+        ];
+      };
+    })
+  ];
+})
diff --git a/examples/site/config.toml b/examples/site/config.toml
index 4494163..cde8656 100644
--- a/examples/site/config.toml
+++ b/examples/site/config.toml
@@ -1,5 +1,6 @@
 title = "test site"
 
 [pages]
+index = "index.html"
 about = "about.html"
 test = "404.html"
\ No newline at end of file
diff --git a/flake.nix b/flake.nix
index dbec502..97b6805 100644
--- a/flake.nix
+++ b/flake.nix
@@ -11,6 +11,7 @@
 
         lib = {
           tags = import ./tags.nix { inherit utils; };
+          css = import ./css.nix { inherit utils; };
 
           templaters = {
             basic = import ./templaters/basic.nix;
@@ -18,14 +19,14 @@
         };
 
         pkgsLib = (final: prev: {
-          htmlNix = import ./pkgs-lib.nix { pkgs = prev; utils = utils // { inherit (lib) tags; }; };
+          htmlNix = import ./pkgs-lib.nix { pkgs = prev; utils = utils // { inherit (lib) tags css; }; };
         });
 
         pkgs = import nixpkgs { inherit system; overlays = [ pkgsLib ]; };
       in
       {
         lib = lib // {
-          pkgsLib = import ./pkgs-lib.nix { inherit pkgs; utils = utils // { inherit (lib) tags; }; };
+          pkgsLib = import ./pkgs-lib.nix { inherit pkgs; utils = utils // { inherit (lib) tags css; }; };
         };
 
         overlays = {
@@ -34,8 +35,7 @@
 
         apps = with flakeUtils.lib; {
           site = mkApp {
-            drv = let inherit (pkgs) htmlNix; in
-              htmlNix.mkServeFromSite (htmlNix.mkSiteFrom { src = ./examples/site; templater = lib.templaters.basic; });
+            drv = import ./examples/site.nix { inherit lib pkgs; };
             name = "serve";
           };
           basicServe = mkApp {
diff --git a/pkgs-lib.nix b/pkgs-lib.nix
index ab093b3..087bfd6 100644
--- a/pkgs-lib.nix
+++ b/pkgs-lib.nix
@@ -53,5 +53,5 @@ in
         posts = postsRendered;
       };
     in
-    templater context;
+    (templater context).site;
 }
diff --git a/templaters/basic.nix b/templaters/basic.nix
index 6d18e83..0399824 100644
--- a/templaters/basic.nix
+++ b/templaters/basic.nix
@@ -3,7 +3,7 @@ let
   inherit (utils) readFile mapAttrsToList tags fetchGit map;
   inherit (pkgs.lib) flatten optional length;
 
-  stylesheets = map tags.mkStylesheet [ "https://unpkg.com/purecss@2.0.6/build/pure-min.css" "https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" "css/mine.css" ];
+  stylesheets = map tags.mkStylesheet [ "https://unpkg.com/purecss@2.0.6/build/pure-min.css" "https://unpkg.com/purecss@2.0.6/build/grids-responsive-min.css" "mine.css" ];
 
   renderPost = name: value: with tags; article [
     (a { href = "#${name}"; class = "postheader"; } (h3 { id = name; } ("## " + name)))
@@ -15,9 +15,9 @@ let
       (name: relPath: tags.div { class = "pure-u-1"; } (tags.a { href = "./${relPath}"; class = "postheader"; } name))
       (config.pages or { });
 
-  postsSection = with tags; div { class = "posts"; } ([
+  postsSectionContent = with tags; [
     (a { href = "#posts"; class = "postheader"; } (h1 "# posts"))
-  ] ++ allPosts);
+  ] ++ allPosts;
 
   sidebarSection = optional ((length pages) > 0) (
     with tags; nav { class = "sidebar"; } ([
@@ -25,59 +25,68 @@ let
       (div { class = "pure-g"; } pages)
     ])
   );
-in
-{
-  "index.html" = with tags;
+
+  mkPage = content: with tags;
     html [
       (head (stylesheets ++ [
         (title config.title)
         (meta { name = "viewport"; content = "width=device-width, initial-scale=1"; })
       ]))
-      (body (sidebarSection ++ [ postsSection ]))
+      (body (sidebarSection ++ [ (div { class = "content"; } content) ]))
     ];
 
-  css = {
-    "mine.css" = ''
-      body {
-        font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-      }
-      code {
-        font-family: "Iosevka Term", "Iosevka", monospace;
-        background: #000000cc;
-        color: #eeeeee;
-      }
-      a.postheader,a.postheader:hover {
-        color: inherit;
-        text-decoration: none;
-      }
-      a.postheader:hover {
-        text-decoration: underline;
-      }
-      div.posts {
-        margin-top: 5%;
-        margin-bottom: 5%;
-        margin-left: 20%;
-        margin-right: 10%;
-      }
-      nav.sidebar {
-        position: fixed;
-        top: 0;
-        margin-left: 3%;
-        z-index: 1000;
-      }
-      @media (max-width: 48em) {
-          nav.sidebar {
-            position: relative;
-            margin-top: 5%;
-            margin-left: 0;
-            margin-right: 0;
-          }
-          div.posts {
-            margin-top: 0;
-            margin-left: 0;
-            margin-right: 0;
-          }
-      }
-    '';
+  stylesheet =
+    with utils.css;
+    css [
+      (css {
+        body = {
+          font-family = [ "Raleway" "Helvetica" "Arial" "sans-serif" ];
+        };
+        code = {
+          font-family = [ "Iosevka Term" "Iosevka" "monospace" ];
+          background = "#000000cc";
+          color = "#eeeeee";
+        };
+        "a.postheader,a.postheader:hover" = {
+          color = "inherit";
+          text-decoration = "none";
+        };
+        "a.postheader:hover" = {
+          text-decoration = "underline";
+        };
+        "div.content" = {
+          margin-top = "5%";
+          margin-bottom = "5%";
+          margin-left = "20%";
+          margin-right = "10%";
+        };
+        "nav.sidebar" = {
+          position = "fixed";
+          top = 0;
+          margin-left = "3%";
+          z-index = 1000;
+        };
+      })
+      (media "max-width: 48em" {
+        "nav.sidebar" = {
+          position = "relative";
+          margin-top = "5%";
+          margin-left = "3%";
+          margin-right = "3%";
+        };
+        "div.content" = {
+          margin-top = 0;
+          margin-left = "3%";
+          margin-right = "3%";
+        };
+      })
+    ];
+in
+{
+  inherit stylesheets sidebarSection mkPage stylesheet;
+
+  site = {
+    "index.html" = mkPage postsSectionContent;
+    "mine.css" = stylesheet;
   };
 }