Git Product home page Git Product logo

isabella232 / atlas-design Goto Github PK

View Code? Open in Web Editor NEW

This project forked from microsoft/atlas-design

0.0 0.0 0.0 17.46 MB

Atlas Design System serves the Microsoft Developer Relations design & engineering teams. Supporting web properties such as Documentation, Learn, Q&A, and Azure.com.

Home Page: https://design.docs.microsoft.com/

License: MIT License

JavaScript 15.25% TypeScript 32.30% HTML 9.50% SCSS 42.95%

atlas-design's Introduction

🌎 Atlas Design ✨

Welcome to the Atlas Design project! This repository holds the source code backing the Atlas Design System.

Our mission

The Atlas Design System strives to empower designers, PMs, and developers to build accessible, high quality, and consistent experiences at scale across the DevRel web properties.

Looking for information about the Atlas CSS framework? Start in /css!

Version and status

Name Status
@microsoft/atlas-css @microsoft/atlas-css npm version
@microsoft/atlas-js @microsoft/atlas-js npm version
Site build Site
Release Pipeline Release
PR Builds CI

Development

  • Ensure git is installed.
  • Ensure that have downloaded and installed a version of NodeJS that supports monorepos. It's currently recommended you download NodeJS version 16.13.* and use with NPM at a greater version than 8.3.2.
  • Alternatively, you can install NPM with NVM: mac | windows.
  • If contributing code, please read about using changesets and semantic versioning bump types.
  • Clone the repostory.
  • From the root directory, run npm install.

Using Atlas CSS

The styles backing the Atlas Design system are discussed in greater detail in /css.

Install Atlas CSS in your project

Use NPM to add @microsoft/atlas-css to your project.

# install with NPM
npm install --save @microsoft/atlas-css

You may access any file within the /css folder using the following UNPKG url. Just add the path to the file, relative to the @ sign or version the end.

https://unpkg.com/browse/@microsoft/atlas-css/ # Will redirect to latest version
https://unpkg.com/browse/@microsoft/atlas-css@<version>/ # Use this pattern on your page

Install Atlas JS in your project

Behaviors and elements beyond the scope of CSS are found in the /js folder.

# install with NPM
npm install --save @microsoft/atlas-js

Contributing

While this project is open source, its primary purpose is to serve Microsoft web properties through a CSS-first implementation of a design system. We do appreciate contributions to our documentation (/site folder), our framework (/css), and its companion scripts (/js).

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

Updating dependencies

The following commands can be used to update broadly update dependencies. (Note: we omit major updates to husky because of major api changes and a general preference for version 4.x)

npm exec --package npm-check-updates --workspaces --include-workspace-root -- npm-check-updates --upgrade --reject husky
npm exec --package npm-check-updates --workspaces --include-workspace-root -- npm-check-updates --upgrade --target minor
rm package-lock.json
npm i

atlas-design's People

Contributors

wibjorn avatar github-actions[bot] avatar ollips avatar v-mingho avatar homing1 avatar asrivastava0308 avatar jdanyow avatar dependabot[bot] avatar microsoftopensource avatar ann-liu avatar sk6786 avatar bendmyers avatar gsettles01 avatar v-joelwatson avatar jehende avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.