Switch to Sass internally (#182)

* Moving coderedcms css/js to new directory

* Splitting up front-end css into sass components

* Updating contributing guide with sass/css instructions

* Use expanded style for human readable CSS

* Formatting scss; adding licenses to css/js files

coderedcms/static/css/codered-admin.css → coderedcms/static/coderedcms/css/codered-admin.css

@@ -1,3 +1,9 @@
+/*
+CodeRed CMS (https://www.coderedcorp.com/cms/)
+Copyright 2018-2019 CodeRed LLC
+License: https://github.com/coderedcorp/coderedcms/blob/master/LICENSE
+*/
+
 /* Font sizes and inputs */
 
 html, body {

coderedcms/static/css/codered-editor.css → coderedcms/static/coderedcms/css/codered-editor.css

@@ -1,3 +1,9 @@
+/*
+CodeRed CMS (https://www.coderedcorp.com/cms/)
+Copyright 2018-2019 CodeRed LLC
+License: https://github.com/coderedcorp/coderedcms/blob/master/LICENSE
+*/
+
 /* Reset fonts to system */
 .title .halloeditor, .title input, .title textarea,
 .Draftail-Editor .DraftEditor-root {

coderedcms/static/coderedcms/css/codered-front.css

@@ -0,0 +1,341 @@
+/*
+CodeRed CMS (https://www.coderedcorp.com/cms/)
+Copyright 2018-2019 CodeRed LLC
+License: https://github.com/coderedcorp/coderedcms/blob/master/LICENSE
+*/
+.hero-bg {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  color: white;
+}
+
+.hero-bg .card {
+  color: #212529;
+}
+
+.hero-bg .parallax {
+  background-attachment: fixed;
+}
+
+.hero-bg .tile {
+  background-size: initial;
+  background-repeat: repeat;
+}
+
+.hero-fg {
+  padding: 80px 0;
+}
+
+.richtext-image.left {
+  float: left;
+  margin: 0 1em 1em 0;
+}
+
+.richtext-image.right {
+  float: right;
+  margin: 0 0 1em 1em;
+}
+
+.richtext-image.full-width {
+  width: 100%;
+  height: auto;
+}
+
+.modal-lightbox {
+  max-width: 100vw;
+  text-align: center;
+}
+
+.modal-lightbox img {
+  max-height: 90vh;
+  max-width: 90vw;
+}
+
+.leaders {
+  max-width: 40em;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+.leaders:before {
+  float: left;
+  width: 0;
+  white-space: nowrap;
+  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
+}
+
+.leaders span:first-child {
+  padding-right: 0.33em;
+  background: white;
+}
+
+.leaders span + span {
+  float: right;
+  padding-left: 0.33em;
+  padding-right: 15px;
+  background: white;
+  position: relative;
+  z-index: 1;
+  margin-right: -15px;
+}
+
+#content,
+.codered-article,
+.codered-article .container {
+  background-color: inherit;
+}
+
+.codered-article .container {
+  margin-bottom: 50px;
+}
+
+.codered-article .article-body {
+  margin-top: 3em;
+  padding-bottom: 1em;
+}
+
+@media (min-width: 768px) {
+  .codered-article .article-body {
+    font-size: 1.2em;
+  }
+}
+
+.codered-article .article-author-img {
+  max-height: 3em;
+}
+
+@media (min-width: 768px) {
+  .codered-article > img {
+    margin-bottom: -15vw;
+  }
+}
+
+@media (min-width: 768px) {
+  .codered-article.has-img .container {
+    position: relative;
+    padding: 5vw;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+  }
+}
+
+.map-container {
+  min-height: 600px;
+  width: 100%;
+}
+
+#infowindow-content {
+  display: none;
+}
+
+#infowindow-content .title {
+  font-weight: bold;
+}
+
+#map #infowindow-content {
+  display: inline;
+}
+
+.pac-card {
+  margin: 10px 10px 0 0;
+  border-radius: 2px 0 0 2px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  outline: none;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  background-color: #fff;
+  font-family: Roboto;
+}
+
+#pac-container {
+  padding-bottom: 12px;
+  margin-right: 12px;
+}
+
+.pac-controls {
+  display: inline-block;
+  padding: 5px 11px;
+}
+
+.pac-controls label {
+  font-family: Roboto;
+  font-size: 13px;
+  font-weight: 300;
+}
+
+#pac-input {
+  background-color: #fff;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: 300;
+  margin-left: 12px;
+  line-height: 34px;
+  text-overflow: ellipsis;
+  width: 200px;
+  top: 10px !important;
+  border: 2px solid #fff;
+  border-radius: 3px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#pac-input:focus {
+  border-color: #4d90fe;
+}
+
+#title {
+  color: #fff;
+  background-color: #4d90fe;
+  font-size: 25px;
+  font-weight: 500;
+  padding: 6px 12px;
+}
+
+#target {
+  width: 345px;
+}
+
+.address-card {
+  margin: 0 auto;
+  font-size: 1.4em;
+}
+
+.address-card .card-body p {
+  margin-bottom: 0;
+}
+
+.map-button {
+  background-color: white;
+  color: black;
+  border-radius: 1px;
+  z-index: 999;
+}
+
+@media (min-width: 768px) {
+  .map-button {
+    position: absolute;
+    top: 13px;
+    left: 430px;
+  }
+}
+
+#LocationList {
+  max-height: 600px;
+  overflow-y: scroll;
+}
+
+.navbar-brand img {
+  height: 50px;
+  width: auto;
+}
+
+.-fixed-img-offset {
+  margin-top: 76px;
+}
+
+.-fixed-offset {
+  margin-top: 56px;
+}
+
+.codered-navbar-center-fixed-img-offset {
+  margin-top: 175px;
+}
+
+.codered-navbar-center-fixed-offset {
+  margin-top: 56px;
+}
+
+.codered-navbar-center {
+  text-align: center;
+}
+
+.codered-navbar-center .navbar-collapse {
+  justify-content: center;
+}
+
+.codered-navbar-center .navbar-brand {
+  margin: 0;
+}
+
+.codered-navbar-center .navbar-brand img {
+  height: 150px;
+  width: auto;
+}
+
+/* sm */
+@media (min-width: 576px) {
+  .codered-navbar-center.navbar-expand-sm > .container,
+  .codered-navbar-center.navbar-expand-sm > .container-fluid {
+    display: block;
+  }
+  .codered-navbar-center-fixed-img-offset.navbar-expand-sm {
+    margin-top: 217px;
+  }
+  .codered-navbar-center-fixed-offset.navbar-expand-sm {
+    margin-top: 96px;
+  }
+}
+
+/* md */
+@media (min-width: 768px) {
+  .codered-navbar-center.navbar-expand-md > .container,
+  .codered-navbar-center.navbar-expand-md > .container-fluid {
+    display: block;
+  }
+  .codered-navbar-center-fixed-img-offset.navbar-expand-md {
+    margin-top: 217px;
+  }
+  .codered-navbar-center-fixed-offset.navbar-expand-md {
+    margin-top: 96px;
+  }
+}
+
+/* lg */
+@media (min-width: 992px) {
+  .codered-navbar-center.navbar-expand-lg > .container,
+  .codered-navbar-center.navbar-expand-lg > .container-fluid {
+    display: block;
+  }
+  .codered-navbar-center-fixed-img-offset.navbar-expand-sm {
+    margin-top: 217px;
+  }
+  .codered-navbar-center-fixed-offset.navbar-expand-sm {
+    margin-top: 96px;
+  }
+}
+
+/* xl */
+@media (min-width: 1200px) {
+  .codered-navbar-center.navbar-expand-xl > .container,
+  .codered-navbar-center.navbar-expand-xl > .container-fluid {
+    display: block;
+  }
+  .codered-navbar-center-fixed-img-offset.navbar-expand-xl {
+    margin-top: 217px;
+  }
+  .codered-navbar-center-fixed-offset.navbar-expand-xl {
+    margin-top: 96px;
+  }
+}
+
+[class^="container"] [class^="container"] {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.card {
+  background-size: cover;
+  background-position: center center;
+}
+
+.container-fluid .carousel {
+  margin: 0 -15px;
+}
+
+.carousel .no-image {
+  height: 500px;
+}
+
+/*# sourceMappingURL=codered-front.css.map */

coderedcms/static/js/codered-editor.js → coderedcms/static/coderedcms/js/codered-editor.js

@@ -1,3 +1,10 @@
+/*
+CodeRed CMS (https://www.coderedcorp.com/cms/)
+Copyright 2018-2019 CodeRed LLC
+License: https://github.com/coderedcorp/coderedcms/blob/master/LICENSE
+@license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause
+*/
+
 $(document).ready(function(){
     $(document).on('click', '.codered-collapsible button', function(){
         var $fieldset = $(this).parent().find('fieldset');
@@ -11,3 +18,5 @@ $(document).ready(function(){
         }
     });
 });
+
+/* @license-end */

coderedcms/static/js/codered-front.js → coderedcms/static/coderedcms/js/codered-front.js

@@ -1,3 +1,10 @@
+/*
+CodeRed CMS (https://www.coderedcorp.com/cms/)
+Copyright 2018-2019 CodeRed LLC
+License: https://github.com/coderedcorp/coderedcms/blob/master/LICENSE
+@license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause
+*/
+
 libs = {
     modernizr: {
         url: "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js",
@@ -37,7 +44,7 @@ libs = {
               '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.min.css" media="print" integrity="sha256-JYJWCNB1pXBwUngem7hITwB6SdmCGkhewhKS8NL1A8A=" crossorigin="anonymous" />'
     },
     coderedmaps: {
-        url: "/static/js/codered-maps.js",
+        url: "/static/coderedcms/js/codered-maps.js",
         integrity: "",
     }
 }
@@ -236,3 +243,5 @@ $(document).ready(function()
     }
 
 });
+
+/* @license-end */

coderedcms/static/js/codered-maps.js → coderedcms/static/coderedcms/js/codered-maps.js

@@ -1,5 +1,11 @@
-// Initialize the map on the gooogle maps api js callback.
+/*
+CodeRed CMS (https://www.coderedcorp.com/cms/)
+Copyright 2018-2019 CodeRed LLC
+License: https://github.com/coderedcorp/coderedcms/blob/master/LICENSE
+@license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause
+*/
 
+// Initialize the map on the gooogle maps api js callback.
 function initMap() {
     // Set defaults
     const map = new google.maps.Map(document.querySelector('#cr-map'), {
@@ -137,3 +143,5 @@ function CurrentLocationControl(controlDiv, map) {
         });
     });
 }
+
+/* @license-end */

coderedcms/static/coderedcms/scss/_codered-article.scss

@@ -0,0 +1,36 @@
+/// Default article/blog styles
+
+#content,
+.codered-article,
+.codered-article .container {
+    background-color: inherit;
+}
+.codered-article {
+    .container {
+        margin-bottom: 50px;
+    }
+    .article-body {
+        margin-top: 3em;
+        padding-bottom: 1em;
+        @media (min-width: 768px) {
+            font-size: 1.2em;
+        }
+    }
+    .article-author-img {
+        max-height: 3em;
+    }
+    > img {
+        @media (min-width: 768px) {
+            margin-bottom: -15vw;
+        }
+    }
+    &.has-img {
+        .container {
+            @media (min-width: 768px) {
+                position: relative;
+                padding: 5vw;
+                box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            }
+        }
+    }
+}

coderedcms/static/coderedcms/scss/_codered-bs-overrides.scss

@@ -0,0 +1,22 @@
+/// Various Bootstrap4 overrides to improve layout with CodeRed CMS markup.
+
+// Containers
+[class^="container"] [class^="container"] {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+// Cards
+.card {
+    background-size: cover;
+    background-position: center center;
+}
+
+// Carousel
+.container-fluid .carousel {
+    margin: 0 -15px;
+}
+.carousel .no-image {
+    height: 500px;
+}

coderedcms/static/coderedcms/scss/_codered-gallery.scss

@@ -0,0 +1,11 @@
+/// Image gallery modal/lightbox
+
+.modal-lightbox {
+    max-width: 100vw;
+    text-align: center;
+
+    img {
+        max-height: 90vh;
+        max-width: 90vw;
+    }
+}

coderedcms/static/coderedcms/scss/_codered-hero.scss

@@ -0,0 +1,25 @@
+/// Hero units
+
+.hero-bg {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    color: white;
+}
+.hero-bg {
+    .card {
+        // reset to bootstrap default. See bug https://github.com/twbs/bootstrap/issues/28102
+        color: #212529;
+    }
+    .parallax {
+        background-attachment: fixed;
+    }
+    .tile {
+        background-size: initial;
+        background-repeat: repeat;
+    }
+}
+
+.hero-fg {
+    padding: 80px 0;
+}

coderedcms/static/coderedcms/scss/_codered-location.scss

@@ -0,0 +1,108 @@
+/// Location pages styles.
+/// This includes the google map/search functionality on the location index page.
+/// TODO: rename/cleanup css class names.
+/// TODO: prefix our styles with 'codered-' to reduce potential collisions.
+
+.map-container {
+    min-height: 600px;
+    width: 100%;
+}
+
+#infowindow-content {
+    display: none;
+
+    .title {
+        font-weight: bold;
+    }
+}
+
+#map #infowindow-content {
+    display: inline;
+}
+
+.pac-card {
+    margin: 10px 10px 0 0;
+    border-radius: 2px 0 0 2px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    outline: none;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    background-color: #fff;
+    font-family: Roboto;
+}
+
+#pac-container {
+    padding-bottom: 12px;
+    margin-right: 12px;
+}
+
+.pac-controls {
+    display: inline-block;
+    padding: 5px 11px;
+
+    label {
+        font-family: Roboto;
+        font-size: 13px;
+        font-weight: 300;
+    }
+}
+
+#pac-input {
+    background-color: #fff;
+    font-family: Roboto;
+    font-size: 16px;
+    font-weight: 300;
+    margin-left: 12px;
+    line-height: 34px;
+    text-overflow: ellipsis;
+    width: 200px;
+    top: 10px !important;
+    border: 2px solid #fff;
+    border-radius: 3px;
+    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px;
+    padding-left: 5px;
+    padding-right: 5px;
+
+    &:focus {
+        border-color: #4d90fe;
+    }
+}
+
+#title {
+    color: #fff;
+    background-color: #4d90fe;
+    font-size: 25px;
+    font-weight: 500;
+    padding: 6px 12px;
+}
+
+#target {
+    width: 345px;
+}
+
+.address-card {
+    margin: 0 auto;
+    font-size: 1.4em;
+
+    .card-body p {
+        margin-bottom: 0;
+    }
+}
+
+.map-button {
+    background-color: white;
+    color: black;
+    border-radius: 1px;
+    z-index: 999;
+
+    @media (min-width: 768px) {
+        position: absolute;
+        top: 13px;
+        left: 430px;
+    }
+}
+
+#LocationList {
+    max-height: 600px;
+    overflow-y: scroll;
+}

coderedcms/static/coderedcms/scss/_codered-navbar.scss

@@ -0,0 +1,88 @@
+/// Custom adjustments to bootstrap navbar to work better out of the box.
+/// TODO: sass-ify this, code below is copied from old codered-front.css
+
+.navbar-brand img {
+    height: 50px;
+    width: auto;
+}
+
+.-fixed-img-offset {
+    margin-top: 76px;
+}
+.-fixed-offset {
+    margin-top: 56px;
+}
+.codered-navbar-center-fixed-img-offset {
+    margin-top: 175px;
+}
+.codered-navbar-center-fixed-offset {
+    margin-top: 56px;
+}
+
+.codered-navbar-center {
+    text-align: center;
+}
+.codered-navbar-center .navbar-collapse {
+    justify-content: center;
+}
+.codered-navbar-center .navbar-brand {
+    margin: 0;
+}
+.codered-navbar-center .navbar-brand img {
+    height: 150px;
+    width: auto;
+}
+
+/* sm */
+@media (min-width: 576px) {
+    .codered-navbar-center.navbar-expand-sm > .container,
+    .codered-navbar-center.navbar-expand-sm > .container-fluid {
+        display: block;
+    }
+
+    .codered-navbar-center-fixed-img-offset.navbar-expand-sm {
+        margin-top: 217px;
+    }
+    .codered-navbar-center-fixed-offset.navbar-expand-sm {
+        margin-top: 96px;
+    }
+}
+/* md */
+@media (min-width: 768px) {
+    .codered-navbar-center.navbar-expand-md > .container,
+    .codered-navbar-center.navbar-expand-md > .container-fluid {
+        display: block;
+    }
+    .codered-navbar-center-fixed-img-offset.navbar-expand-md {
+        margin-top: 217px;
+    }
+    .codered-navbar-center-fixed-offset.navbar-expand-md {
+        margin-top: 96px;
+    }
+}
+/* lg */
+@media (min-width: 992px) {
+    .codered-navbar-center.navbar-expand-lg > .container,
+    .codered-navbar-center.navbar-expand-lg > .container-fluid {
+        display: block;
+    }
+    .codered-navbar-center-fixed-img-offset.navbar-expand-sm {
+        margin-top: 217px;
+    }
+    .codered-navbar-center-fixed-offset.navbar-expand-sm {
+        margin-top: 96px;
+    }
+}
+/* xl */
+@media (min-width: 1200px) {
+    .codered-navbar-center.navbar-expand-xl > .container,
+    .codered-navbar-center.navbar-expand-xl > .container-fluid {
+        display: block;
+    }
+    .codered-navbar-center-fixed-img-offset.navbar-expand-xl {
+        margin-top: 217px;
+    }
+    .codered-navbar-center-fixed-offset.navbar-expand-xl {
+        margin-top: 96px;
+    }
+}

coderedcms/static/coderedcms/scss/_codered-pricelist.scss

@@ -0,0 +1,32 @@
+/// Default styles for pricelist and pricelist item blocks
+
+.leaders {
+    max-width: 40em;
+    padding: 0;
+    overflow-x: hidden;
+
+    &:before {
+        float: left;
+        width: 0;
+        white-space: nowrap;
+        content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
+            ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
+            ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
+            ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
+    }
+
+    span:first-child {
+        padding-right: 0.33em;
+        background: white;
+    }
+
+    span + span {
+        float: right;
+        padding-left: 0.33em;
+        padding-right: 15px;
+        background: white;
+        position: relative;
+        z-index: 1;
+        margin-right: -15px;
+    }
+}

coderedcms/static/coderedcms/scss/_codered-richtext.scss

@@ -0,0 +1,16 @@
+/// Rich text enhancements
+
+.richtext-image {
+    &.left {
+        float: left;
+        margin: 0 1em 1em 0;
+    }
+    &.right {
+        float: right;
+        margin: 0 0 1em 1em;
+    }
+    &.full-width {
+        width: 100%;
+        height: auto;
+    }
+}

coderedcms/static/coderedcms/scss/codered-front.scss

@@ -0,0 +1,32 @@
+///
+/// CodeRed CMS custom styles
+///
+/*
+CodeRed CMS (https://www.coderedcorp.com/cms/)
+Copyright 2018-2019 CodeRed LLC
+License: https://github.com/coderedcorp/coderedcms/blob/master/LICENSE
+*/
+
+// Hero unit block
+@import "codered-hero";
+
+// Rich text block
+@import "codered-richtext";
+
+// Image gallery block
+@import "codered-gallery";
+
+// Pricelist block
+@import "codered-pricelist";
+
+// Article pages
+@import "codered-article";
+
+// Location pages / store locator map
+@import "codered-location";
+
+// Navbar
+@import "codered-navbar";
+
+// Bootstrap 4 overrides to work better with coderedcms markup
+@import "codered-bs-overrides";

coderedcms/static/css/codered-front.css

@@ -1,373 +0,0 @@
-/********************
-CodeRed CMS custom styles
-********************/
-
-
-/* Hero Unit */
-
-.hero-bg {
-    background-size: cover;
-    background-repeat:no-repeat;
-    background-position: center center;
-    color:white;
-}
-.hero-bg .card {
-    color: #212529; /* reset to bootstrap default. See bug https://github.com/twbs/bootstrap/issues/28102 */
-}
-
-.hero-bg.parallax {
-    background-attachment: fixed;
-}
-
-.hero-bg.tile {
-    background-size: initial;
-    background-repeat:repeat;
-}
-
-.hero-fg {
-    padding:80px 0;
-}
-
-
-/* Rich text */
-
-.richtext-image.left {
-    float: left;
-    margin: 0 1em 1em 0;
-}
-.richtext-image.right {
-    float: right;
-    margin: 0 0 1em 1em;
-}
-.richtext-image.full-width {
-    width: 100%;
-    height: auto;
-}
-
-
-/* Articles */
-
-#content,
-.codered-article,
-.codered-article .container {
-    background-color:inherit;
-}
-.codered-article .container {
-    margin-bottom:50px;
-}
-.codered-article .article-body {
-    margin-top:3em;
-    padding-bottom:1em;
-}
-.codered-article .article-author-img {
-    max-height:3em;
-}
-@media(min-width:768px) {
-    .codered-article .article-body {
-        font-size:1.2em;
-    }
-    .codered-article > img {
-        margin-bottom:-15vw;
-    }
-    .codered-article.has-img .container {
-        position:relative;
-        padding:5vw;
-        box-shadow:0 0 20px rgba(0,0,0,0.5);
-    }
-}
-
-
-/* Other */
-
-.social-media-list{
-    list-style:none;
-    font-size: 30px;
-
-}
-
-.social-media-list li{
-    display:inline;
-    padding: 10px;
-}
-.social-media-list a:hover{
-    text-decoration: none;
-}
-
-.leaders{
-    max-width: 40em;
-    padding: 0;
-    overflow-x: hidden;
-}
-
-.leaders:before{
-    float:left;
-    width: 0;
-    white-space: nowrap;
-    content:
-        ". . . . . . . . . . . . . . . . . . . . "
-        ". . . . . . . . . . . . . . . . . . . . "
-        ". . . . . . . . . . . . . . . . . . . . "
-        ". . . . . . . . . . . . . . . . . . . . "
-        ". . . . . . . . . . . . . . . . . . . . "
-        ". . . . . . . . . . . . . . . . . . . . "
-        ". . . . . . . . . . . . . . . . . . . . "
-        ". . . . . . . . . . . . . . . . . . . . ";
-}
-
-.leaders span:first-child{
-    padding-right: 0.33em;
-    background: white;
-}
-
-.leaders span + span{
-    float:right;
-    padding-left: 0.33em;
-    padding-right: 15px;
-    background:white;
-    position:relative;
-    z-index: 1;
-    margin-right: -15px;
-}
-
-
-/* Lightbox */
-
-.modal-lightbox {
-    max-width:100vw;
-    text-align:center;
-}
-
-.modal-lightbox img {
-    max-height:90vh;
-    max-width:90vw;
-}
-
-
-
-/********************
-Bootstrap 4 overrides and enhancements
-********************/
-
-
-/* Containers */
-
-[class^='container'] [class^='container'] {
-    width:100%;
-    padding:0;
-    margin:0;
-}
-
-
-/* Navbar */
-
-.navbar-brand img {
-    height: 50px;
-    width: auto;
-}
-
-.-fixed-img-offset {
-    margin-top:76px;
-}
-.-fixed-offset {
-    margin-top:56px;
-}
-.codered-navbar-center-fixed-img-offset {
-    margin-top:175px;
-}
-.codered-navbar-center-fixed-offset {
-    margin-top:56px;
-}
-
-.codered-navbar-center {
-    text-align:center;
-}
-.codered-navbar-center .navbar-collapse {
-    justify-content: center;
-}
-.codered-navbar-center .navbar-brand {
-    margin:0;
-}
-.codered-navbar-center .navbar-brand img {
-    height:150px;
-    width:auto;
-}
-
-/* sm */
-@media(min-width:576px) {
-    .codered-navbar-center.navbar-expand-sm > .container,
-    .codered-navbar-center.navbar-expand-sm > .container-fluid {
-        display:block;
-    }
-
-    .codered-navbar-center-fixed-img-offset.navbar-expand-sm {
-        margin-top:217px;
-    }
-    .codered-navbar-center-fixed-offset.navbar-expand-sm {
-        margin-top:96px;
-    }
-}
-/* md */
-@media(min-width:768px) {
-    .codered-navbar-center.navbar-expand-md > .container,
-    .codered-navbar-center.navbar-expand-md > .container-fluid {
-        display:block;
-    }
-    .codered-navbar-center-fixed-img-offset.navbar-expand-md {
-        margin-top:217px;
-    }
-    .codered-navbar-center-fixed-offset.navbar-expand-md {
-        margin-top:96px;
-    }
-}
-/* lg */
-@media(min-width:992px) {
-    .codered-navbar-center.navbar-expand-lg > .container,
-    .codered-navbar-center.navbar-expand-lg > .container-fluid {
-        display:block;
-    }
-    .codered-navbar-center-fixed-img-offset.navbar-expand-sm {
-        margin-top:217px;
-    }
-    .codered-navbar-center-fixed-offset.navbar-expand-sm {
-        margin-top:96px;
-    }
-}
-/* xl */
-@media(min-width:1200px) {
-    .codered-navbar-center.navbar-expand-xl > .container,
-    .codered-navbar-center.navbar-expand-xl > .container-fluid {
-        display:block;
-    }
-    .codered-navbar-center-fixed-img-offset.navbar-expand-xl {
-        margin-top:217px;
-    }
-    .codered-navbar-center-fixed-offset.navbar-expand-xl {
-        margin-top:96px;
-    }
-}
-
-/* Cards */
-
-.card {
-    background-size:cover;
-    background-position: center center;
-}
-
-/* Carousel */
-
-.container-fluid .carousel {
-    margin: 0 -15px;
-}
-
-.carousel .no-image {
-    height:500px;
-}
-
-
-/* Store locator map */
-
-.map-container{
-    min-height: 600px;
-    width: 100%;
-}
-
-
-#infowindow-content .title {
-    font-weight: bold;
-}
-
-#infowindow-content {
-    display: none;
-}
-
-#map #infowindow-content {
-    display: inline;
-}
-
-.pac-card {
-    margin: 10px 10px 0 0;
-    border-radius: 2px 0 0 2px;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    outline: none;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    background-color: #fff;
-    font-family: Roboto;
-}
-
-#pac-container {
-    padding-bottom: 12px;
-    margin-right: 12px;
-}
-
-.pac-controls {
-    display: inline-block;
-    padding: 5px 11px;
-}
-
-.pac-controls label {
-    font-family: Roboto;
-    font-size: 13px;
-    font-weight: 300;
-}
-
-#pac-input {
-    background-color: #fff;
-    font-family: Roboto;
-    font-size: 16px;
-    font-weight: 300;
-    margin-left: 12px;
-    line-height: 34px;
-    text-overflow: ellipsis;
-    width: 200px;
-    top: 10px !important;
-    border: 2px solid #fff;
-    border-radius: 3px;
-    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px;
-    padding-left: 5px;
-    padding-right: 5px;
-}
-
-#pac-input:focus {
-    border-color: #4d90fe;
-}
-
-#title {
-    color: #fff;
-    background-color: #4d90fe;
-    font-size: 25px;
-    font-weight: 500;
-    padding: 6px 12px;
-}
-#target {
-    width: 345px;
-}
-
-.address-card .card-body p{
-    margin-bottom: 0;
-}
-.address-card{
-    margin: 0 auto;
-    font-size:1.4em;
-}
-
-.map-button{
-    background-color:white;
-    color: black;
-    border-radius: 1px;
-    z-index:999;
-}
-
-
-@media(min-width: 768px){
-    .map-button{
-        position: absolute;
-        top: 13px;
-        left: 430px;
-    }
-}
-
-#LocationList{
-    max-height: 600px;
-    overflow-y: scroll;
-}

coderedcms/templates/coderedcms/pages/base.html

@@ -75,7 +75,11 @@
         {% endblock %}
 
         {% block coderedcms_assets %}
-        <link rel="stylesheet" type="text/css" href="{% static 'css/codered-front.css' %}">
+        {% if "DEBUG"|django_settings %}
+        <link rel="stylesheet" type="text/css" href="{% static 'coderedcms/css/codered-front.css' %}">
+        {% else %}
+        <link rel="stylesheet" type="text/css" href="{% static 'coderedcms/css/codered-front.min.css' %}">
+        {% endif %}
         {% endblock %}
 
         {% block custom_assets %}

coderedcms/templates/wagtailadmin/shared/main_nav.html

@@ -18,7 +18,7 @@
 
             <div class="power-by">
               <a href="https://github.com/coderedcorp/coderedcms" target="_blank" title="CodeRed CMS v {% coderedcms_version %}">
-                powered by <img src="{% static 'img/codered.png' %}" alt="CodeRed" />
+                powered by <img src="{% static 'coderedcms/img/codered.png' %}" alt="CodeRed" />
               </a>
             </div>
         </li>

coderedcms/wagtail_hooks.py

@@ -15,17 +15,17 @@ from coderedcms.models import CoderedFormPage
 
 @hooks.register('insert_global_admin_css')
 def global_admin_css():
-    return format_html('<link rel="stylesheet" type="text/css" href="{}">', static('css/codered-admin.css'))
+    return format_html('<link rel="stylesheet" type="text/css" href="{}">', static('coderedcms/css/codered-admin.css'))
 
 
 @hooks.register('insert_editor_css')
 def editor_css():
-    return format_html('<link rel="stylesheet" type="text/css" href="{}">', static('css/codered-editor.css'))
+    return format_html('<link rel="stylesheet" type="text/css" href="{}">', static('coderedcms/css/codered-editor.css'))
 
 
 @hooks.register('insert_editor_js')
 def collapsible_js():
-    return format_html('<script src="{}"></script>', static('js/codered-editor.js'))
+    return format_html('<script src="{}"></script>', static('coderedcms/js/codered-editor.js'))
 
 
 @hooks.register('after_create_page')

docs/contributing/index.rst

@@ -9,9 +9,9 @@ To create a test project locally:
 
 #. Clone the code from https://github.com/coderedcorp/coderedcms.
 #. Run ``pip install -e ./[dev]`` from the root coderedcms directory. The -e flag makes the install editable,
-   which is relevant when running makemigrations in test project to actually generate the migration
+   which is relevant when running ``makemigrations`` in test project to actually generate the migration
    files in the coderedcms pip package. The ``[dev]`` installs extras such as sphinx for generating docs.
-#. Follow the steps in :doc:`/getting_started/install`. Use "testproject" for
+#. Follow the steps in :doc:`/getting_started/install`. Use ``testproject`` for
    your project name to ensure it is ignored by git.
 #. When making model or block changes within coderedcms, run ``makemigrations coderedcms`` in the
    test project to generate the relevant migration files for the pip package. ALWAYS follow steps
@@ -36,41 +36,100 @@ coderedcms should specify the appropriate version in its requirements.txt to pre
     be sure to use a disposable database, as it is likely that the migrations in master will
     not be the same migrations that get released.
 
+
+CSS Development
+---------------
+
+When CSS changes are needed for front-end code (not the wagtail admin), Sass should be used.
+Each block, page, snippet, or other component that requires styling should have a dedicated ``.scss``
+file created beginning with an underscore in ``coderedcms/static/scss/``. Then import the file
+in our main ``codered-front.scss`` file. Then build a human readable and minified version of CSS
+from the command prompt as so:
+
+.. code-block:: console
+
+    $ cd coderedcms/static/coderedcms/
+
+    // Build human readable CSS, and source map for nicer debugging.
+    $ pysassc -g -t expanded scss/codered-front.scss css/codered-front.css
+
+    // Build minified CSS.
+    $ pysassc -t compressed scss/codered-front.scss css/codered-front.min.css
+
+Finally, copy the license header comment into codered-front.min.css (since ``pysassc`` does
+not have an argument to preserve comments while also using compressed output).
+
+The generated CSS files must also be committed to version control whenever a sass file is
+changed, as they are distributed as part of our package.
+
+
+JavaScript Development
+----------------------
+
+All JavaScript should use ``codered-front.js`` as an entry point, meaning feature
+detection should happen in ``codered-front.js`` and then only load secondary scripts and CSS
+as needed. This ensures only one single small JavaScript file is required on page load, which
+reduces render-blocking resources and page load time.
+
+All JavaScript files produced by CodeRed should contain a license header comment. This standard
+license header comment states copyright, ownership, license, and also provides compatibility for
+`LibreJS <https://www.gnu.org/software/librejs/free-your-javascript.html>`_.
+
+.. code-block:: text
+
+    /*
+    CodeRed CMS (https://www.coderedcorp.com/cms/)
+    Copyright 2018-2019 CodeRed LLC
+    License: https://github.com/coderedcorp/coderedcms/blob/master/LICENSE
+    @license magnet:?xt=urn:btih:c80d50af7d3db9be66a4d0a86db0286e4fd33292&dn=bsd-3-clause.txt BSD-3-Clause
+    */
+
+    ... script code here ...
+
+    /* @license-end */
+
+
 Testing CodeRed CMS
 -------------------
 
 To run the built in tests for CodeRed CMS, run the following in your test project's directory:
 
-``python manage.py test coderedcms --settings=coderedcms.tests.settings``
+.. code-block:: console
+
+    $ python manage.py test coderedcms --settings=coderedcms.tests.settings
 
 
 Adding New Tests
 ----------------
 
 Test coverage at the moment is fairly minimal and it is highly recommended that new features and models include proper unit tests.
-Any testing infrastructure (ie implementations of abstract models and migrations) needed should be added to the ``tests`` app in your
-local copy of CodeRed CMS.  The tests themselves should be in their relevant section in CodeRed CMS (ie tests for 
+Any testing infrastructure (i.e. implementations of abstract models and migrations) needed should be added to the ``tests`` app in your
+local copy of CodeRed CMS.  The tests themselves should be in their relevant section in CodeRed CMS (i.e. tests for
 models in ``coderedcms.models.page_models`` should be located in ``coderedcms.models.tests.test_page_models``).
 
 For example, here is how you would add tests for a new abstract page type, ``CoderedCustomPage`` that would live in ``coderedcms/models/page_models.py``:
 
 1. Navigate to ``coderedcms/tests/testapp/models.py``
 2. Add the following import: ``from coderedcms.models.page_models import CoderedCustomPage``
-3. Implement a concrete version of ``CoderedCustomPage``, ie ``CustomPage(CoderedCustomPage)``.
+3. Implement a concrete version of ``CoderedCustomPage``, i.e. ``CustomPage(CoderedCustomPage)``.
 4. Run ``python manage.py makemigrations`` to make new testing migrations.
 5. Navigate to ``coderedcms/models/tests/test_page_models.py``
 6. Add the following import: ``from coderedcms.models import CoderedCustomPage``
 7. Add the following import: ``from coderedcms.tests.testapp.models import CustomPage``
-8. Add the following to the bottom of the file: 
-  ::
-      
-      class CoderedCustomPageTestCase(AbstractPageTestCase, WagtailPageTests):
-          model = CoderedCustomPage
-9. Add the following to the bottom of the file: 
-  ::
-      
-      class CustomPageTestCase(ConcreteBasicPageTestCase, WagtailPageTests):
-          model = CustomPage
+8. Add the following to the bottom of the file:
+
+.. code-block:: python
+
+    class CoderedCustomPageTestCase(AbstractPageTestCase, WagtailPageTests):
+        model = CoderedCustomPage
+
+9. Add the following to the bottom of the file:
+
+.. code-block:: python
+
+    class CustomPageTestCase(ConcreteBasicPageTestCase, WagtailPageTests):
+        model = CustomPage
+
 10. Write any specific test cases that ``CoderedCustomPage`` and ``CustomPage`` may require.
 
 
@@ -91,20 +150,24 @@ Following submission of your pull request, a CodeRed member will review and test
 Building pip packages
 ---------------------
 
-To build a publicly consumable pip package, run::
+To build a publicly consumable pip package, run:
 
-    python setup.py sdist bdist_wheel
+.. code-block:: console
+
+    $ python setup.py sdist bdist_wheel
 
 
 Building documentation
 ----------------------
 
 For every code or feature change, be sure to update the docs in the repository. To build and publish
-the documentation run::
+the documentation run:
+
+.. code-block:: console
 
-    cd docs/
-    make clean
-    make html
+    $ cd docs/
+    $ make clean
+    $ make html
 
 Output will be in ``docs/_build/html/`` directory.
 
@@ -114,19 +177,25 @@ Publishing a new release
 
 First checkout the code/branch for release.
 
-Next build a pip package::
+Next build a pip package:
+
+.. code-block:: console
+
+    $ python setup.py sdist bdist_wheel
+
+Then upload the pip package to the Python Package Index:
 
-    python setup.py sdist bdist_wheel
+.. code-block:: console
 
-Then upload the pip package to pypi::
+    $ twine upload dist/*
 
-    twine upload dist/*
+Finally build and update docs:
 
-Finally build and update docs::
+.. code-block:: console
 
-    cd docs/
-    make clean
-    make html
+    $ cd docs/
+    $ make clean
+    $ make html
 
 If updating docs for an existing minor version release:
 
@@ -134,8 +203,8 @@ If updating docs for an existing minor version release:
 
 If this is a new major or minor version release:
 
-#. Create a new major.minor directory on the CodeRed docs server.
-#. Update the ``stable`` symlink to point to the new version directory.
+#. Create a new ``major.minor`` directory on the CodeRed docs server.
+#. Update the ``stable`` symbolic link to point to the new version directory.
 #. Add the new version to the ``versions.txt`` file on the docs server.
 #. Copy the contents of ``docs/_build/html/`` to the CodeRed docs server under the new version directory.
 

docs/releases/v0.15.0.rst

@@ -21,9 +21,15 @@ Maintenance
   Supports Python versions 3.4, 3.5, 3.6, and 3.7.
 * Upgraded jQuery to version 3.4.
 * Upgraded pickadate.js (fallback to native HTML5 date/time inputs) to version 3.6.
+* Internally switched to Sass for more modular development and debugging.
+* Now provides minified version of ``codered-front.css`` (``codered-front.min.css``).
 
 
 Upgrade considerations
 ----------------------
 
-None
+Static css/js files have been moved. If you are referencing them manually in your
+templates, please update accordingly:
+
+* ``css/codered-front.css`` -> ``coderedcms/css/codered-front[.min].css``
+* ``js/codered-front.js`` -> ``coderedcms/js/codered-front.js``

setup.py

@@ -54,6 +54,7 @@ setup(
     ],
     extras_require={
         'dev': [
+            'libsass',
             'pylint-django',
             'sphinx',
             'twine',