fix wordwrapping bug and added notification elements

README.md

@@ -1,6 +1,8 @@
 # steevcss
 my own collection of html, css and javascript code combined to a webframework
-1. GridSystem 24 Elemente
+
+## Feature List
+1. GridSystem 12 Elemente [Implemented]
 2. Code Preview
 3. SlideShow
 4. Navigations [Implemented]
@@ -14,4 +16,11 @@ my own collection of html, css and javascript code combined to a webframework
 12. general styled images (rounded borders)
 13. Dropdowns
 14. colored sections (a full length area with defined background-color)
-15. Alert Sections (Sections colored as their meaning with text inside)
+15. Alert Sections [Implemented]
+
+## Stuff i already found
+1. responsiveness is a bit messy
+2. images in navbar are completely messed up
+3. the colors may need a tweak
+4. mobile toggle button needs to be bigger
+5. revert back to standard font collection with verdana in it

dist/ef19487056b129c8f3eda17f9543ab70.css

@@ -10,43 +10,45 @@ body {
 main {
   z-index: 980;
   position: relative;
-  top: 5.5em; }
+  top: 5.5em;
+  width: 100%;
+  word-break: break-all; }
 
 h1 {
-  margin: 10px; }
+  margin: 0; }
 
 h2 {
-  margin: 10px; }
+  margin: 0; }
 
 h3 {
-  margin: 10px; }
+  margin: 0; }
 
 h4 {
-  margin: 10px; }
+  margin: 0; }
 
 h5 {
-  margin: 10px; }
+  margin: 0; }
 
 h6 {
-  margin: 10px; }
+  margin: 0; }
 
 h7 {
-  margin: 10px; }
+  margin: 0; }
 
 h8 {
-  margin: 10px; }
+  margin: 0; }
 
 h9 {
-  margin: 10px; }
+  margin: 0; }
 
 h10 {
-  margin: 10px; }
+  margin: 0; }
 
 h11 {
-  margin: 10px; }
+  margin: 0; }
 
 h12 {
-  margin: 10px; }
+  margin: 0; }
 
 .dev {
   border: 1px solid black; }
@@ -89,9 +91,65 @@ h12 {
   padding: 1rem;
   color: white; }
 
+.notification-primary {
+  width: 100%;
+  display: flex; }
+
+.notification-primary h2 {
+  border-right: 0.3rem solid #3498db;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-danger {
+  width: 100%;
+  display: flex; }
+
+.notification-danger h2 {
+  border-right: 0.3rem solid #e74c3c;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-warning {
+  width: 100%;
+  display: flex; }
+
+.notification-warning h2 {
+  border-right: 0.3rem solid #f1c40f;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-success {
+  width: 100%;
+  display: flex; }
+
+.notification-success h2 {
+  border-right: 0.3rem solid #2ecc71;
+  border-radius: 2px;
+  padding: 5px;
+  margin-right: 5px;
+  min-width: 70px;
+  height: auto;
+  display: flex; }
+
+.notification-body {
+  line-height: 30pt;
+  font-size: 15pt;
+  word-wrap: break-word; }
+
 div[class^="col-"] {
-  padding: 1rem 0;
+  padding: 1rem 0; }
-  text-align: center; }
 
 .row {
   display: flex;

dist/ef19487056b129c8f3eda17f9543ab70.js

@@ -149,7 +149,7 @@ function Module() {
 module.bundle.Module = Module;
 
 if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
-  var ws = new WebSocket('ws://localhost:63342/');
+  var ws = new WebSocket('ws://localhost:50893/');
   ws.onmessage = function(event) {
     var data = JSON.parse(event.data);
 

dist/index.html

@@ -31,6 +31,26 @@
                 <div class="alert-warning"> test </div>
                 <div class="alert-success"> test </div>
                 <br>
+                <h1 style="text-align: center;">Alert Elements</h1>
+                <div class="notification-primary"> 
+                    <h2 class="notification-primary-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-danger"> 
+                    <h2 class="notification-danger-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-warning"> 
+                    <h2 class="notification-warning-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-success"> 
+                    <h2 class="notification-success-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
                 <h1 style="text-align: center;">CSS Grid</h1>
                 <div class="row">
                     <div class="col-12 display"><h1>12</h1></div>

src/index.html

@@ -31,6 +31,26 @@
                 <div class="alert-warning"> test </div>
                 <div class="alert-success"> test </div>
                 <br>
+                <h1 style="text-align: center;">Alert Elements</h1>
+                <div class="notification-primary"> 
+                    <h2 class="notification-primary-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-danger"> 
+                    <h2 class="notification-danger-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-warning"> 
+                    <h2 class="notification-warning-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
+                <br>
+                <div class="notification-success"> 
+                    <h2 class="notification-success-head">ein kleiner test satz</h2>
+                    <span class="notification-body">Funktion test des objektes</span>
+                </div>
                 <h1 style="text-align: center;">CSS Grid</h1>
                 <div class="row">
                     <div class="col-12 display"><h1>12</h1></div>

src/scss/main.sass

@@ -24,10 +24,13 @@ main
   z-index: 980
   position: relative
   top: 5.5em
+  width: 100%
+  word-break: break-all
+
 // header classes margin fix
 @for $i from 1 through 12
      h#{$i}
-       margin: 10px
+       margin: 0
 // Dev Classes
 .dev
   border: 1px solid black
@@ -65,10 +68,57 @@ main
   border: 1px solid $success_dark
   padding: 1rem
   color: white
+.notification-primary
+  width: 100%;
+  display: flex
+.notification-primary h2
+  border-right: 0.3rem solid $primary
+  border-radius: 2px
+  padding: 5px
+  margin-right: 5px;
+  min-width: 70px
+  height: auto
+  display: flex
+.notification-danger
+  width: 100%;
+  display: flex
+.notification-danger h2
+  border-right: 0.3rem solid $danger
+  border-radius: 2px
+  padding: 5px
+  margin-right: 5px;
+  min-width: 70px
+  height: auto
+  display: flex
+.notification-warning
+  width: 100%;
+  display: flex
+.notification-warning h2
+  border-right: 0.3rem solid $warning
+  border-radius: 2px
+  padding: 5px
+  margin-right: 5px;
+  min-width: 70px
+  height: auto
+  display: flex
+.notification-success
+  width: 100%;
+  display: flex
+.notification-success h2
+  border-right: 0.3rem solid $success
+  border-radius: 2px
+  padding: 5px
+  margin-right: 5px;
+  min-width: 70px
+  height: auto
+  display: flex
+.notification-body
+  line-height: 30pt
+  font-size: 15pt
+  word-wrap: break-word
 // Grid
 div[class^="col-"]
   padding: 1rem 0
-  text-align: center
 .row
   display: flex
   flex-wrap: wrap