diff --git a/ts/domtools.css.ts b/ts/domtools.css.ts
new file mode 100644
index 0000000..89f30ef
--- /dev/null
+++ b/ts/domtools.css.ts
@@ -0,0 +1,7 @@
+export const cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number) => {
+  let returnString = ``;
+  for (let i = 0; i < amountOfColumnsArg; i++) {
+    returnString += ` calc((100%/${amountOfColumnsArg}) - (${gapSizeArg * (amountOfColumnsArg - 1)}px/${amountOfColumnsArg}))`;
+  }
+  return returnString;
+};
diff --git a/ts/domtools.elementbasicsetup.ts b/ts/domtools.elementbasicsetup.ts
index 6cfcd2d..c76db52 100644
--- a/ts/domtools.elementbasicsetup.ts
+++ b/ts/domtools.elementbasicsetup.ts
@@ -1,5 +1,12 @@
 import { defer } from '@pushrocks/smartpromise';
 
+const createStyleElement = (headElement: HTMLElement, styleText: string) => {
+  const styleElement = document.createElement('style');
+  styleElement.type = 'text/css';
+  styleElement.appendChild(document.createTextNode(styleText));
+  headElement.appendChild(styleElement);
+};
+
 /**
  * a basic setup for elements
  * makes sure everything is in check
@@ -30,8 +37,18 @@ export const elementBasicSetup = async () => {
     const head = document.querySelector('head');
     const body = document.querySelector('body');
 
+    // bodyStyles
+    const bodyStyles = `
+      body {
+        margin: 0px;
+        font-family: 'Roboto', sans-serif;
+        box-sizing: border-box;
+      }
+    `;
+    createStyleElement(head, bodyStyles);
+
     // material font
-    const materialFontCss = `
+    const materialFontStyles = `
       @font-face {
         font-family: 'Material Icons';
         font-style: normal;
@@ -39,11 +56,13 @@ export const elementBasicSetup = async () => {
         src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
       }
     `;
-    const styleElement = document.createElement('style');
-    styleElement.type = 'text/css';
-    styleElement.appendChild(document.createTextNode(materialFontCss));
-    head.appendChild(styleElement);
+    createStyleElement(head, materialFontStyles);
 
+    // Roboto Font
+    const robotoFontCss = `
+      @import url('https://fonts.googleapis.com/css?family=Roboto');
+    `;
+    createStyleElement(head, robotoFontCss);
 
     globalThis.deesCssToolsReady.resolve();
   }
diff --git a/ts/index.ts b/ts/index.ts
index c17dc38..3daa08e 100644
--- a/ts/index.ts
+++ b/ts/index.ts
@@ -2,7 +2,9 @@ export * from './domtools.elementbasicsetup';
 export * from './domtools.elementbasicstyles';
 
 import * as breakpoints from './domtools.breakpoints';
+import * as css from './domtools.css';
 
 export {
+  css,
   breakpoints
 };