-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (77 loc) · 5.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Aurum Framework: Golden Harp Media</title>
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<!-- aurum framework -->
<link href="./packages/v1.0/au.css" rel="stylesheet">
<!-- GHM Website Styles -->
<link href="https://www.goldenharpmedia.com/css/general-styles.css" rel="stylesheet">
<link href="https://www.goldenharpmedia.com/css/shared-site-styles/site-styles.css" rel="stylesheet">
<!-- page styles -->
<link href="../css/site-styles.css" rel="stylesheet">
<!-- need to reimplement -->
<!-- tracking -->
<script data-host="https://app.microanalytics.io" data-dnt="false" src="https://app.microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
</head>
<body>
<section>
<div class="max-width-section padded-section">
<div class="au-logo"></div>
<p>The following content is pulled from the Aurum README. You can access this as well as other project documentation on the GitHub <a class="standard-link" href="https://github.com/goldenharpmedia/aurum" target="_blank">repository page</a></p>
<!-- DO NOT EDIT THE FOLLOWING SECTION -->
<!-- To edit, make edits in README.md, and run the readme-build.py file -->
<!-- README content inserted here -->
<section data-readme-marker class="readme-content">
<h1>The Aurum Framework</h1>
<p>The lightest, most necessary CSS Framework known to ~~man~~ humans. No pre-determined styles, no components - just flex layouts, grids, and necessary styles everyone needs (or could sure use). Perfect for those who are new to CSS Flexbox and learning the ropes, CSS veterans that are tired of constantly writing <code>display: flex</code>, and even those that just want a vanilla foundation to build their CSS on.</p>
<p>Aurum is from the latin word for gold (you may be familiar with the symbol 'Au' on the periodic table?). Sure, it's a nod to us at Golden Harp Media, but also respective to what the framework is.</p>
<p><br></p>
<h2>Setting Up</h2>
<p>Simply fork this repo to include your own version in your project (and to make changes if you wish), or reference one of the following URLs to access it as a hosted resource:</p>
<pre><code><head>
<!-- just the CSS Reset -->
<link rel="stylesheet" type="text/css" src="https://au.goldenharpmedia.com/packages/1.0/au.reset.css">
<!-- just the Flex Styles -->
<link rel="stylesheet" type="text/css" src="https://au.goldenharpmedia.com/packages/1.0/au.flex.css">
<!-- both the CSS Reset & Flex Styles (one file is one less request!) -->
<link rel="stylesheet" type="text/css" src="https://au.goldenharpmedia.com/packages/1.0/au.css">
<!-- other links -->
</head>
</code></pre>
<p>If you are using both, we recommend using the combination file (for minimal requests and faster loads). We also recommend including these links at the top of your <code><head></code> section (or at least, before other CSS).</p>
<p><br></p>
<h2>How it Works</h2>
<p>The <em>Reset</em> works automatically on page load, but <em>Flex</em> styles need to be referenced for each element.</p>
<h3>Flex Styles</h3>
<p>Flex styles can be used within your project in two ways. One is by referencing a flex class, while another is by using a custom HTML attribute (in case you are already dealing with plenty of CSS classes).</p>
<pre><code><!-- Example: Using a class -->
<div class="myParentClass au container">
<div class="myFirstChildClass myChildClass au flex-width"></div>
<div class="mySecondChildClass myChildClass au set-width"></div>
</div>
<!-- Example: Using a custom HTML attribute -->
<div data-au="container" class="myParentClass">
<div data-au="flex-width" class="myFirstChildClass myChildClass"></div>
<div data-au="set-width" class="mySecondChildClass myChildClass"></div>
</div>
</code></pre>
<p>For a full list of selectors that can be used, please see the <code>au.flex.css</code> <a href="./packages/1.0/au.flex.css">file</a>.</p>
<h4>Grid Styles coming soon.</h4>
<p><br></p>
<h2>Resources</h2>
<p>Have a question? Something not working? Short of providing IT Support on your implementation, we're here to help! Reach out through our <a href="https://goldenharpmedia.com">website</a>, or by opening an issue through GitHub.</p>
</section>
</div>
</section>
</body>
</html>