Grunt

djveljko · Jul 2, 2015 · d206948 · d206948
1 parent 77cd96c
commit d206948
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 0 deletions.
diff --git a/Grunt/Gruntfile.js b/Grunt/Gruntfile.js
@@ -0,0 +1,29 @@
+module.exports = function(grunt) {
+
+    grunt.initConfig({
+
+        pkg: grunt.file.readJSON('package.json'),
+        cssmin: {
+            combine: {
+                files: {
+                    'html/css/main.css': ['html/css/content.css', 'html/css/sidebar.css']
+                }
+            }
+        },
+        uglify: {
+            dist: {
+                files: {
+                    'html/js/toggle.min.js': ['html/js/toggle.js']
+                }
+            }
+        }
+    });
+
+    // Load the plugins
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+
+    // Do the tasks
+    grunt.registerTask('default', ['cssmin', 'uglify']);
+
+};
diff --git a/Grunt/html/css/content.css b/Grunt/html/css/content.css
@@ -0,0 +1,9 @@
+h1{
+    color: lightseagreen;
+    font-size: 36px;
+}
+
+p{
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 20px;
+}
diff --git a/Grunt/html/css/sidebar.css b/Grunt/html/css/sidebar.css
@@ -0,0 +1,47 @@
+/* Sidebar */
+#sidebar-wrapper{
+    z-index: 1;
+    position: absolute;
+    width: 0;
+    height: 100%;
+    overflow-y: hidden;
+    background: #2C3E50;
+}
+
+/* Always take up entire screen */
+#page-content-wrapper{
+    width: 100%;
+    position: absolute;
+    padding: 15px;
+}
+
+/* Change with of sidebar from 0 to 250px */
+#wrapper.menuDisplayed #sidebar-wrapper{
+    width: 250px;
+}
+
+/* Since we added left padding, we need to shrink the width by 250px */
+#wrapper.menuDisplayed #page-content-wrapper{
+    padding-left: 250px;
+}
+
+/* Sidebar styling - the entire ul list */
+.sidebar-nav{
+    padding: 0;
+    list-style: none;
+}
+
+.sidebar-nav li{
+    text-indent: 20px;
+    line-height: 40px;
+}
+
+.sidebar-nav li a{
+    display: block;
+    text-decoration: none;
+    color: #ddd;
+}
+
+.sidebar-nav li a:hover{
+    background: #16A085;
+}
diff --git a/Grunt/html/index.html b/Grunt/html/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>thenewboston</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/main.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+</head>
+<body>
+
+    <div id="wrapper">
+
+        <!-- Sidebar -->
+        <div id="sidebar-wrapper">
+            <ul class="sidebar-nav">
+                <li><a href="#">Account</a></li>
+                <li><a href="#">Settings</a></li>
+                <li><a href="#">Logout</a></li>
+            </ul>
+        </div>
+
+        <!-- Page content -->
+        <div id="page-content-wrapper">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <a href="#" class="btn btn-success" id="menu-toggle">Toggle Menu</a>
+                        <h1>Welcome to thenewboston</h1>
+                        <p>I love apple pie. I love apple pie. I love apple pie. I love apple pie. I love apple pie.
+                            I love apple pie. I love apple pie. I love apple pie. I love apple pie. I love apple pie.
+                            I love apple pie. I love apple pie. I love apple pie. I love apple pie. I love apple pie.
+                            I love apple pie. I love apple pie. I love apple pie. I love apple pie. I love apple pie.
+                            I love apple pie. I love apple pie. I love apple pie. I love apple pie. I love apple pie. </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- Menu toggle script -->
+    <script src="js/toggle.js"></script>
+
+</body>
+</html>
diff --git a/Grunt/html/js/toggle.js b/Grunt/html/js/toggle.js
@@ -0,0 +1,12 @@
+$("#menu-toggle").click( function (e){
+    e.preventDefault();
+    $("#wrapper").toggleClass("menuDisplayed");
+});
+
+
+// This is just worthless JavaScript for demo purposes
+var x = myFunction(4, 3);
+
+function myFunction(a, b) {
+    return a * b;
+}
diff --git a/Grunt/package.json b/Grunt/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "bacon",
+  "version": "1.0.0",
+  "description": "Website about bacon",
+  "main": "index.html",
+  "author": "Bucky Roberts",
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-cssmin": "^0.12.3",
+    "grunt-contrib-less": "^1.0.1",
+    "grunt-contrib-uglify": "^0.9.1",
+    "grunt-contrib-watch": "^0.6.1"
+  }
+}