zhaoyafei / design-kit

Architizer Design Kit

Home Page:http://design-kit.arc.ht

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Architizer Design Kit

About

Architizer Design Kit is a system of styles and interface elements based on Foundation 6.

Development

Get Started

Install Gulp globally, install dependencies, then run the start script.

npm install -g gulp
npm install
npm start

Documentation

Edit docs.md to update the documentation site.

While npm start is running, you can access the static documentation site at http://localhost:8080.

Usage

See usage instructions.

Starter Template

Here's a starter template:

<!doctype html>
<html class="adk no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Architizer Design Kit Starter Template</title>
    <!-- Architizer Design Kit CSS -->
    <link rel="stylesheet" href="https://design-kit.arc.ht/css/adk.css" />
  </head>
  <body>
    <!-- Page content begins here -->
    <h1>Hello, world!</h1>
    <!-- Page content ends here -->
    <!-- JavaScript dependencies -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/what-input/2.1.1/what-input.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Builds

See gulpfile.js, circle.yml, and deploy.sh for detailed build configuration.

Master

When changes are merged to the master branch, the styles and documentation page are rebuilt by CircleCI and pushed to http://design-kit.arc.ht.

After the deployment is finished and succeeded, you need to create an invalidation for css/adk.css in CloudFront design-kit.arc.ht CNAME, the reason for that is to force the CDN to pull a fresh version of the file instead of the old one in the cache.

Development Builds

When changes are pushed to feature branches, the styles are built by CircleCI and pushed to http://design-kit.arc.ht/css/dev/abcd123.css where abcd123 is the abbreviated hash of the built commit from the feature branch.

To test a development CSS build on our Angular app, add ?adk=abcd123 to the end of the URL of the page you want to test.

Be aware that other assets such as fonts are only deployed to S3 when the branch gets merged to master.

About

Architizer Design Kit

http://design-kit.arc.ht


Languages

Language:HTML 80.6%Language:CSS 18.8%Language:JavaScript 0.5%Language:Shell 0.1%