Enhancement. New Release. 2.1.0

README.md

@@ -29,5 +29,15 @@ NPM
   `<link rel="stylesheet" href="skeleton-plus/skeleton.plus.css">`
 
 
+# Development
+
+Install all Dependencies :
+
+`$ npm install gulp -g && npm install`
+
+Start gulp-watch:
+
+`$ gulp sass:watch`
+
 # Example Page
 http://oltmannsdaniel.github.io/skeleton-plus

css/skeleton.plus.css

@@ -701,6 +701,35 @@ Media Queries
 /* Larger than tablet */
 /* Larger than desktop */
 /* Larger than Desktop HD */
+.callout {
+  position: relative;
+  padding: 15px;
+  margin: 10px 0;
+  border: 1px solid #c1c1c1;
+  border-radius: 4px; }
+  .callout.danger {
+    background-color: #F44336;
+    border-color: #F44336;
+    color: #FFF; }
+  .callout.success {
+    background-color: #8BC34A;
+    border-color: #8BC34A;
+    color: #FFF; }
+  .callout.warning {
+    background-color: #FFA726;
+    border-color: #FFA726;
+    color: #FFF; }
+  .callout.primary {
+    background-color: #1EAEDB;
+    border-color: #1EAEDB;
+    color: #FFF; }
+  .callout.full-width {
+    width: 100%; }
+  .callout.half-width {
+    width: 50%; }
+  .callout.auto-width {
+    width: auto; }
+
 /*
 Other Elements
 */

gulpfile.js

@@ -0,0 +1,21 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
+var cleanCSS = require('gulp-clean-css');
+var banner = require('gulp-banner');
+
+gulp.task('sass', function () {
+  return gulp.src('./sass/style.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(autoprefixer({
+      browsers: ['last 2 versions'],
+      cascade: false
+    }))
+    .pipe(cleanCSS({compatibility: 'ie8'}))
+    .pipe(banner('/* skeleton-plus <https://github.com/oltmannsdaniel/skeleton-plus> , Copyright 2016, Daniel Oltmanns <daniel@thedcdesigns.com> */\n', {}))
+    .pipe(gulp.dest('./public/css'));
+});
+
+gulp.task('sass:watch', function () {
+  gulp.watch('./sass/**/*.scss', ['sass']);
+});

index.html

@@ -315,6 +315,25 @@ <h3>Tables</h3>
           </tbody>
         </table>
       </section>
+      <section id="callout">
+        <h3>Callouts</h3>
+        <p>Here you have some amazing Callouts for your Website.</p>
+        <div class="callout">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim aliquid reprehenderit autem nostrum commodi facilis odio veritatis libero delectus inventore, molestias sed tempora laudantium sapiente illo, explicabo officia officiis fugiat.</p>
+        </div>
+        <div class="callout danger">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim aliquid reprehenderit autem nostrum commodi facilis odio veritatis libero delectus inventore, molestias sed tempora laudantium sapiente illo, explicabo officia officiis fugiat.</p>
+        </div>
+        <div class="callout warning">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim aliquid reprehenderit autem nostrum commodi facilis odio veritatis libero delectus inventore, molestias sed tempora laudantium sapiente illo, explicabo officia officiis fugiat.</p>
+        </div>
+        <div class="callout primary">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim aliquid reprehenderit autem nostrum commodi facilis odio veritatis libero delectus inventore, molestias sed tempora laudantium sapiente illo, explicabo officia officiis fugiat.</p>
+        </div>
+        <div class="callout success">
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim aliquid reprehenderit autem nostrum commodi facilis odio veritatis libero delectus inventore, molestias sed tempora laudantium sapiente illo, explicabo officia officiis fugiat.</p>
+        </div>
+      </section>
       <section id="navbar">
         <h3>Navbar</h3>
         <p>Specially and only included is the Navbar in Skeleton plus. <b>Example is on the top.</b></p>

package.json

@@ -1,22 +1,29 @@
 {
-	"name": "skeleton-plus",
-	"version": "2.0.0",
-	"description": "This is an Plus Version of Skeleton.css and PURE css http://oltmannsdaniel.github.io/skeleton-plus",
-	"author": "Daniel Oltmanns <https://github.com/oltmannsdaniel>",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/oltmannsdaniel/skeleton-plus"
-	},
-	"keywords": [
-		"skeleton", "skeleton-plus", "boilerplate", "simple", "css"
-	],
+  "name": "skeleton-plus",
+  "version": "2.1.0",
+  "description": "This is an Plus Version of Skeleton.css and PURE css http://oltmannsdaniel.github.io/skeleton-plus",
+  "author": "Daniel Oltmanns <https://github.com/oltmannsdaniel>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oltmannsdaniel/skeleton-plus"
+  },
+  "keywords": [
+    "skeleton",
+    "skeleton-plus",
+    "boilerplate",
+    "simple",
+    "css"
+  ],
   "devDependencies": {
-    "node-sass": "^3.4.2",
-    "nodemon": "^1.9.1"
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-banner": "^0.1.3",
+    "gulp-clean-css": "^2.0.12",
+    "gulp-sass": "^2.3.2"
   },
   "scripts": {
-	  "build-css": "node-sass --include-path scss scss/main.scss css/skeleton.plus.css && node-sass --include-path scss scss/main.scss css/skeleton.plus.min.css --output-style compressed",
-	  "watch-css": "nodemon -e scss -x \"npm run build-css\""
-	},
-	"license": "MIT"
-}
+    "build-css": "gulp sass",
+    "watch-css": "gulp sass:watch"
+  },
+  "license": "MIT"
+}

scss/_callouts.scss

@@ -0,0 +1,37 @@
+.callout{
+  position: relative;
+  padding: 15px;
+  margin: 10px 0;
+  border: 1px solid #c1c1c1;
+  border-radius: 4px;
+
+  &.danger{
+    background-color: $danger;
+    border-color: $danger;
+    color: $default;
+  }
+  &.success{
+    background-color: $success;
+    border-color: $success;
+    color: $default;
+  }
+  &.warning{
+    background-color: $warning;
+    border-color: $warning;
+    color: $default;
+  }
+  &.primary{
+    background-color: $primary;
+    border-color: $primary;
+    color: $default;
+  }
+  &.full-width{
+    width: 100%;
+  }
+  &.half-width{
+    width: 50%;
+  }
+  &.auto-width{
+    width: auto;
+  }
+}

scss/_variables.scss

@@ -3,4 +3,5 @@ $danger: #F44336;
 $warning: #FFA726;
 $muted: #bbb;
 $primary: #1EAEDB;
-$white: #FFF;
+$white: #FFF;
+$default: $white;

scss/main.scss

@@ -30,4 +30,6 @@
 
 @import 'utilities';
 
-@import 'other';
+@import 'callouts';
+
+@import 'other';