Chocolatey Styleguide

Learn how to use the official Chocolatey Theme to create standalone projects which reflect the Chocolatey Brand.

IMPORTANT!
Please read through this Chocolatey Styleguide before starting a project that is meant to use the Chocolatey Theme.

Getting Started Quick

The Chocolatey Theme uses Bootstrap v4.3.1 as its underlying framework, and extends it with custom styles. This Chocolatey Styleguide is meant to be used in conjuction with the Bootstrap Documentation and only covers components that have been extended from Bootstrap to fit Chocolatey's style needs. Therefor, if an item you are searching for is not listed in this Chocolatey Styleguide, it is safe to say this theme is using the default assets covered by Bootstrap, and should be referenced there.

Download Chocolatey Theme Files

CSS

After downloading the Chocolatey resources above, include either the "chocolatey.slim.css" (recomended) OR "chocolatey.css" <link> into your <head> before all other stylesheets. The "chocolatey.slim.css" file contains only the css classes needed to style a basic website, nothing more (this is what Chocolatey.org is using!). If for some reason this slim version is not fitting the needs of your project, instead include the full build "chocolatey.css". Both files include Bootstrap CSS v4.3.1 and custom styles to extend Bootstrap.

JavaScript

Many of Bootstrap's componets require JavaScript to function at their full potential. After downloading the Chocolatey resources above, place the following <script> near the end of your pages, right before the closing </body> tag. This bundled file contains jQuery v3.3.1, Bootstrap JS v4.3.1, Popper.js v1, Clipboard.js, and custom features to extend the Chocolatey Theme. Do not include these files seperately in your project! 


<script src="/js/chocolatey.js"></script>

<!-- Optional JS for use of Syntax Highlighting -->
<script src="/js/prism.js"></script>

Community and Contributing

Stay up to date with the most current version of Chocolatey by keeping in touch with the channels below.

  • Want to contribute? Find the source code on GitHub.
  • Found a bug? File an issue on GitHub.
  • Get the latest announcements on new releases by signing up for our Newsletter.
  • Additional resources for learning how to use Chocolatey styles can be found by reading the Bootstrap Documentation.