CodyHouse / Codyhouse Framework
Projects that are alternatives of or similar to Codyhouse Framework
🐞 CodyFrame
A lightweight front-end framework for building accessible, bespoke interfaces.
Explore the documentation on codyhouse.co
The framework is composed of:
- base/*: essential CSS rules and utility classes (we suggest you don't modify these files).
- custom-style/*: SCSS templates you can use to create your bespoke style.
- style.scss: used to import the _base.scss and _custom-style.scss files.
- util.js: utility functions used in the CodyHouse Components. Make sure to import this file before the script file of the components.
Some of the advantages of working with CodyFrame:
- ⚡️ lightweight (19KB minified and gzipped - before running PurgeCSS)
- 🙌 no need to override existing CSS rules
- 📱 mobile-first
- 🎨 create unique designs with total control
- 📖 easy to learn
- 💼 a library of accessible components
codyhouse-framework/
└── main/
├── assets/
│ ├── css/
│ │ ├── base/*
│ │ │── custom-style/
│ │ │ ├── _buttons.scss
│ │ │ ├── _colors.scss
│ │ │ ├── _forms.scss
│ │ │ ├── _icons.scss
│ │ │ ├── _shared-styles.scss
│ │ │ ├── _spacing.scss
│ │ │ ├── _typography.scss
│ │ │ └── _util.scss
│ │ ├── _base.scss
│ │ ├── _custom-style.scss
│ │ ├── style-fallback.css
│ │ ├── style.css
│ │ └── style.scss
│ └── js/
│ └── util.js
└── index.html
Progressive enhancement
If you're using the Components, make sure to include the following script in the <head> of your document:
<script>document.getElementsByTagName("html")[0].className += " js";</script>
The script is used in CSS to target that JavaScript is enabled and apply additional style accordingly. If you don't include the script, part of the style of the components won't be visible.
Gulp
CodyFrame includes a Gulp configuration file. To start a project that runs on Gulp, once you have downloaded the source files, navigate to the framework folder, and run the following commands in your command line:
npm install
npm run gulp watch
The first command will install the modules the framework requires for compiling SCSS into CSS; the second will launch your project on a development server.
⚠️ Note: if you receive error messages while trying to run the npm install command, you may need to download and install Git first.
If you need to support browsers where CSS Custom Properties have not been implemented (e.g. IE11), use the npm run gulp watch-ie command instead.
When using this command, the gulp configuration file is set to compile the SCSS into two separate CSS files: style.css includes the CSS variables; in the style-fallback.css file, the CSS variables are replaced by their fallbacks (generated by the PostCSS plugin). Make sure to uncomment the following script in the
of the index.html file: it is used to deliver only one file, according to whether the browser supports CSS variables or not.<link id="codyframe" rel="stylesheet" href="assets/css/style.css">
<!-- browsers not supporting CSS variables -->
<script>
if(!('CSS' in window) || !CSS.supports('color', 'var(--color-var)')) {var cfStyle = document.getElementById('codyframe');if(cfStyle) {var href = cfStyle.getAttribute('href');href = href.replace('style.css', 'style-fallback.css');cfStyle.setAttribute('href', href);}}
</script>
📝 How to use the Framework with Webpack
Component Library
CodyHouse's Components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with the framework.
You can use the Gulp configuration file to auto-import the .scss of the CodyHouse's Components.
Learn more about importing the CSS and JS of the CodyHouse's Components
Global Editors
The Global Editors are visual tools that allow you to set the style of typography elements, color themes, spacing rules, buttons, and forms directly in the browser. They generate SCSS code that is compatible with CodyFrame.
Explore the Editors:
- Colors codyhouse.co/ds/globals/colors
- Typography codyhouse.co/ds/globals/typography
- Spacing codyhouse.co/ds/globals/spacing
- Buttons codyhouse.co/ds/globals/buttons
- Forms codyhouse.co/ds/globals/forms
- Shared Styles codyhouse.co/ds/globals/shared-styles
Extensions
Explore our autocomplete extensions for VSCode, Sublime Text and Atom: