1.0.11

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.7",
+  "version": "1.0.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.7",
+  "version": "1.0.11",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",

ts/csstools.elementbasicsetup.ts

@@ -1,44 +0,0 @@
-import { defer } from '@pushrocks/smartpromise';
-
-/**
- * a basic setup for elements
- * makes sure everything is in check
- */
-export const elementBasicSetup = async () => {
-  if (globalThis.deesCssToolsReady) {
-    await globalThis.deesCssToolsReady.promise;
-  } else {
-    // lets prevent double execution
-    globalThis.deesCssToolsReady = defer();
-
-    // lets make sure the dom is ready
-    const documentReady = defer();
-    document.onreadystatechange = () => {
-      if (document.readyState === 'interactive' || document.readyState === 'complete') {
-        documentReady.resolve();
-      }
-    };
-    await documentReady.promise;
-
-    // lets get started
-    const head = document.querySelector('head');
-    const body = document.querySelector('body');
-
-    // material font
-    const materialFontCss = `
-      @font-face {
-        font-family: 'Material Icons';
-        font-style: normal;
-        font-weight: 400;
-        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);
-
-
-    globalThis.deesCssToolsReady.resolve();
-  }
-};

ts/domtools.classes.domtools.ts

@@ -0,0 +1,5 @@
+export class DeesDomTools {
+  public static createDomTools = () => {
+    globalThis.deesDomTools = new DeesDomTools();
+  }
+}

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;
+};

ts/domtools.elementbasicsetup.ts

@@ -0,0 +1,69 @@
+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
+ */
+export const elementBasicSetup = async () => {
+  if (globalThis.deesCssToolsReady) {
+    await globalThis.deesCssToolsReady.promise;
+  } else {
+    // lets prevent double execution
+    globalThis.deesCssToolsReady = defer();
+
+    // lets make sure the dom is ready
+    const documentReady = defer();
+    const readyStateChangedFunc = () => {
+      if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        console.log('elementBasicSetup: element basic setup complete')
+        documentReady.resolve();
+      } else {
+        console.log('elementBasicSetup: document not yet ready');
+      }
+    };
+    document.addEventListener('readystatechange', readyStateChangedFunc);
+    console.log('elementBasicSetup: waiting for document to be ready');
+    await documentReady.promise;
+    console.log('elementBasicSetup: document ready!');
+
+    // lets get started
+    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 materialFontStyles = `
+      @font-face {
+        font-family: 'Material Icons';
+        font-style: normal;
+        font-weight: 400;
+        src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
+      }
+    `;
+    createStyleElement(head, materialFontStyles);
+
+    // Roboto Font
+    const robotoFontCss = `
+      @import url('https://fonts.googleapis.com/css?family=Roboto');
+    `;
+    createStyleElement(head, robotoFontCss);
+
+    globalThis.deesCssToolsReady.resolve();
+  }
+};

ts/index.ts

@@ -1,8 +1,10 @@
-export * from './csstools.elementbasicsetup';
-export * from './csstools.elementbasicstyles';
+export * from './domtools.elementbasicsetup';
+export * from './domtools.elementbasicstyles';
 
-import * as breakpoints from './csstools.breakpoints';
+import * as breakpoints from './domtools.breakpoints';
+import * as css from './domtools.css';
 
 export {
+  css,
   breakpoints
 };