mod-base 1.0.0

package/.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{.jshintrc,*.json,*.yml}]
+indent_style = space
+indent_size = 2

package/.sass-lint.yml

@@ -0,0 +1,165 @@
+files:
+  include: '**/*.scss'
+options:
+  formatter: stylish
+  merge-default-rules: false
+rules:
+  bem-depth:
+    - 0
+    - max-depth: 1
+  border-zero:
+    - 1
+    - convention: 0
+  brace-style:
+    - 1
+    - allow-single-line: true
+  class-name-format:
+    - 1
+    - convention: hyphenatedbem
+  clean-import-paths:
+    - 1
+    - filename-extension: false
+      leading-underscore: false
+  empty-line-between-blocks:
+    - 1
+    - ignore-single-line-rulesets: true
+  extends-before-declarations: 1
+  extends-before-mixins: 1
+  final-newline:
+    - 1
+    - include: true
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+  function-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  hex-length:
+    - 1
+    - style: short
+  hex-notation:
+    - 1
+    - style: uppercase
+  id-name-format:
+    - 1
+    - convention: hyphenatedlowercase
+  indentation:
+    - 2
+    -
+      size: tab
+  leading-zero:
+    - 1
+    - include: false
+  mixin-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  mixins-before-declarations: 1
+  nesting-depth:
+    - 1
+    - max-depth: 5
+  no-color-keywords: 1
+  no-color-literals: 0
+  no-css-comments: 0
+  no-debug: 1
+  no-duplicate-properties: 1
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 1
+  no-important: 0
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties:
+    - 1
+    - extra-properties: []
+  no-qualifying-elements:
+    - 1
+    - allow-element-with-attribute: false
+      allow-element-with-class: false
+      allow-element-with-id: false
+  no-trailing-zero: 1
+  no-transition-all: 0
+  no-url-protocols: 1
+  no-vendor-prefixes:
+    - 1
+    - additional-identifiers: []
+      excluded-identifiers: []
+  placeholder-in-extend: 1
+  placeholder-name-format:
+    - 1
+    - convention: hyphenatedlowercase
+  property-sort-order:
+    - 1
+    - ignore-custom-properties: false
+  property-units:
+    - 1
+    - global:
+        - ch
+        - em
+        - ex
+        - rem
+        - cm
+        - in
+        - mm
+        - pc
+        - pt
+        - px
+        - q
+        - vh
+        - vw
+        - vmin
+        - vmax
+        - deg
+        - grad
+        - rad
+        - turn
+        - ms
+        - s
+        - Hz
+        - kHz
+        - dpi
+        - dpcm
+        - dppx
+        - '%'
+      per-property: {}
+  quotes:
+    - 1
+    - style: single
+  shorthand-values:
+    - 1
+    - allowed-shorthands:
+        - 1
+        - 2
+        - 3
+        - 4
+  single-line-per-selector: 1
+  space-after-bang:
+    - 1
+    - include: false
+  space-after-colon:
+    - 1
+    - include: true
+  space-after-comma:
+    - 1
+    - include: true
+  space-before-bang:
+    - 1
+    - include: true
+  space-before-brace:
+    - 1
+    - include: true
+  space-before-colon: 1
+  space-between-parens:
+    - 1
+    - include: false
+  trailing-semicolon: 1
+  url-quotes: 1
+  variable-for-property:
+    - 0
+    - properties: []
+  variable-name-format:
+    - 1
+    - allow-leading-underscore: true
+      convention: hyphenatedlowercase
+  zero-unit: 1

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 1.0.0
+
+- Initial setup for our new `mod-base`; Removing all things related to bootstrap and components; This will just house global icon fonts, breakpoints, colors, mixins, and our dark mode template.

package/README.md

@@ -0,0 +1,42 @@
+# About The Mod Base Design System
+
+Mod Base is a design system package for use on Modernize's S3
+microsites. This differs from our mod-style library because we will be removing the use of bootstrap, and will no longer house "component styles." Component styles will live with their shared component HTML / JS.
+
+## File Structure of Mod Base
+
+src / fonts / modstyle-icons/ - icon font folder
+- modicons-basic
+- modicons-fill
+- modicons-stroke
+
+styles /
+
+base / 
+- \_breakpoint-mixins
+- \_colors
+- \_flex
+- \_fonts
+- \_reset
+- index 
+
+icons / 
+- \_basics
+- \_fill
+- \_stroke
+- index
+
+templates / 
+- \_dark-mode
+
+.editorconfig - rules for code editors based on company's code guidelines
+
+.sass-lint.yml - configuration for SASS/SCSS linter
+
+package.json - Node modules used in mod-base
+
+## Updating Mod Base
+
+When updating mod-base, you will want to create a beta version to pull into a site for testing purposes (before publishing a new, stable version).
+
+For more detailed instructions on updating NPM packages — checkout our documentation! [How to Update NPM Packages](https://quinstreet.atlassian.net/wiki/spaces/FEE/pages/7844036993/Npm+Packages#How-to-update-a-package)

package/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "mod-base",
+    "version": "1.0.0",
+    "description": "Base Styles for S3 Sites",
+    "author": "",
+    "license": "ISC"
+}

package/src/fonts/modstyle-icons/modicons-basic/Read Me.txt

@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

package/src/fonts/modstyle-icons/modicons-basic/demo-files/demo.css

@@ -0,0 +1,152 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+

package/src/fonts/modstyle-icons/modicons-basic/demo-files/demo.js

@@ -0,0 +1,30 @@
+if (!('boxShadow' in document.body.style)) {
+    document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener("click", function(e) {
+    var target = e.target;
+    if (target.tagName === "INPUT" &&
+        target.getAttribute('class').indexOf('liga') === -1) {
+        target.select();
+    }
+});
+
+(function() {
+    var fontSize = document.getElementById('fontSize'),
+        testDrive = document.getElementById('testDrive'),
+        testText = document.getElementById('testText');
+    function updateTest() {
+        testDrive.innerHTML = testText.value || String.fromCharCode(160);
+        if (window.icomoonLiga) {
+            window.icomoonLiga(testDrive);
+        }
+    }
+    function updateSize() {
+        testDrive.style.fontSize = fontSize.value + 'px';
+    }
+    fontSize.addEventListener('change', updateSize, false);
+    testText.addEventListener('input', updateTest, false);
+    testText.addEventListener('change', updateTest, false);
+    updateSize();
+}());