First commit

developer/user/themes/antimatter/scss/nucleus/_core.scss

@@ -0,0 +1,217 @@
+*, *::before, *::after {
+	@include box-sizing(border-box);
+}
+
+@-webkit-viewport{width:device-width}
+@-moz-viewport{width:device-width}
+@-ms-viewport{width:device-width}
+@-o-viewport{width:device-width}
+@viewport{width:device-width}
+
+html {
+	font-size: 100%;
+	-ms-text-size-adjust: 100%;
+	-webkit-text-size-adjust: 100%;
+}
+
+body {
+	margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+	display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+	display: inline-block;
+	vertical-align: baseline;
+}
+
+audio:not([controls]) {
+	display: none;
+	height: 0;
+}
+
+[hidden],
+template {
+	display: none;
+}
+
+a {
+	background: transparent;
+	text-decoration: none;
+}
+
+a:active,
+a:hover {
+	outline: 0;
+}
+
+abbr[title] {
+	border-bottom: 1px dotted;
+}
+
+b,
+strong {
+	font-weight: bold;
+}
+
+dfn {
+	font-style: italic;
+}
+
+mark {
+	background: #ff0;
+	color: #000;
+}
+
+sub,
+sup {
+	font-size: $core-font-size - 0.250;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+img {
+	border: 0;
+	max-width: 100%;
+}
+
+svg:not(:root) {
+	overflow: hidden;
+}
+
+figure {
+	margin: 1em 40px;
+}
+
+hr {
+	height: 0;
+}
+
+pre {
+	overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+	font-size: $core-font-size;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	color: inherit;
+	font: inherit;
+	margin: 0;
+}
+
+button {
+	overflow: visible;
+}
+
+button,
+select {
+	text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	-webkit-appearance: button;
+	cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+	cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+
+input {
+	line-height: normal;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+	padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+	height: auto;
+}
+
+input[type="search"] {
+	-webkit-appearance: textfield;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+legend {
+	border: 0;
+	padding: 0;
+}
+
+textarea {
+	overflow: auto;
+}
+
+optgroup {
+	font-weight: bold;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+	table-layout: fixed;
+	width: 100%;
+}
+
+tr, td, th {
+	vertical-align: middle;
+}
+
+th, td {
+	padding: ($leading-margin / 4) 0;
+}
+
+th {
+	text-align: left;
+}

developer/user/themes/antimatter/scss/nucleus/_flex.scss

@@ -0,0 +1,197 @@
+// Page Container
+.container {
+	width: $large-desktop-container;
+	margin: 0 auto;
+	padding: 0;
+	@include breakpoint(desktop-range) {
+		width: $desktop-container;
+	}
+	@include breakpoint(tablet-range) {
+		width: $tablet-container;
+	}
+	@include breakpoint(large-mobile-range) {
+		width: $large-mobile-container;
+	}
+	@include breakpoint(small-mobile-range) {
+		width: $mobile-container;
+	}
+}
+
+// Grid Row and Column Setup
+.grid {
+	@include display(flex);
+	@include flex-flow(row);
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	@include breakpoint(mobile-only) {
+		@include flex-flow(row wrap);
+	}
+}
+
+.block {
+	@include flex(1);
+	min-width: 0;
+	min-height: 0;
+	@include breakpoint(mobile-only) {
+		@include flex(0 100%);
+	}
+}
+
+// Content Block Spacing
+.content {
+	margin: $content-margin;
+	padding: $content-padding;
+}
+
+body [class*="size-"] {
+	@include breakpoint(mobile-only) {
+		@include flex(0 100%);
+	}
+}
+
+// Custom Size Modifiers
+.size-1-2 {
+	@include flex(0 percentage(1/2));
+}
+
+.size-1-3 {
+	@include flex(0 percentage(1/3));
+}
+
+.size-1-4 {
+	@include flex(0 percentage(1/4));
+}
+
+.size-1-5 {
+	@include flex(0 percentage(1/5));
+}
+
+.size-1-6 {
+	@include flex(0 percentage(1/6));
+}
+
+.size-1-7 {
+	@include flex(0 percentage(1/7));
+}
+
+.size-1-8 {
+	@include flex(0 percentage(1/8));
+}
+
+.size-1-9 {
+	@include flex(0 percentage(1/9));
+}
+
+.size-1-10 {
+	@include flex(0 percentage(1/10));
+}
+
+.size-1-11 {
+	@include flex(0 percentage(1/11));
+}
+
+.size-1-12 {
+	@include flex(0 percentage(1/12));
+}
+
+@include breakpoint(tablet-range) {
+	.size-tablet-1-2 {
+		@include flex(0 percentage(1/2));
+	}
+
+	.size-tablet-1-3 {
+		@include flex(0 percentage(1/3));
+	}
+
+	.size-tablet-1-4 {
+		@include flex(0 percentage(1/4));
+	}
+
+	.size-tablet-1-5 {
+		@include flex(0 percentage(1/5));
+	}
+
+	.size-tablet-1-6 {
+		@include flex(0 percentage(1/6));
+	}
+
+	.size-tablet-1-7 {
+		@include flex(0 percentage(1/7));
+	}
+
+	.size-tablet-1-8 {
+		@include flex(0 percentage(1/8));
+	}
+
+	.size-tablet-1-9 {
+		@include flex(0 percentage(1/9));
+	}
+
+	.size-tablet-1-10 {
+		@include flex(0 percentage(1/10));
+	}
+
+	.size-tablet-1-11 {
+		@include flex(0 percentage(1/11));
+	}
+
+	.size-tablet-1-12 {
+		@include flex(0 percentage(1/12));
+	}
+}
+
+// Fix for Firefox versions 27 and below
+@include breakpoint(mobile-only) {
+	@supports not (flex-wrap: wrap) {
+		.grid {
+			display: block;
+			@include flex-wrap(inherit);
+		}
+		.block {
+			display: block;
+			@include flex(inherit);
+		}
+	}
+}
+
+// Reordering
+.first-block {
+  -webkit-box-ordinal-group: 0;
+  -webkit-order: -1;
+  -ms-flex-order: -1;
+  order: -1;
+}
+
+.last-block {
+  -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+}
+
+// Fixed Grid Style
+.fixed-blocks {
+	@include flex-flow(row wrap);
+	.block {
+		@include flex(inherit);
+		width: $fixed-block-full;
+		@include breakpoint(desktop-range) {
+			width: $fixed-block-desktop;
+		}
+		@include breakpoint(tablet-range) {
+			width: $fixed-block-tablet;
+		}
+		@include breakpoint(mobile-only) {
+			width: 100%;
+		}
+	}
+}
+
+// Fix for browsers that don't support flex-wrap
+@supports not (flex-wrap: wrap) {
+	.fixed-blocks {
+		display: block;
+		@include flex-flow(inherit);
+	}
+}

developer/user/themes/antimatter/scss/nucleus/_forms.scss

@@ -0,0 +1,63 @@
+fieldset {
+	border: 0;
+	padding: $content-padding;
+	margin: 0 0 $leading-margin 0;
+}
+
+input,
+label,
+select {
+	display: block;
+}
+
+label {
+	margin-bottom: $leading-margin / 4;
+
+	&.required:after {
+		content: "*";
+	}
+
+	abbr {
+		display: none;
+	}
+}
+
+textarea, #{$all-text-inputs}, select[multiple=multiple] {
+	@include transition(border-color);
+	border-radius: $core-border-radius;
+	margin-bottom: $leading-margin / 2;
+	padding: ($leading-margin / 4) ($leading-margin / 4);
+	width: 100%;
+
+	&:focus {
+		outline: none;
+	}
+}
+
+textarea {
+	resize: vertical;
+}
+
+input[type="checkbox"], input[type="radio"] {
+	display: inline;
+	margin-right: $leading-margin / 4;
+}
+
+input[type="file"] {
+	width: 100%;
+}
+
+select {
+	width: auto;
+	max-width: 100%;
+	margin-bottom: $leading-margin;
+}
+
+button,
+input[type="submit"] {
+	cursor: pointer;
+	user-select: none;
+	vertical-align: middle;
+	white-space: nowrap;
+	border: inherit;
+}

developer/user/themes/antimatter/scss/nucleus/_typography.scss

@@ -0,0 +1,86 @@
+// Body Base
+body {
+	font-size: $core-font-size;
+	line-height: $core-line-height;
+}
+
+// Headings
+h1, h2, h3, h4, h5, h6 {
+	margin: $leading-margin / 2 0 $leading-margin 0;
+	text-rendering: optimizeLegibility;
+}
+
+h1 {
+	font-size: $h1-font-size;
+}
+
+h2 {
+	font-size: $h2-font-size;
+}
+
+h3 {
+	font-size: $h3-font-size;
+}
+
+h4 {
+	font-size: $h4-font-size;
+}
+
+h5 {
+	font-size: $h5-font-size;
+}
+
+h6 {
+	font-size: $h6-font-size;
+}
+
+// Paragraph
+p {
+	margin: $leading-margin 0;
+}
+
+// Lists
+ul, ol {
+	margin-top: $leading-margin;
+	margin-bottom: $leading-margin;
+	ul, ol {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
+// Blockquote
+blockquote {
+	margin: $leading-margin 0;
+	padding-left: $leading-margin / 2;
+}
+
+cite {
+	display: block;
+	font-size: $core-font-size - 0.125;
+	&:before {
+      content: "\2014 \0020";
+    }
+}
+
+// Inline and Code
+pre {
+	margin: $leading-margin 0;
+ 	padding: $content-padding;
+}
+
+code {
+	vertical-align: bottom;
+}
+
+// Extras
+small {
+	font-size: $core-font-size - 0.125;
+}
+
+hr {
+	border-left: none;
+	border-right: none;
+	border-top: none;
+	margin: $leading-margin 0;
+}

developer/user/themes/antimatter/scss/nucleus/functions/_base.scss

@@ -0,0 +1,2 @@
+@import "direction";
+@import "range";

developer/user/themes/antimatter/scss/nucleus/functions/_direction.scss

@@ -0,0 +1,37 @@
+@function opposite-direction($dir) {
+	@if $dir == 'left' {
+		@return right;
+	}
+	@else if  $dir == 'right' {
+		@return left;
+	}
+	@else if $dir == 'ltr' {
+		@return rtl;
+	}
+	@else if $dir == 'rtl' {
+		@return ltr;
+	}
+	@else if $dir == 'top' {
+		@return bottom;
+	}
+	@else if $dir == 'bottom' {
+		@return top;
+	}
+	@else {
+		@warn "#{$dir} is not a direction! Make sure your direction is all lowercase!";
+		@return false;
+	}
+}
+
+@function named-direction($dir) {
+	@if $dir == 'ltr' {
+		@return left;
+	}
+	@else if $dir == 'rtl' {
+		@return right;
+	}
+	@else {
+		@warn "#{$dir} is not a valid HTML direction! Make sure you are using a valid HTML direction";
+		@return false;
+	}
+}

developer/user/themes/antimatter/scss/nucleus/functions/_range.scss

@@ -0,0 +1,13 @@
+@function lower-bound($range){
+	@if length($range) <= 0 {
+		@return 0;
+	}
+	@return nth($range,1);
+}
+
+@function upper-bound($range) {
+	@if length($range) < 2 {
+		@return 999999999999;
+	}
+	@return nth($range, 2);
+}

developer/user/themes/antimatter/scss/nucleus/mixins/_base.scss

@@ -0,0 +1,2 @@
+@import "breakpoints";
+@import "utilities";

developer/user/themes/antimatter/scss/nucleus/mixins/_breakpoints.scss

@@ -0,0 +1,30 @@
+// Breakpoints
+@mixin breakpoint($breakpoints, $media: all) {
+    @each $breakpoint in $breakpoints {
+        @if $breakpoint == large-desktop-range {
+            @media only #{$media} and (min-width: $large-desktop-container) { @content; }
+        }
+        @else if $breakpoint == desktop-range {
+            @media only #{$media} and (min-width: $desktop-container) and (max-width: $large-desktop-container - 0.062) { @content; }
+        }
+        @else if $breakpoint == tablet-range {
+            @media only #{$media} and (min-width: $tablet-container) and (max-width: $desktop-container - 0.062) { @content; }
+        }
+        @else if $breakpoint == large-mobile-range {
+            @media only #{$media} and (min-width: $large-mobile-container + 0.063) and (max-width: $tablet-container - 0.062) { @content; }
+        }
+        @else if $breakpoint == small-mobile-range {
+            @media only #{$media} and (max-width: $large-mobile-container) { @content; }
+        }
+        @else if $breakpoint == no-mobile {
+            @media only #{$media} and (min-width: $tablet-container) { @content; }
+        }
+        @else if $breakpoint == mobile-only {
+            @media only #{$media} and (max-width: $tablet-container - 0.062) { @content; }
+        }
+        @else if $breakpoint == desktop-only {
+            @media only #{$media} and (max-width: $desktop-container - 0.062) { @content; }
+        }
+    }
+
+}

developer/user/themes/antimatter/scss/nucleus/mixins/_utilities.scss

@@ -0,0 +1,30 @@
+
+
+// List Reset
+%list-reset {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+// Vertical Centering
+%vertical-align {
+	position: relative;
+	top: 50%;
+	-webkit-transform: translateY(-50%);
+	-moz-transform: translateY(-50%);
+	-o-transform: translateY(-50%);
+	-ms-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+// Columns
+@mixin columns($columns) {
+	width: percentage(1/$columns);
+}
+
+// Float with margin variable
+@mixin float($direction, $margin: 0) {
+	float: $direction;
+	margin-#{opposite-direction($direction)}: $margin;
+}

developer/user/themes/antimatter/scss/nucleus/particles/_align-text.scss

@@ -0,0 +1,46 @@
+// Alignment Classes
+$align-class-names:
+	large-desktop,
+	desktop,
+	tablet,
+	large-mobile,
+	small-mobile,
+	no-mobile,
+	mobile-only;
+
+// Breakpoints
+$align-class-breakpoints:
+	$large-desktop-range,
+	$desktop-range,
+	$tablet-range,
+	$large-mobile-range,
+	$small-mobile-range,
+	$no-mobile,
+	$mobile-only;
+
+// Create Responsive Alignment Classes
+@mixin align-classes{
+	.text-left {
+		text-align: left !important;
+	}
+	.text-right {
+		text-align: right !important;
+	}
+	.text-center {
+		text-align: center !important;
+	}
+	.text-justify {
+		text-align: justify !important;
+	}
+
+	@for $i from 1 through length($align-class-names) {
+		@media #{(nth($align-class-breakpoints, $i))} {
+			.#{(nth($align-class-names, $i))}-text-left { text-align: left !important; }
+			.#{(nth($align-class-names, $i))}-text-right   { text-align: right !important; }
+			.#{(nth($align-class-names, $i))}-text-center  { text-align: center !important; }
+			.#{(nth($align-class-names, $i))}-text-justify { text-align: justify !important; }
+		}
+	}
+}
+
+@include align-classes;