@flypay/flyt-semantic-theme

flyt-semantic-theme

This repo contains the flyt semantic theme. Here you can develop on the theme as well as build the semantic docs in order to see/test any changes you make to the theme.

---

Prerequisites

• node
• npm
• yarn
• docpad Install docpad globally using npm install -g docpad@6.79. Docpad is used to build the static documentation website. More info on installation of docpad can be found here;

---

Install All Dependencies

To get the docs up and running first we need to install all the dependencies. Run the following command:

• From the root of your project run yarn run install-dep
• During installation you will be prompted with the question It looks like you have a semantic.json file already, at this stage select select skip install

---

Development

Now everything is installed we are ready to start developing on our theme. These processes should be run in separate terminal windows. Below are the steps needed to get up and running:

• First Build the semantic ui theme and then build and serve the docs by running the yarn run serve command from the root of the project. Once complete the docs will be accessible at http://127.0.0.1:9778/flyt.html.

Wait for this first step to complete before running the next command

• In a separate terminal window run yarn run watch. This will watch for changes to your theme. See note below regarding reloading of the browser.

The yarn run watch command only rebuilds the theme. It does not refresh the documentation website after a change has been detected therefore we must refresh manually in order to view changes we have made to the theme.

---

Publishing

In order to publish to npm you will need to be logged in. In the root of the project run npm login and follow the instructions to login.

Once you are happy with the changes you have made to the theme we need to publish them to npm so that projects using the theme can begin to use the new version. To do this first make sure you have committed and pushed all your changes. If not then publishing the package will fail.

Once you have committed all of your changes run yarn run publish-pkg from the root of the project. During publishing you will be asked Would you like to publish a patch, minor or major version? supply an option of patch if you are publishing minor tweaks or bug fixes. Minor option should be selected if you are published larger changes e.g re-styling button elements.

---

Helpful Scripts

Below are some helpful scripts that you may make use of

• yarn run clean-node will clean all node_modules folders from the project.

---

Flyt Utility Classes

Semantic does not supply any one off utility classes as part of its default theme. Utility classes are helpful for those one off occasions when a certain style needs to be applied but semantic does not cater to this e.g capitalization. As part of the flyt theme there a few helpful utility classes that should be used when the semantic styles do not meet the necessary requirements or altering the semantic components is not an option.

The souce code for these classes can be found here