move patterns and javascript to core directories

2024-07-13 10:16:32 -04:00
parent 426f92cfd0
commit 4532389e3d
50 changed files with 55 additions and 1006 deletions
--- a/public/patterns/core/layouts/breakpoints/index.html
+++ b/public/patterns/core/layouts/breakpoints/index.html
@@ -0,0 +1,100 @@
+
+<html> 
+  <head>
+    <title>Pattern</title>
+  </head>
+  <body data-prismjs-copy-timeout="1500">
+    <h2>What is it</h2>
+    <h2>When to use it</h2>
+    <h2>How to use it</h2>
+    <p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p>
+    <div class="tab-group" id="breakpoints">
+      <pre class="language-css" data-tab="scss">//-		DS2 core (c) 2024 Alexander McIlwraith 
+//-		Licensed under CC BY-SA 4.0 
+
+$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
+
+@mixin breakpoint-debug {
+	body::before, body::after {
+		background-color: #555;	
+		color: white;	
+		content: "bigger than extra large";
+		display: grid;
+		font-size: 25px;
+		grid-template-columns: auto;
+		padding: 25px;
+		place-content: center;
+		// text-align: center;
+		@include break(-xl) {
+			content: "extra large";
+		}
+		@include break(-lg) {
+			content: "large";
+		}
+		@include break(-md) {
+			content: "medium";
+		}
+		@include break(-sm) {
+			content: "small";
+		}
+	}
+}
+
+@mixin break($bps, $points: $grid-breakpoints) {
+	
+	@each $bp in $bps {
+	
+		$min: 0;
+		$max: 0;
+
+		@if str-length($bp) == 2 {
+
+			// only a single break point was received
+			$min: map-get($points, $bp);
+			$max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1));
+		
+		} @else {
+
+			
+			@if str-slice($bp, 0, 1) == "-" {
+				// no lower breakpoint was received
+				$min: null;
+				$max: map-get($points, str-slice($bp, 2, 3));
+				
+			} @else {
+				
+				$min: map-get($points, unquote(str-slice($bp, 0, 2)));
+				
+				
+				@if str-length($bp) == 3 {		
+					// no upper break point was received 
+					$max: null;
+				} @else {
+					$max: map-get($points, str-slice($bp, 4, 5));
+				}
+			}
+		}
+		
+		@if $min != null and $max != null {
+			// Makes the @content apply between the min and max breakpoints
+			@media (min-width: $min) and (max-width: $max) {
+			  @content;
+			}
+		} @else if $min == null {
+			// Makes the @content apply to the given breakpoint and narrower.
+			@media (max-width: $max) {
+				@content;
+			}
+		} @else if $max == null {
+			// Makes the @content apply to the given breakpoint and wider.
+			@media (min-width: $min) {
+				@content;
+			}
+		} @else {
+			@content;
+		}
+	}
+}</pre>
+    </div>
+  </body>
+</html>