README
XY Company Base Bootstrap Website (web-base-bootstrap)
Table of Contents
Getting Started
Create package.json
Use yarn init to create a package.json file, if you do not have one already.
# Initialize a package.json file
yarn init
Install web-base-bootstrap as dependency
# install as dependency in project
yarn add @xyo-network/web-base-bootstrap
This will expose a cli named xysite to launch the tool.
Use yarn xysite to run the CLI.
Install web-base-bootstrap dependencies
# add the xy web-base-bootstrap dependencies
yarn install
Initialize your first project
# Initialize project and template structure
yarn xysite init all
This will generate a new local site based on this repo. It includes:
all.scss -- use yarn xysite add brand to add a custom template for a brand override.
all.ts -- use this file to import any ts files you will create.
home.kit -- this is a single page for your new website.
src/library -- a lengthly library of items for you to use in your new website. Can be deleted, but will be the location where kits will pull HTML to display in templated pages.
Run on local server
Use gulp develop to run the site on a local server.
# use gulp to build and view your website
gulp develop
Other Commands
Currently, you can use xysite init or xysite add with different specifics. (See tables below)
Init
xysite init is broken down into all, brand, and template. The default is all.
- xysite init all -- Initializes up an entire folder and package structure.
- xysite init gulp -- Initializes the gulp files.
- xysite init package -- Initializes the package.json.
- xysite init structure -- Initializes folder structure.
- xysite init library -- Initializes the component library that pages and templates use.
- xysite init common -- Initializes the common components that pages and templates use.
Add
xysite add is broken down into page, gulp, package, structure, and components. The default is page custom.
# Add New Page
yarn xysite add page
# Add New Brand
yarn xysite add brand
# Add New Template
yarn xysite add template
You can specify which page, brand, or template you'd like to add. In all cases, the default is custom.
Use yarn xysite add page to add a single page with a nav and footer to your website.
# Add New Page
yarn xysite add page
You can also add a specific page with yarn xysite add page tickets
# Add New Tickets Page
yarn xysite add page
Command Options
Brand Options
NOTE: These colors are currently placeholders. Some brands are theoretical.
| Page Options | Description |
|---|---|
coin |
View Colors: https://material.io/tools/color/#!/?view.left=1&view.right=0&view.right=1&primary.color=23052c&secondary.color=ee7268 |
custom |
Create your own theme. View Colors: https://material.io/tools/color/ |
dataism |
View Colors: https://material.io/tools/color/#!/?view.left=1&view.right=0&view.right=1&primary.color=0a0a0a&secondary.color=ee7268 |
devzilla |
https://material.io/tools/color/#!/?view.left=1&view.right=0&view.right=1&primary.color=1fbdcd&secondary.color=00b482 |
spatial |
View Colors: https://material.io/tools/color/#!/?view.left=1&view.right=0&view.right=1&primary.color=232631&secondary.color=722d59 |
xyco |
View Colors: https://material.io/tools/color/#!/?view.left=1&view.right=0&view.right=1&primary.color=0023F5&secondary.color=722d59 |
xyenterprise |
View Colors: https://material.io/tools/color/#!/?view.left=1&view.right=0&view.right=1&primary.color=00796b&secondary.color=fb8c00 |
xyo |
View Colors: https://material.io/tools/color/#!/?view.left=1&view.right=0&view.right=1&primary.color=332657&secondary.color=8c8fc4 |
xyodevs |
View Colors: https://material.io/tools/color/#!/?view.left=1&view.right=0&view.right=1&primary.color=222659&secondary.color=4A1D5D |
Template Options
Coming Soon
Page Options
| Page Options | Description |
|---|---|
123 |
Simple page that explains a 3-part idea |
about |
Text-based page |
brochure |
An offset for light websites, for visual differentiation without overpower |
brochure2 |
An offset for dark websites, for visual differentiation without overpower |
community |
An offset for dark websites, for visual differentiation without overpower |
components |
An offset for dark websites, for visual differentiation without overpower |
contact-us |
An offset for dark websites, for visual differentiation without overpower |
custom |
An offset for dark websites, for visual differentiation without overpower |
docs |
An offset for dark websites, for visual differentiation without overpower |
events |
An offset for dark websites, for visual differentiation without overpower |
faq |
An offset for dark websites, for visual differentiation without overpower |
history |
An offset for dark websites, for visual differentiation without overpower |
learn |
An offset for dark websites, for visual differentiation without overpower |
learn-core |
An offset for dark websites, for visual differentiation without overpower |
news |
An offset for dark websites, for visual differentiation without overpower |
news2 |
An offset for dark websites, for visual differentiation without overpower |
overview |
An offset for dark websites, for visual differentiation without overpower |
pricing |
An offset for dark websites, for visual differentiation without overpower |
privacy |
An offset for dark websites, for visual differentiation without overpower |
product1 |
An offset for dark websites, for visual differentiation without overpower |
roadmap |
An offset for dark websites, for visual differentiation without overpower |
team |
An offset for dark websites, for visual differentiation without overpower |
tickets |
An offset for dark websites, for visual differentiation without overpower |
vision |
An offset for dark websites, for visual differentiation without overpower |
Developer Guide
Install dependencies
This project uses yarn as a package manager
# install dependencies
yarn install
Developers should conform to git flow workflow. Additionally, we should try to make sure every commit builds. Commit messages should be meaningful serve as a meta history for the repository. Please squash meaningless commits before submitting a pull-request.
There is git hook on commits to validate the project builds. If you'd like to commit your changes
while developing locally and want to skip this step you can use the --no-verify commit option.
i.e.
git commit --no-verify -m "COMMIT MSG"
License
Only for internal XY Company use at this time.
Credits
Made with ❤️ by XY