Skip to content

Commit

Permalink
Merge pull request #192 from st3phhays/boxstarter
Browse files Browse the repository at this point in the history 
(#2)(#191) Add styles for boxstarter.org
  • Loading branch information
@st3phhays
st3phhays authored Jun 7, 2022
2 parents 178a4a8 + bbaaf2d commit 2f92f31
Show file tree
Hide file tree
Showing 44 changed files with 1,110 additions and 339 deletions.
175 changes: 144 additions & 31 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,120 @@ This repository holds all of the CSS, JS, images, and shared partial files that

## Getting Started

Coming soon.
### Step 1: Setup Yarn

#### Install Yarn

Navigate to the root of your repository where you want the `node_modules` folder to be installed. Follow the directions at the below links:

1. https://yarnpkg.com/getting-started/install#install-corepack
1. https://yarnpkg.com/getting-started/install#initializing-your-project

A new `package.json` and `.yarnrc.yml` file will be generated after the above steps are complete.

#### Modify `.yarnrc.yml` File

In the newly generated `.yarnrc.yml` file, copy the following lines to the end of the document:

```
nodeLinker: node-modules
checksumBehavior: "update"
```

#### Modify `package.json` File

In the choco-theme repository, navigate to `getting-started/_package.json`, and copy the contents into the new `package.json` file that was just created in your project.

* Be sure not to change lines 2 and 3, as these are specific to your new project.
* Update the git information in the package.json file in your new project to the correct information.

#### Update `.gitignore` File

Add the following lines to the `.gitignore` file in your repository. Any file path containing `input` may need updated to your specific repository folder structure.

```
input/assets/css/
input/assets/js/
input/assets/fonts/
input/assets/images/global-shared/
input/global-partials/
apple-touch-*.png
favicon.ico
node_modules/
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
```

### Step 2: Setup Gulp

#### Copy `gulpfile.js` File Into Your Repository

In the choco-theme repository, navigate to `getting-started/_gulpfile.js`, and copy the file into your new repository in the same directory as the `package.json` file. Change the name to `gulpfile.js`.

Depending on the new project setup, the variable paths in `gulpfile.js` may need updated. There is a block in `gulpfile.js` that should look similar to below:

```
const paths = {
input: 'input/',
assets: 'input/assets/',
partials: 'input/global-partials',
node_modules: 'node_modules/',
theme: 'node_modules/choco-theme/'
};
```

#### Copy `bundleconfig.json` File Into Your Repository

In the choco-theme repository, navigate to `getting-started/_bundleconfig.json`, and copy the file into your new repository in the same directory as the `package.json` file. Change the name to `bundleconfig.json`.

At this point, an informed decision will need to be made about what JS files from choco-theme need to be included in the project. Files can be added, however the files included in the getting-started template are generally required.

### Step 3: Run It!

#### Yarn

From the command line in the root of your repository where the `package.json` file is located, run the command:

```
yarn
```

This will generate the `node_modules` folder an install any dependencies.

#### Gulp

From the command line in the root of your repository where the `package.json` file is located, run the command:

```
gulp
```

This will generate all the CSS and JS and place images and global partials in the correct folders.

#### Include Assets in HTML

Directly before the closing `</head>` tag in your HTML document, include the following lines:

```
<link rel="stylesheet" href="/assets/css/chocolatey.bundle.min.css">
<script type="text/javascript" src="/assets/js/chocolatey-head.bundle.min.js"></script>
```

Directly before the closing `</body>` tag in your HTML document, include the following lines:

```
<script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find,Number.parseFloat%2CNumber.parse%2CNodeList.prototype.forEach%2CNumber.parseInt"></script>
<script type="text/javascript" src="/assets/js/chocolatey.bundle.min.js"></script>
```

File paths may need to be updated based on your project structure.

Given that everything succeeded, choco-theme is set up and ready to go!

## What's Included

Expand All @@ -19,36 +132,36 @@ Choco-theme contains many external libraries in which it depends on for various
| :heavy_minus_sign: | Not used. |
| :grey_question: | May or may not be used. Project may be under development. |

| External Libraries | chocolatey.org | community | docs | blog | design | company | chocolateyfest.com |
|-------------------------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------|
| jQuery | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Bootstrap | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Popper | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: |
| Font Awesome | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Luxon | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: |
| Flatpickr | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: |
| Clipboard | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: |
| Chartist | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: |
| Chartist Plugin Legend | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: |
| DataTables | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: |
| AnchorJS | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_check_mark: | :heavy_check_mark: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: |
| Canvas Confetti | :clock3: | :clock3: | :clock3: | :clock3: | :clock3: | :heavy_minus_sign: | :clock3: |
| DOCSEARCH (Algolia) | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| Elasticsearch | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| EasyMDE | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: |
| The Final Countdown | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: |
| Mousetrap | :heavy_minus_sign: | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: |
| Knockout | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| Lite YouTube Embed | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_check_mark: |
| Marked | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: |
| noUiSlider | :clock3: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: |
| Add-to-Calendar Button | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: |
| Prism | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: |
| typeahead.js | :heavy_minus_sign: | :clock3: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| jQuery Validation | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: |
| jQuery Validation Unobtrusive | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: |

## Custom JavaScript
| External Libraries | chocolatey.org | community | docs | blog | design | company | chocolateyfest.com | boxstarter.org |
|-------------------------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------|
| jQuery | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Bootstrap | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Popper | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |
| Font Awesome | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
| Luxon | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |
| Flatpickr | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |
| Clipboard | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_check_mark: |
| Chartist | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |
| Chartist Plugin Legend | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |
| DataTables | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |
| AnchorJS | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_check_mark: | :heavy_check_mark: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_check_mark: |
| Canvas Confetti | :clock3: | :clock3: | :clock3: | :clock3: | :clock3: | :heavy_minus_sign: | :clock3: | :heavy_minus_sign: |
| DOCSEARCH (Algolia) | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| Elasticsearch | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| EasyMDE | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| The Final Countdown | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| Mousetrap | :heavy_minus_sign: | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| Knockout | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| Lite YouTube Embed | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: |
| Marked | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |
| noUiSlider | :clock3: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| Add-to-Calendar Button | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| Prism | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_check_mark: |
| typeahead.js | :heavy_minus_sign: | :clock3: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: | :heavy_minus_sign: |
| jQuery Validation | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |
| jQuery Validation Unobtrusive | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: | :grey_question: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_minus_sign: |

### Custom JavaScript

Along with external libraries, choco-theme contains many individual custom JavaScript files. The functions have been split up in a way that allows them to be included if desired in any project, minimizing the need for them to be required.

Expand Down
42 changes: 42 additions & 0 deletions getting-started/_bundleconfig.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
[
{
"outputFileName": "input/assets/css/chocolatey.bundle.css",
"inputFiles": [
"input/assets/css/chocolatey.css"
]
},
{
"outputFileName": "input/assets/js/chocolatey-head.bundle.js",
"inputFiles": [
"node_modules/choco-theme/js/chocolatey-theme-toggle-head.js"
]
},
{
"outputFileName": "input/assets/js/chocolatey.bundle.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.js",
"node_modules/choco-theme/js/chocolatey-loader.js",
"node_modules/bootstrap/js/dist/dom/data.js",
"node_modules/bootstrap/js/dist/dom/event-handler.js",
"node_modules/bootstrap/js/dist/dom/manipulator.js",
"node_modules/bootstrap/js/dist/dom/selector-engine.js",
"node_modules/bootstrap/js/dist/base-component.js",
"node_modules/bootstrap/js/dist/alert.js",
"node_modules/bootstrap/js/dist/button.js",
"node_modules/bootstrap/js/dist/collapse.js",
"node_modules/bootstrap/js/dist/tab.js",
"node_modules/bootstrap/js/dist/modal.js",
"node_modules/choco-theme/js/prism.min.js",
"node_modules/choco-theme/js/chocolatey-theme-toggle.js",
"node_modules/choco-theme/js/chocolatey-functions.js",
"node_modules/choco-theme/js/chocolatey-collapse-y-height.js",
"node_modules/choco-theme/js/chocolatey-collapse-nested.js",
"node_modules/choco-theme/js/chocolatey-collapse-responsive.js",
"node_modules/choco-theme/js/chocolatey-code.js",
"node_modules/choco-theme/js/chocolatey-tables.js",
"node_modules/choco-theme/js/chocolatey-markdown.js",
"node_modules/choco-theme/js/chocolatey-lazyload.js",
"node_modules/choco-theme/js/chocolatey-alerts.js"
]
}
]
Loading

0 comments on commit 2f92f31

Please sign in to comment.