doggystyle 0.1.0

data/core/functions/svg/_lines.scss

@@ -0,0 +1,76 @@
+/// Create a svg background image with dots. 
+///
+/// @author Mark Notton
+///
+/// @access public
+///
+/// @param {list} $settings
+///   In any order and without comma delimination, add any of the follwing settings
+///   {color}  - Colour of the lines. Default is black.
+///   {number} - The first instance of a number will be used for line thickness. In 'px'; Default is 4px.
+///              The second instance of a number will be used for lines spacing. In 'px'; Default is 0px.
+///   {string} - 'vertical' or 'horizontal' can be defined to choose a direction.
+///
+/// @todo Add the ability to chose a direction by degrees
+///
+/// @require {function} is-colour
+/// @require {function} is-string
+/// @require {function} is-number
+/// @require {function} colour
+/// @require {function} svg
+/// @require {function} strip
+///
+/// @example scss - Usage
+///   Red dots at 8px in width and height. Alternative dots don't exist:
+///   background:dots(red 8);
+///
+///   Red dots at 4px in width and height. Alternative dots are the same, but green:
+///   background:dots(red green); 
+///
+///   Red dots at 10px in width and height. Alternative dots are the same, but green. All dots are spaced 5px apart:
+///   background:dots(red green 10 5); 
+///
+/// @return {String}
+
+@function lines($settings:null) {
+  
+  $size : null;
+  $spacing : 2;
+  $colour : black;
+  $direction : horizontal;
+  $svg : '';
+
+  @each $setting in $settings {
+    @if is-colour($setting)  {
+      $colour : $setting;
+    }
+    @elseif is-string($setting) and contains(horizontal vertical, $setting) {
+      $direction : $setting;
+    }
+    @elseif is-number($setting) {
+      @if $size == null {
+        $size : strip($setting);
+      }
+      @else {
+        $spacing : strip($setting);
+      }
+    }
+  }
+
+  @if $size == null { 
+    $size : 1;
+  }
+  
+  @if $direction == horizontal {
+    $svg : "<svg xmlns='http://www.w3.org/2000/svg' width='1' height='"+($size + $spacing)+"'>";
+    $svg : $svg + "<rect width='1' height='"+$size+"' fill='"+ colour($colour, true)+"'/>";
+    $svg : $svg + "</svg>";
+  }
+  @elseif $direction == vertical {
+    $svg : "<svg xmlns='http://www.w3.org/2000/svg' height='1' width='"+($size + $spacing)+"'>";
+    $svg : $svg + "<rect height='1' width='"+$size+"' fill='"+ colour($colour, true)+"'/>";
+    $svg : $svg + "</svg>";
+  }
+
+  @return svg($svg);
+}

data/core/functions/svg/_svg.scss

@@ -0,0 +1,12 @@
+/// Generates a clean url attribute for compressed or uncompressed svg data
+///
+/// @param {string} $svg - Add full SVG markup or base64 compressed code.
+///
+/// @link http://b64.io/
+///
+/// @return {string}
+
+@function svg($svg) {
+  $data:if(str-index($svg, '<svg'), "data:image/svg+xml;utf8, ", "data:image/svg+xml;base64, ");
+  @return url($data + unquote($svg));
+}

data/core/functions/text/_smart-lineheight.scss

@@ -0,0 +1,13 @@
+
+
+@function smart-lineheight($size, $smart:true) {
+  @if $smart and not is-unit($size) {
+    @if is-percentage($size) {
+      @return addUnit(100+(strip($size)), %);
+    } @else {
+      @return addUnit(((($size/50)+($size))*2) + $global-line-height-guide, %);
+    }
+  } @else {
+    @return addUnit($size);
+  }
+}

data/core/functions/text/_string-explode.scss

@@ -0,0 +1,45 @@
+/// Explode string into a list
+///
+/// @author Hugo Giraudel
+///
+/// @access public
+///
+/// @link https://github.com/HugoGiraudel/SassyStrings/blob/master/dist/_SassyStrings.scss
+///
+/// @param {string} $string - String to split
+///
+/// @param {string} $delimiter - string to use as a delimiter to split `$string`
+///
+/// @param {string} $string - The string or array being searched and replaced on
+///
+/// @return {List} 
+
+@function string-explode($string, $delimiter: "") {
+  $result: ();
+  $length: str-length($string);
+
+  @if str-length($delimiter) == 0 {
+    @for $i from 1 through $length {
+      $result: append($result, str-slice($string, $i, $i));
+    }
+
+    @return $result;
+  }
+
+  $running: true;
+  $remaining: $string;
+
+  @while $running {
+    $index: str-index($remaining, $delimiter);
+
+    @if $index {
+      $slice: str-slice($remaining, 1, $index - 1);
+      $result: append($result, $slice);
+      $remaining: str-slice($remaining, $index + str-length($delimiter));
+    } @else {
+      $running: false;
+    }
+  }
+
+  @return append($result, $remaining);
+}

data/core/functions/text/_string-replace.scss

@@ -0,0 +1,38 @@
+/// Replace 'search' with '$replace' in '$string'. Reordered parameter order to match PHP str_replace 
+///
+/// @author Hugo Giraudel
+///
+/// @access public
+///
+/// @link https://css-tricks.com/snippets/sass/str-replace-function
+///
+/// @param {string} $search - The value being searched for
+///
+/// @param {string} $replace - The replacement value that replaces found search values
+///
+/// @param {string} $string - The string or array being searched and replaced on
+///
+/// @return {string} - Updated string
+
+@function str-replace($string, $search, $replace:'') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  
+  @return $string;
+}
+
+
+/// @alias string-replace
+///
+/// @access public
+/// 
+/// @require {function} string-replace
+///
+/// @return {string}
+
+@function string-replace($search, $replace:'', $string:'') {
+  @return str-replace($search, $replace, $string);
+}

data/core/helpers/_custom-elements.scss

@@ -0,0 +1,114 @@
+@if $reset {
+  
+  // main-wrapper {essential}
+  // This could be compared to as a 'body' within the 'body'. It should contain all markup and not hidden content (svg's) or javascript
+  // This is usful if you need to hide all the content of a page or you want to blur the background for modals
+  body > #wrapper, body > main-wrapper { 
+    @extend %clearfix; @include flex-container((direction:column));
+    position:relative;
+    min-height:100vh;
+    width:100%;
+    overflow: hidden;
+  }
+  
+  // image-elemnt {essential}
+  // It's a common occurance to have a background image set inside a div element so there is more control over the image
+  // TODO: Find a way of making this custom element a singleton
+  image-element, gallery-image { 
+    @extend %full; max-width:100vw; display:block;
+    &[style*='background-image'] {
+      background-size:cover;
+      background-repeat:none;
+      background-position:center 33.33%;
+      background-repeat:no-repeat;
+    }
+  }
+  
+  gallery-container, .gallery-container { position:relative; overflow:hidden; width:100%;
+    gallery-image:not(:first-of-type), .gallery-image:not(:first-of-type) { opacity:0; }
+  }
+  
+  // main-container {optional}
+  // This is designed to be used to wrap the main content of the page without interfering with the html5's 'main' element.
+  // This is useful when you have a footer that you want to stick to the bottom of the page.
+  main-wrapper > main-container, .main-wrapper > .main-container {
+    @include flex-container((direction:column)); @include flex-grow(1);
+  }
+  
+  // basic-container {essential}
+  // This sets a few basic settings for a container element. The content will be cetnered, will have no padding.
+  basic-container, .basic-container, .container { 
+    @extend %clearfix;
+    width:100%;
+    max-width:$max-width;
+    margin-left:auto;
+    margin-right:auto;
+    position:relative;
+    display:block;
+  }
+
+  nav-container, .nav-container { 
+    @include ani(padding-left padding-right);
+    padding-left:$pad;
+    padding-right:$pad;
+    @include break($medium) {
+      padding-left:$pad0;
+      padding-right:$pad0;
+    }
+  }
+
+  // smart-container {essential}
+  // This is essentially the same as basic-container, only has a small media query check to reduce the padding at a certain point
+  smart-container, .smart-container { 
+    @extend basic-container;
+    @include ani(padding-left padding-right);
+    padding-left:$pad;
+    padding-right:$pad;
+    @include break($medium) {
+      padding-left:$pad0;
+      padding-right:$pad0;
+    }
+  }
+
+  // This fakes the results of the smart-container without having to use a smart-container custom element. 
+  // Useful for when you want to avoid additional markup just to position an element.
+  %smart-container-faux { 
+    @extend basic-container; 
+    width:calc(#{$max + px} - #{$pad2});
+    @include ani(padding-left padding-right margin-left margin-right width);
+
+    @include break($max + $padding) {
+      width:calc(100% - #{$pad2}); 
+      margin-left:$pad; margin-right:$pad;
+    }
+    @include break($medium) {
+      width:calc(100% - #{$pad});
+      margin-left:$pad0;
+      margin-right:$pad0;
+    }
+  }
+
+  %smart-container-faux-absolute {
+    @extend %smart-container-faux; 
+    @include ani(padding-left padding-right margin-left margin-right width left);
+    position:absolute;
+    left:50%;
+    margin-left:- $max/2 + $padding + px; 
+    @include break($max + $padding) {
+      left:0;
+      margin-left:$pad;
+    }
+    @include break($medium) {
+      margin-left:$pad0;
+    }
+  }
+  
+  // This also fakes the output of the smart container, only forces the fake padding to extend to the edges of the page
+  %smart-container-faux-stretch { 
+    @extend basic-container;
+    @include break($medium) {
+      width:calc(100% + #{$pad2});
+      left:-$pad;
+    }
+  }
+}

data/core/helpers/_eases.scss

@@ -0,0 +1,44 @@
+/// CSS cubic-bezier timing functions from Ceaser Easeing.
+///
+/// @link https://github.com/jhardy/compass-ceaser-easing
+///
+/// @access public
+///
+/// @type string
+
+$linear         : cubic-bezier(0.250, 0.250, 0.750, 0.750);
+$ease           : cubic-bezier(0.250, 0.100, 0.250, 1.000);
+$ease-in        : cubic-bezier(0.420, 0.000, 1.000, 1.000);
+$ease-out       : cubic-bezier(0.000, 0.000, 0.580, 1.000);
+$ease-in-out    : cubic-bezier(0.420, 0.000, 0.580, 1.000);
+
+$easeIn         : $ease-in;
+$easeOut        : $ease-out;
+$easeInOut      : $ease-in-out;
+
+$easeInQuad     : cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$easeInCubic    : cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$easeInQuart    : cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$easeInQuint    : cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$easeInSine     : cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$easeInExpo     : cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$easeInCirc     : cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$easeInBack     : cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+$easeOutQuad    : cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$easeOutCubic   : cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$easeOutQuart   : cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$easeOutQuint   : cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$easeOutSine    : cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$easeOutExpo    : cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$easeOutCirc    : cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$easeOutBack    : cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
+$easeInOutQuad  : cubic-bezier(0.455, 0.030, 0.515, 0.955);
+$easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000);
+$easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$easeInOutSine  : cubic-bezier(0.445, 0.050, 0.550, 0.950);
+$easeInOutExpo  : cubic-bezier(1.000, 0.000, 0.000, 1.000);
+$easeInOutCirc  : cubic-bezier(0.785, 0.135, 0.150, 0.860);
+$easeInOutBack  : cubic-bezier(0.680, -0.550, 0.265, 1.550);

data/core/helpers/_reset.scss

@@ -0,0 +1,282 @@
+@if $reset {
+
+	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		vertical-align: baseline;
+	}
+
+	/// normalize.css v4.0.0
+	/// @link github.com/necolas/normalize.css
+	html {
+	  -ms-text-size-adjust: 100%; /* 2 */
+	  -webkit-text-size-adjust: 100%; /* 2 */
+	}
+
+	article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
+	  display: block;
+	}
+
+	audio, canvas, progress, video {
+		display: inline-block;
+	}
+
+	audio:not([controls]) {
+	  display: none;
+	  height: 0;
+	}
+
+	progress {
+	  vertical-align: baseline;
+	}
+
+	template, [hidden] {
+	  display: none;
+	}
+
+	a { background-color: transparent; }
+
+	a:active, a:hover {
+	  outline-width: 0;
+	}
+
+	abbr[title] {
+	  border-bottom: none;
+	  text-decoration: underline;
+	  text-decoration: underline dotted;
+	}
+
+	b, strong {
+	  font-weight: inherit;
+	}
+
+	b, strong {
+	  font-weight: bolder;
+	}
+
+	dfn {
+	  font-style: italic;
+	}
+
+	mark {
+	  background-color: #ff0;
+	  color: #000;
+	}
+
+	sub, sup {
+	  font-size: 75%;
+	  line-height: 0;
+	  position: relative;
+	  vertical-align: baseline;
+	}
+
+	sub {
+	  bottom: -0.25em;
+	}
+
+	sup {
+	  top: -0.5em;
+	}
+
+	img {
+	  border-style: none;
+	  max-width:100vw;
+	  display:block;
+	}
+
+	code, kbd, pre, samp {
+	  font-family: monospace, monospace; /* 1 */
+	  font-size: 1em; /* 2 */
+	}
+
+	figure {
+	  margin: 1em 40px;
+	}
+
+	hr {
+	  box-sizing: content-box;
+	  height: 0;
+	  overflow: visible;
+	}
+
+	button, input, select, textarea {
+		font: inherit;
+	  margin: 0;
+	}
+
+	optgroup {
+	  font-weight: bold;
+	}
+
+	button, input, select {
+	  overflow: visible;
+	}
+
+	button, select {
+	  text-transform: none;
+	}
+
+	button, [type="button"], [type="reset"], [type="submit"] {
+	  cursor: pointer;
+	}
+
+	[disabled] {
+		cursor: default;
+	}
+
+	button, html [type="button"], [type="reset"], [type="submit"] {
+	  -webkit-appearance: button;
+	}
+
+	button::-moz-focus-inner, input::-moz-focus-inner {
+	  border: 0;
+	  padding: 0;
+	}
+
+	legend {
+	  box-sizing: border-box;
+	  color: inherit;
+	  display: table;
+	  max-width: 100%;
+	  padding: 0;
+	  white-space: normal;
+	}
+
+	textarea {
+	  overflow: auto;
+	}
+
+	[type="checkbox"], [type="radio"] {
+	  box-sizing: border-box;
+	  padding: 0;
+	}
+
+	[type="number"]::-webkit-inner-spin-button,
+	[type="number"]::-webkit-outer-spin-button {
+	  height: auto;
+	}
+
+	[type="search"] {
+	  -webkit-appearance: textfield;
+	}
+
+	[type="search"]::-webkit-search-cancel-button,
+	[type="search"]::-webkit-search-decoration {
+	  -webkit-appearance: none;
+	}
+
+	///
+
+	html { height:100%; font-size: 62.5%; }
+
+	html, body {
+		min-width:$minimum;
+		min-height:100%;
+	}
+
+	body {
+	  @extend .font-default, .font1 !optional;
+	  @include size(100%);
+	  @include fontsize($font-size);
+	  @include selection($selection);
+	}
+
+	p {
+		@include smart-fontsize($font-size, $font-size + 2);
+		margin-bottom:$pad;
+		&:last-of-type { margin-bottom:initial; }
+		&:empty { display:none; }
+	}
+
+	ol, ul {
+		list-style: none;
+	}
+
+	blockquote, q {
+		quotes: none;
+		&:before, &:after {
+			content: '';
+			content: none;
+		}
+	}
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	*, *:after, *:before {
+		&:focus { outline:0; };
+		box-sizing:border-box;
+		-moz-box-sizing:border-box;
+	}
+
+	a {
+		text-decoration:none;
+		color:$text;
+	}
+
+	hr {
+		border:none;
+		height:1px;
+		background-color:$text;
+		margin:$pad 0;
+	}
+
+	strong {
+		font-weight:bold;
+	}
+
+	em {
+		font-style:italic;
+	}
+
+	address {
+		font-style:normal;
+	}
+
+	textarea {
+		resize:none;
+	}
+
+	button, input[type="button"], input[type="submit"], input[type="reset"] {
+		@extend %clear-button;
+	}
+
+	main { @include flex-container((direction:column)); @include flex-grow(1);  }
+
+	select {
+		-webkit-appearance:none;
+		-webkit-border-radius:0;
+		border-radius:0;
+		border:0;
+	}
+
+	svg, symbol { overflow:visible; }
+
+	@include input-text() {
+		-webkit-appearance:none;
+		-webkit-border-radius:0;
+		border-radius:0;
+		border:0;
+		&:focus { outline:0; }
+
+		@include placeholder();
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		-webkit-margin-before:0em;
+		-webkit-margin-after:0em;
+		-webkit-margin-start:0px;
+		-webkit-margin-end:0px;
+		font-weight: normal;
+	}
+
+	h1{ @include smart-fontsize($h2, $h1); }
+	h2{ @include smart-fontsize($h3, $h2); }
+	h3{ @include smart-fontsize($h4, $h3); }
+	h4{ @include smart-fontsize($h5, $h4); }
+	h5{ @include smart-fontsize($h6, $h5); }
+	h6{ @include smart-fontsize($h6/2, $h6); }
+}