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.
npm install -g email@example.com. 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
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 servecommand 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.
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.
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.
Below are some helpful scripts that you may make use of
yarn run clean-nodewill 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