codyhouse-framework
Version:
A lightweight front-end framework for building accessible, bespoke interfaces.
27 lines (25 loc) • 1.91 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.getElementsByTagName("html")[0].className += " js";</script>
<link rel="stylesheet" href="assets/css/style.css">
<title>Get Started | CodyFrame</title>
</head>
<body>
<div class="container max-width-sm padding-y-lg">
<div class="article text-component">
<h1>Get started with CodyFrame</h1>
<ol class="list list--ol">
<li>Import components from the <a href="https://codyhouse.co/ds/components" target="_blank" rel="noopener nofollow">CodyHouse UI Framework</a>. To add a component to your project, create a new SCSS file (e.g., <strong>_{index}_{component-name}.scss</strong>) inside the "assets/css/components/" folder and paste in it the SCSS of the component. Create a new JS file (e.g., <strong>_{index}_{component-name}.js</strong>) inside the "assets/js/components/" folder and paste in it the JS of the component. You will find the <em>index</em> value in a comment in the SCSS/JS files of the component.</li>
<li>Create your bespoke style (e.g., custom buttons and forms) using the <a href="https://codyhouse.co/ds/globals" target="_blank" rel="noopener nofollow">Global Editors</a>. To apply the custom style to your project, copy the SCSS generated by the editor and paste it in the corresponding file in the "main/css/custom-style" folder.</li>
<li>Install one of our <a href="https://codyhouse.co/ds/docs/extensions" target="_blank" rel="noopener nofollow">code editor extensions</a> for HTML/CSS autocompletion.</li>
</ol>
<h2>Documentation</h2>
<p>For further help, <a href="https://codyhouse.co/ds/get-started" target="_blank" rel="noopener nofollow">check the documentation</a>.</p>
</div>
</div>
<script src="assets/js/scripts.js"></script>
</body>
</html>