diff --git a/package-lock.json b/package-lock.json
index 03bd2c9..0b91279 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -264,8 +264,7 @@
     "@pushrocks/smartpromise": {
       "version": "3.0.6",
       "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartpromise/-/smartpromise-3.0.6.tgz",
-      "integrity": "sha512-vlQlBGNVIjfClgnsfgQBU6GIKcskYSFzEcKLt18ngPzPEcjKklXcxaqzLXpnoxR+KBh30QPE8255ncYHXuPPOg==",
-      "dev": true
+      "integrity": "sha512-vlQlBGNVIjfClgnsfgQBU6GIKcskYSFzEcKLt18ngPzPEcjKklXcxaqzLXpnoxR+KBh30QPE8255ncYHXuPPOg=="
     },
     "@pushrocks/smartrequest": {
       "version": "1.1.47",
@@ -953,6 +952,19 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "lit-element": {
+      "version": "2.3.1",
+      "resolved": "https://verdaccio.lossless.one/lit-element/-/lit-element-2.3.1.tgz",
+      "integrity": "sha512-tOcUAmeO3BzwiQ7FGWdsshNvC0HVHcTFYw/TLIImmKwXYoV0E7zCBASa8IJ7DiP4cen/Yoj454gS0qqTnIGsFA==",
+      "requires": {
+        "lit-html": "^1.1.1"
+      }
+    },
+    "lit-html": {
+      "version": "1.2.1",
+      "resolved": "https://verdaccio.lossless.one/lit-html/-/lit-html-1.2.1.tgz",
+      "integrity": "sha512-GSJHHXMGLZDzTRq59IUfL9FCdAlGfqNp/dEa7k7aBaaWD+JKaCjsAk9KYm2V12ItonVaYx2dprN66Zdm1AuBTQ=="
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://verdaccio.lossless.one/locate-path/-/locate-path-5.0.0.tgz",
diff --git a/package.json b/package.json
index 3bc9653..d0bf1f8 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,10 @@
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@pushrocks/smartpromise": "^3.0.6",
+    "lit-element": "^2.3.1"
+  },
   "files": [
     "ts/**/*",
     "ts_web/**/*",
diff --git a/test/test.ts b/test/test.ts
index 08d97eb..a8bda60 100644
--- a/test/test.ts
+++ b/test/test.ts
@@ -2,7 +2,7 @@ import { expect, tap } from '@pushrocks/tapbundle';
 import * as deesCsstools from '../ts/index';
 
 tap.test('first test', async () => {
-  console.log(deesCsstools.standardExport);
+  console.log('hi');
 });
 
 tap.start();
diff --git a/ts/csstools.breakpoints.ts b/ts/csstools.breakpoints.ts
new file mode 100644
index 0000000..ba37056
--- /dev/null
+++ b/ts/csstools.breakpoints.ts
@@ -0,0 +1,60 @@
+export const desktop = 1240;
+export const tablet = 700;
+export const phablet = 500;
+export const phone = 340;
+
+export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+
+let environment: TEnvironment = 'native';
+
+export const setEnvironment = envArg => {
+  environment = envArg;
+};
+
+export const cssForTablet = (contentArg) => {
+  if (environment === 'native' || environment === 'desktop') {
+    return `
+      @media (max-width: ${tablet}px) {
+        ${contentArg}
+      }
+    `;
+  } else if (environment === 'tablet' || environment === 'phablet' || environment === 'phone') {
+    return `
+      @media (min-width: 0px) {
+        ${contentArg}
+      }
+    `;
+  }
+};
+
+export const cssForPhablet = (contentArg) => {
+  if (environment === 'native' || environment === 'desktop') {
+    return `
+      @media (max-width: ${phablet}px) {
+        ${contentArg}
+      }
+    `;
+  } else if (environment === 'phablet' || environment === 'phone') {
+    return `
+      @media (min-width: 0px) {
+        ${contentArg}
+      }
+    `;
+  }
+};
+
+export const cssForPhone = (contentArg) => {
+  if (environment === 'native' || environment === 'desktop') {
+    return `
+      @media (max-width: ${phone}px) {
+        ${contentArg}
+      }
+    `;
+  } else if (environment === 'phone') {
+    return `
+      @media (min-width: 0px) {
+        ${contentArg}
+      }
+    `;
+  }
+};
diff --git a/ts/csstools.elementbasicsetup.ts b/ts/csstools.elementbasicsetup.ts
new file mode 100644
index 0000000..668c683
--- /dev/null
+++ b/ts/csstools.elementbasicsetup.ts
@@ -0,0 +1,14 @@
+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 {
+    globalThis.deesCssToolsReady = defer();
+    globalThis.deesCssToolsReady.resolve();
+  }
+};
diff --git a/ts/csstools.elementbasicstyles.ts b/ts/csstools.elementbasicstyles.ts
new file mode 100644
index 0000000..43ced74
--- /dev/null
+++ b/ts/csstools.elementbasicstyles.ts
@@ -0,0 +1,9 @@
+import { html } from 'lit-element';
+export const elementBasicStyles = html`
+  <style>
+    * {
+      font-family: 'Roboto', sans-serif;
+      box-sizing: border-box;
+    }
+  </style>
+`;
diff --git a/ts/dees-csstools.plugins.ts b/ts/dees-csstools.plugins.ts
deleted file mode 100644
index 29aa9da..0000000
--- a/ts/dees-csstools.plugins.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-const removeme = {};
-export { removeme };
diff --git a/ts/index.ts b/ts/index.ts
index 0d53688..df6fa3e 100644
--- a/ts/index.ts
+++ b/ts/index.ts
@@ -1,3 +1,8 @@
-import * as plugins from './dees-csstools.plugins';
+export * from './csstools.elementbasicsetup';
+export * from './csstools.elementbasicstyles';
 
-export let standardExport = 'Hi there! :) This is an exported string';
+import * as breakpoints from './csstools.breakpoints';
+
+export {
+  breakpoints
+};