Virgo 是一个使用CodyHouse组件和框架构建的免费的HTML，CSS，JS模板
Virgo 是一个使用CodyHouse组件和框架构建的免费的HTML，CSS，JS模板
JavaScript CSS相关
共67Star
详细介绍
Virgo Template by
🐞
CodyHouse
Virgo is a free HTML, CSS, JS template built using the CodyHouse Components and Framework.
This template was created by copying and pasting 25 components, distributed across 6 unique pages. The global styles were defined using the Global Editors. The glue that holds the components together is the CodyHouse Framework. Nothing more - not a single extra line of CSS/JS!
CodyHouse Design System
First time you hear about the CodyHouse Design System? Here are a few links to get started:
-
⚙️ CodyHouse Framework, a lightweight (8KB minified and gzipped) front-end framework for building bespoke interfaces (Learn more or download it on Github) -
📦 CodyHouse Components, a library of accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with the Framework (Browse components) -
🚀 Global Editors, a collection of web design tools to create and export typography elements, color themes, spacing rules, buttons and forms (Explore Globals) -
📝 Documentation, learn how to use the Framework and the Components (View documentation)
Progressive enhancement
The following script in the <head> of the html files:
<script>document.getElementsByTagName("html")[0].className += " js";</script>
is used in CSS to target that Javascript is enabled and apply additional style accordingly.
Besides checking JavaScript support, we check the support of CSS custom properties. If the browser supports them, the style.css file is downloaded. Otherwise, the browser downloads the style-fallback.css file, where the CSS variables are replaced by their fallbacks (generated using a PostCSS plugin).
<script>
if('CSS' in window && CSS.supports('color', 'var(--color-var)')) {
document.write('<link rel="stylesheet" href="assets/css/style.css">');
} else {
document.write('<link rel="stylesheet" href="assets/css/style-fallback.css">');
}
</script>
<noscript>
<link rel="stylesheet" href="assets/css/style-fallback.css">
</noscript>
Gulp
The template includes a Gulp file with some basic configurations needed to run a web project based on the CodyHouse Framework.
To use this Gulp configuration file, once you have downloaded the template, make sure to 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.
License
Check the license.md file of this repo.
