diff --git a/.codeclimate.yml b/.codeclimate.yml
new file mode 100644
index 0000000..3d65068
--- /dev/null
+++ b/.codeclimate.yml
@@ -0,0 +1,134 @@
+
+engines:
+  # https://docs.codeclimate.com/docs/eslint
+  # ES Linting requires an .eslintrc file to tweak checks.
+  eslint:
+    enabled: false
+  csslint:
+    enabled: true
+    checks:
+      overqualified-elements:
+        enabled: false
+  # We don't lint our coffee. Eew.
+  coffeelint:
+    enabled: false
+  # SCSS Lint requires a .scss-lint.yml file in the repo in order to tweak settings.
+  # Withouth the .scss-lint.yml file it will run with the defaults.
+  # Defaults file: https://github.com/brigade/scss-lint/blob/master/config/default.yml
+  scss-lint:
+    enabled: true
+    checks:
+      IdSelector:
+        enabled: false
+      ColorVariable:
+        enabled: false
+      PropertySortOrder:
+        enabled: false
+      SelectorDepth:
+        enabled: false
+      QualifyingElement:
+        enabled: false
+      VendorPrefix:
+        enabled: false
+      LeadingZero:
+        enabled: false
+  phpcodesniffer:
+    enabled: true
+    checks:
+      Drupal Commenting FunctionComment TypeHintMissing:
+        enabled: false
+      Drupal Commenting FunctionComment IncorrectTypeHint:
+        enabled: false
+      DrupalPractice Commenting CommentEmptyLine SpacingAfter:
+        enabled: false
+      Drupal NamingConventions ValidFunctionName ScopeNotCamelCaps:
+        enabled: false
+      Drupal NamingConventions ValidClassName StartWithCaptial:
+        enabled: false
+      Drupal NamingConventions ValidFunctionName NotCamelCaps:
+        enabled: false
+      DrupalPractice General ClassName ClassPrefix:
+        enabled: false
+      Drupal NamingConventions ValidClassName NoUnderscores:
+        enabled: false
+    config:
+      file_extensions: "php,inc,install,module,profile"
+      standard: "Drupal,DrupalPractice"
+  phpmd:
+    enabled: true
+    checks:
+      Design/WeightedMethodCount:
+        enabled: false
+      CleanCode/StaticAccess:
+        enabled: false
+      CleanCode/ElseExpression:
+        enabled: false
+      CleanCode/BooleanArgumentFlag:
+        enabled: false
+      UnusedFormalParameter:
+        enabled: false
+    config:
+      # https://phpmd.org/rules/index.html
+      # The following sets include everything except the controversial set.
+      # We can configure these further through .xml files. See docs.
+      rulesets: "cleancode,codesize,design,naming,unusedcode"
+      # Include special Drupal file extensions.
+      file_extensions: "inc,module,profile,php,install"
+  # https://docs.codeclimate.com/docs/phan
+  phan:
+    enabled: true
+    config:
+      file_extensions: "php,module,profile,inc"
+      # minimum-severity: 1
+      ignore-undeclared: true
+      # quick: true
+      # backward-compatiility-checks: true
+      # dead-code-detection: true
+  # https://docs.codeclimate.com/docs/duplication
+  duplication:
+    enabled: true
+    # exclude_paths:
+    #   - examples/
+    config:
+      languages:
+        javascript:
+          mass_threshold: 50
+          # count_threshold: 3
+        php:
+          mass_threshold: 60
+  fixme:
+    enabled: true
+    config:
+      strings:
+      - FIXME
+      - BUG
+      - TODO
+      - todo
+      - dpm
+      - dsm
+ratings:
+  paths:
+  - "**.inc"
+  - "**.module"
+  - "**.profile"
+  - "**.php"
+  - "**.install"
+  - "**.scss"
+  - "**.sass"
+  - "**.js"
+# exclude these files/paths
+exclude_paths:
+- "**.features.**"
+- "**.views_default.inc"
+- "**.field_group.inc"
+- "**.ds.inc"
+- "**.bean.inc"
+- "**.context.inc"
+- "test/**/*"
+- "**/vendor/**/*"
+- "**.min.*"
+- "tests/"
+- "spec/"
+- "**/vendor/"
+- "**.api.php"
+- "*.twig"
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5c9a6fd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,32 @@
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.vi
+*~
+
+# OS or Editor folders
+.DS_Store
+.cache
+.idea
+.sass-cache
+.project
+.settings
+.tmproj
+nbproject
+Thumbs.db
+config.rb
+*.scssc
+*.sassc
+*.map
+
+# Folders to ignore
+.hg
+.svn
+.CVS
+cgi-bin
+node_modules
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..c01f146
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,26 @@
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    sass: {
+      options: {
+        lineNumbers: false,
+        sourcemap: 'none',
+      },
+      dist: {
+        files: {
+          'css/soe_regions.css': 'scss/soe_regions.scss'
+        }
+      }
+    },
+    watch: {
+      css: {
+        files: '**/*.scss',
+        tasks: ['sass']
+      }
+    }
+  });
+  grunt.loadNpmTasks('grunt-sass');
+  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.registerTask('default', ['watch']);
+}
diff --git a/README.md b/README.md
index 9bd5257..122c93f 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,18 @@ Install this module like any other module. [See Drupal Documentation](https://dr
 Configuration
 ---
 
+Developer
+---
+
+If you wish to develop on this module you will most likely need to compile some new css. Please use the sass structure provided and compile with the sass compiler packaged in this module. To install:
+
+```
+npm install
+grunt watch
+ or
+grunt devmode
+```
+
 Troubleshooting
 ---
 
diff --git a/css/soe_regions.css b/css/soe_regions.css
new file mode 100644
index 0000000..5f23a11
--- /dev/null
+++ b/css/soe_regions.css
@@ -0,0 +1,16 @@
+#digital-magazine-megamenu {
+  z-index: 9999; }
+
+#digital-magazine-megamenu .container {
+  position: absolute;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: #9ca4ab; }
+
+.region-digital-magazine-megamenu {
+  width: 1170px; }
diff --git a/css/stanford_soe_regions.css b/css/stanford_soe_regions.css
deleted file mode 100644
index ed0c577..0000000
--- a/css/stanford_soe_regions.css
+++ /dev/null
@@ -1,4 +0,0 @@
-#full-width-super-hero {
-}
-  
-  
diff --git a/css/stanford_soe_regions.scss b/css/stanford_soe_regions.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/js/stanford_soe_regions.js b/js/soe_regions.js
similarity index 100%
rename from js/stanford_soe_regions.js
rename to js/soe_regions.js
diff --git a/js/stanford_soe_regions_megamenu.js b/js/stanford_soe_regions_megamenu.js
new file mode 100644
index 0000000..2c4acdf
--- /dev/null
+++ b/js/stanford_soe_regions_megamenu.js
@@ -0,0 +1,14 @@
+(function ($) {
+  $(document).ready(function(){
+    //Do Stuff...
+    var megamenu = $('#digital-magazine-megamenu .container');
+    $(megamenu).css('display', 'none');
+    var topics = $('.menu-name-menu-magazine ul a').first();
+    $(topics).click(function(e) {
+      e.preventDefault();
+      $(megamenu).slideToggle( "slow", function() {
+        // Animation complete.
+      });
+    });
+  });
+})(jQuery);
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7690af9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "stanford_soe_regions",
+  "description": "SCSS for School of Engineering custom regions.",
+  "author": "",
+  "version": "1.0.0",
+  "homepage": "https://github.com/SU-SOE/stanford_soe_regions#readme",
+  "license": "MIT",
+  "keywords": [
+    "css",
+    "scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SU-SOE/stanford_soe_regions.git"
+  },
+  "bugs": {
+    "url": "https://github.com/SU-SOE/stanford_soe_regions/issues"
+  },
+  "devDependencies": {
+    "grunt": "^1.0.1",
+    "grunt-contrib-sass": "^1.0.0",
+    "grunt-contrib-watch": "^1.0.0",
+    "grunt-sass": "^2.0.0"
+  }
+}
diff --git a/scss/components/_soe_components.scss b/scss/components/_soe_components.scss
new file mode 100644
index 0000000..9239dd4
--- /dev/null
+++ b/scss/components/_soe_components.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+////
+/// ROLL UP
+///
+
+@import
+  'soe_dm_megamenu'
diff --git a/scss/components/_soe_dm_megamenu.scss b/scss/components/_soe_dm_megamenu.scss
new file mode 100644
index 0000000..cf6a29f
--- /dev/null
+++ b/scss/components/_soe_dm_megamenu.scss
@@ -0,0 +1,17 @@
+#digital-magazine-megamenu {
+  z-index: 9999;
+}
+#digital-magazine-megamenu .container {
+  position: absolute;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: $mm-background;
+}
+.region-digital-magazine-megamenu {
+  width: 1170px;
+}
diff --git a/scss/soe_regions.scss b/scss/soe_regions.scss
new file mode 100644
index 0000000..f24399e
--- /dev/null
+++ b/scss/soe_regions.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import
+  'variables/soe_regions_variables',
+  'components/soe_components'
diff --git a/scss/variables/_soe_dm_megamenu_colors.scss b/scss/variables/_soe_dm_megamenu_colors.scss
new file mode 100644
index 0000000..1114060
--- /dev/null
+++ b/scss/variables/_soe_dm_megamenu_colors.scss
@@ -0,0 +1,3 @@
+@charset "UTF-8";
+
+$mm-background: #9ca4ab;
diff --git a/scss/variables/_soe_regions_variables.scss b/scss/variables/_soe_regions_variables.scss
new file mode 100644
index 0000000..5309f4f
--- /dev/null
+++ b/scss/variables/_soe_regions_variables.scss
@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+////
+/// ROLL UP
+///
+
+@import
+  'soe_dm_megamenu_colors'
diff --git a/stanford_soe_regions.module b/stanford_soe_regions.module
index 7ed7644..0192019 100644
--- a/stanford_soe_regions.module
+++ b/stanford_soe_regions.module
@@ -11,33 +11,39 @@
 function stanford_soe_regions_define_regions() {
   $region['full_width_super_hero'] = array(
     'title' => 'Full Width Super Hero',
-    //'js' => drupal_get_path('module', 'stanford_soe_regions') . '/js/stanford_soe_regions.js',
-    //'css' => drupal_get_path('module', 'stanford_soe_regions') . '/css/stanford_soe_regions.css',
+    //'js' => drupal_get_path('module', 'stanford_soe_regions') . '/js/soe_regions.js',
+    //'css' => drupal_get_path('module', 'stanford_soe_regions') . '/css/soe_regions.css',
     'render_callback' => '_full_width_super_hero_render_region',
   );
   $region['content_body_lower'] = array(
     'title' => 'Content Body Lower',
-    //'js' => drupal_get_path('module', 'stanford_soe_regions') . '/js/stanford_soe_regions.js',
-    //'css' => drupal_get_path('module', 'stanford_soe_regions') . '/css/stanford_soe_regions.css',
+    //'js' => drupal_get_path('module', 'stanford_soe_regions') . '/js/soe_regions.js',
+    //'css' => drupal_get_path('module', 'stanford_soe_regions') . '/css/soe_regions.css',
     'render_callback' => '_content_body_lower_render_region',
   );
   $region['full_width_middle'] = array(
     'title' => 'Full Width Middle',
-    //'js' => drupal_get_path('module', 'stanford_soe_regions') . '/js/stanford_soe_regions.js',
-    //'css' => drupal_get_path('module', 'stanford_soe_regions') . '/css/stanford_soe_regions.css',
+    //'js' => drupal_get_path('module', 'stanford_soe_regions') . '/js/soe_regions.js',
+    //'css' => drupal_get_path('module', 'stanford_soe_regions') . '/css/soe_regions.css',
     'render_callback' => '_full_width_middle_render_region',
   );
   $region['content_body_bottom'] = array(
     'title' => 'Content Body Lower',
     //'js' => drupal_get_path('module', 'stanford_soe_regions') . '/js/stanford_soe_regions.js',
-    //'css' => drupal_get_path('module', 'stanford_soe_regions') . '/css/stanford_soe_regions.css',
+    //'css' => drupal_get_path('module', 'stanford_soe_regions') . '/css/soe_regions.css',
     'render_callback' => '_content_body_bottom_render_region',
   );
+  $region['digital_magazine_megamenu'] = array(
+    'title' => 'Digital Magazine Megamenu',
+    'js' => drupal_get_path('module', 'stanford_soe_regions') . '/js/stanford_soe_regions_megamenu.js',
+    'css' => drupal_get_path('module', 'stanford_soe_regions') . '/css/soe_regions.css',
+    'render_callback' => '_digital_magazine_megamenu_render_region',
+  );
   return $region;
 }
 
 /**
- * Helper function for rendering the blocks in this region
+ * Helper function for rendering the blocks in this region.
  */
 function _full_width_super_hero_render_region($block_html, $block) {
   $renderable_block = _block_get_renderable_array(array($block));
@@ -46,7 +52,7 @@ function _full_width_super_hero_render_region($block_html, $block) {
 }
 
 /**
- * Helper function for rendering the blocks in this region
+ * Helper function for rendering the blocks in this region.
  */
 function _content_body_lower_render_region($block_html, $block) {
   $renderable_block = _block_get_renderable_array(array($block));
@@ -55,7 +61,7 @@ function _content_body_lower_render_region($block_html, $block) {
 }
 
 /**
- * Helper function for rendering the blocks in this region
+ * Helper function for rendering the blocks in this region.
  */
 function _full_width_middle_render_region($block_html, $block) {
   $renderable_block = _block_get_renderable_array(array($block));
@@ -64,7 +70,7 @@ function _full_width_middle_render_region($block_html, $block) {
 }
 
 /**
- * Helper function for rendering the blocks in this region
+ * Helper function for rendering the blocks in this region.
  */
 function _content_body_bottom_render_region($block_html, $block) {
   $renderable_block = _block_get_renderable_array(array($block));
@@ -72,6 +78,15 @@ function _content_body_bottom_render_region($block_html, $block) {
   return $output;
 }
 
+/**
+ * Helper function for rendering the blocks in this region.
+ */
+function _digital_magazine_megamenu_render_region($block_html, $block) {
+  $renderable_block = _block_get_renderable_array(array($block));
+  $output = drupal_render($renderable_block);
+  return $output;
+}
+
 /**
  * Implements hook_page_alter().
  */
diff --git a/templates/digital-magazine-page.tpl.php b/templates/digital-magazine-page.tpl.php
index 9658a97..8253e9c 100644
--- a/templates/digital-magazine-page.tpl.php
+++ b/templates/digital-magazine-page.tpl.php
@@ -113,6 +113,12 @@
       <div class="container"> <?php print render($page['fullwidth_top']); ?> </div>
     </div>
   <?php endif; ?>
+  
+  <?php if ($page['digital_magazine_megamenu']): ?>
+    <div id="digital-magazine-megamenu" class="row-fluid fullwidth">
+      <div class="container"> <?php print render($page['digital_magazine_megamenu']); ?> </div>
+    </div>
+  <?php endif; ?>
 
   <div id="main" class="clearfix main" role="main">
   	<?php if (!($is_front) && ($breadcrumb)): ?>