Last active
July 27, 2021 18:53
-
-
Save jasoncomes/34874b61579a20a5755706a4b1f7134a to your computer and use it in GitHub Desktop.
EdSmart - Playground Boilerplate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" /> | |
| <link rel="preconnect" href="https://api.mobius.highereducation.com/" /> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EDSmart Playground</title> | |
| <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" type="text/css" /> | |
| <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| </head> | |
| <body class="text-gray-700"> | |
| <!-- Header --> | |
| <header class="bg-gray-100"> | |
| <div class="container mx-auto px-5 py-7"> | |
| <h1 class="flex items-center text-2xl font-black mb-6 uppercase"> | |
| EdSmart Playground Boilerplate | |
| </h1> | |
| <p class="text-sm mb-4"> | |
| A playground for testing edu widgets. | |
| </p> | |
| </div> | |
| </header> | |
| <!-- COMPONENT PLAYGROUND --> | |
| <main class="container mx-auto py-8"> | |
| <he-qdf></he-qdf> | |
| <he-editorial-listings></he-editorial-listings> | |
| </main> | |
| <style> | |
| he-qdf { | |
| --body-font-family: sans-serif; | |
| --button-background-color: green; | |
| --button-background-color-hover: yellow; | |
| --button-border-radius: 3px; | |
| --button-color: white; | |
| --button-font-family: serif; | |
| --button-font-size: 14px; | |
| --sonic-tooltip-body-color: purple; | |
| --sonic-tooltip-label-color: red; | |
| --sonic-tooltip-label-bottom: -50px; | |
| --sonic-tooltip-label-font-size: 13px; | |
| --sonic-tooltip-label-left: 150px; | |
| --sonic-tooltip-label-position: absolute; | |
| --sonic-tooltip-label-text-decoration: underline; | |
| --sonic-tooltip-label-text-transform: none; | |
| --widget-background-color: orange; | |
| --widget-padding: 20px 15px; | |
| } | |
| he-editorial-listings { | |
| --body-font-family: sans-serif; | |
| --body-color: black; | |
| --program-color: red; | |
| --school-color: blue; | |
| --school-color-hover: black; | |
| --link-color: red; | |
| --link-color-hover: yellow; | |
| --button-background-color: blue; | |
| --button-background-color-hover: blue; | |
| --button-border-radius: 5px; | |
| --button-color: white; | |
| --button-font-family: serif; | |
| --button-font-size: 14px; | |
| --sonic-tooltip-body-color: purple; | |
| --sonic-tooltip-label-color: red; | |
| --sonic-tooltip-label-font-size: 13px; | |
| --sonic-tooltip-label-position: absolute; | |
| --sonic-tooltip-label-right: 0; | |
| --sonic-tooltip-label-text-decoration: underline; | |
| --sonic-tooltip-label-text-transform: none; | |
| --sonic-tooltip-label-top: 15px; | |
| } | |
| </style> | |
| <script> | |
| !function (u,c,l) {u._UCL=l;var z=c.createElement('script');z.async=0; | |
| z.src='https://sonic-ui.highereducation.com/latest/ucl.adapter.js'; | |
| c.head.appendChild(z); | |
| }(window, document, { | |
| 'identity': '4eccdd2e-6587-4641-ba75-f8f6e6c596f6', // EdSmart | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1. Download Zip
2. Open this
edsmart-playground.htmlin Google Chrome.3. Should look like this initially.
4. Edit the CSS properties to playground with styles.