With the GitHub pages everytime an individual pushes to master branch the code will be updated on the live site. This could take about (~10 minutes) depending on how many dependencies the application is using within the code.
If the user is adding code to the develop branch it will not apppear on the GitHub Page until a Pull Request (PR) has been created to merge the develop branch into the master branch. Below shows a Pull Request being created with develop branch merged into master branch.
Mayflower is an open source repository that was created to be used on the Mass.gov website theming. With Mayflower being an open source it allows multiple other agencies to have access to this theming.
To use Mayflower in theming components for a widget or application:
-
What components are needed for the widget or application?
Here are some Mayflower components the repository might use:
-
Base, Atoms, and Molecules within Mayflower are the building blocks for elements that could be used in iFrame.
- Base - Colors
- Atoms - Buttons, Forms, Headings, Icons, Lists, Media, Table, Text, Divider, and Decorative Link
- Molecules - Callout Link and Field Submit
-
Let's say the widget needs to use a Comp Heading. Here is how to add a component to html page
-
Click Atoms in the Mayflower navigation
-
Go to Headings which will expand to show all headings
-
Click on the Comp Heading
-
Within the page it will show the component click the Tools
-
In the Tools click the Show Patterns Info
-
The patterns will appear on the page click the HTML tab.
-
Copy the html code
<h2 class="ma__comp-heading" id="GUID9827924" tabindex="-1">Title text</h2>
-
Paste the code to the html page and replace the Title Heading and id
-
Next steps to add CSS and Javascript to the html page:
-
In the
<header> </header>
section the following will be added:<link rel="stylesheet" href="https://mayflower.digital.mass.gov/assets/css/base-theme-generated.css" media="all" /> <link rel="stylesheet" href="https://mayflower.digital.mass.gov/assets/css/index-generated.css" media="all" /> <script src="https://mayflower.digital.mass.gov/assets/js/vendor/modernizr.js"></script>
Explanation of adding the following CSS and Javascript files to the html page:
base-theme-generated.css
is theme such as fonts and colors of components within Mayflowerindex-generated.css
is all components within Mayflower
-
Before the
</body>
tag add the following:<!--Notes that this Mayflower assets--> <script src="https://mayflower.digital.mass.gov/assets/js/vendor-generated.js"></script> <script src="https://mayflower.digital.mass.gov/assets/js/index-generated.js"></script>
Explanation of adding the following Javascripts files to the html page
vendor-generated.js
is 3rd party dependecies such as jQuery.index-generated.js
is all components within Mayflower
- Mayflower GitHub Repository
- Mayflower website using the GitHub Pages to publish the website.
- Example of Resposity which uses Mayflower (RMV Wait Time Widget)