@jcu/cookbook
Advanced tools
The web UI framework for building responsive, mobile-first web projects with University styling
CookBook, formerly known as the JCU Web Framework, can be integrated with any type of web project you're working on – particularly those that support Bootstrap.
Fully-featured web front-end component library, styled with JCU colours and based on Bootstrap v4, including:
JCU logos and website artwork
Iconography from Material Design Icons (optional)
Font families and CSS for Open Sans and Playfair Display (optional)
Dedicated CDN hosting of all resources, including fonts and iconography
CookBook is, in essence, a themed version of Bootstrap and can be used as such, like so:
Web and HTML:
React:
react-bootstrapJCU CookBook resources can be included in your project from JCU's official CDN in a similar manner to that of Bootstrap's CDN. Insert the following code into your project:
<!-- In the <head> of your project -->
<link rel="stylesheet" href="https://cdn.jcu.edu.au/cookbook/2.0/css/cookbook.min.css">
<link rel="stylesheet" href="https://cdn.jcu.edu.au/cookbook/2.0/css/fonts.min.css">
<!-- Before the closing </body> tag in your project -->
<script src="https://cdn.jcu.edu.au/cookbook/2.0/js/jquery.min.js"></script>
<script src="https://cdn.jcu.edu.au/cookbook/2.0/js/popper.min.js"></script>
<script src="https://cdn.jcu.edu.au/cookbook/2.0/js/bootstrap.min.js"></script>
Refer to the official User Documentation links above for how to build pages using Bootstap.
Images can be used from the CDN like so:
<link rel="icon" href="https://cdn.jcu.edu.au/cookbook/2.0/img/favicon.ico" />
<img src="https://cdn.jcu.edu.au/cookbook/2.0/img/logos/jcu-logo-horizontal.svg" alt="James Cook University (JCU) Australia logo">
Available resources and their corresponding paths can be found by referrring to the
dist/ directory within this repository.
The subpath should be appended after the version number in the URL, as per the example.
If you'd like to use the optional iconography library, you can add the following as well:
<!-- In the <head> of your project -->
<link rel="stylesheet" href="https://cdn.jcu.edu.au/cookbook/2.0/css/materialdesignicons.min.css">
You can now use icons by following the instructions at https://dev.materialdesignicons.com/getting-started/webfont (skipping the setup steps as you've already done them).
Different versions of CookBook are available on the CDN depending on your desired stability and level of control over the resources:
latest – always use the latest release, including major versions that may
have backwards incompatible changes; or2 – always use the latest release under this major version; or2.0 – always use the latest release under this minor version; or2.0.0-alpha.13 – A specific version number.So, for example, if you wanted to always use the latest version of CookBook, and are okay with major version changes, use the following format of URL:
<link rel="stylesheet" href="https://cdn.jcu.edu.au/cookbook/latest/css/cookbook.min.css">
For other verisons, replace latest with your desired major, minor or patch
version. Note that you must keep all versions of resources in sync across all
HTML tags to ensure things function correctly.
To upgrade your project to use a more recent version of CookBook, simply change its version in your HTML. If you are moving to a new major version, you should refer to the CookBook Changelog for details of changes. For minor or patch releases, you should do the same but given our use of SemVer, changes will be feature releases or bug fixes.
Builds utilise the same style of package scripts defined in package.json
that Bootstrap does, with some additional steps and changes for the inclusions
in this package. At a high level, however, the process looks like so:
The resulting distribution is then published to the CDN and documentation published accordingly online (coming shortly).
Install this package and its dependencies with:
yarn
Execute a build with:
yarn dist
Test the resulting build.
At present during the alpha and beta process, this involves manual testing with the HTML documentation and checking against in-development applications.
Firstly, follow the instructions above for Building this project.
Set up an Rclone environment with rclone config and create a remote
called jcu-cdn-cookbook. Ask a maintainer if you're unsure what the
configuration should contain.
Build a release and copy the distribution to CDN via:
yarn release
Update CHANGELOG.md and CDN URLs inside README.md with the current date
and released version
Commit the build to Git and tag accordingly:
git commit CHANGELOG.md README.md dist/ -m "Release v9.9.9"
git tag v9.9.9
Publish to NPM via the following:
yarn publish
Don't set a New version at this time; just hit enter/return. We'll
update it ourselves in a moment.
Update the working version number in the source code:
yarn release-version [old-version eg 2.0.0] [new-version eg 2.0.1]
git commit -a -m "Back to development"
When using yarn release-version, ensure you omit any v prefix for
version numbers.
Push the results:
git push
git push --tags
Upgrading dependencies – including Bootstrap – takes place via:
yarn upgrade-interactive --latest
where you can inspect the recent changes and assess the impact of the dependency changes on the project. In general, minor or patch version changes should be fine to apply, provided everyone is following SemVer.
When it comes to Bootstrap itself, pay close attention to the release notes and the official blog for details of changes. As with other dependencies, the same SemVer rules apply but carefully check the resulting theme when built as regressions are always possible.
Once you've upgraded, inspect the documentation site to ensure styles and functionality is working as expected. We'll have more automated processes for this in the near future.
JCU CookBook aims to allow websites and applications that that use it to be compliant with WCAG 2.1 Level AA. As a component library, it is possible for system implementers and developers to mix and match components, add styles and integrate with applications in ways that may not meet WCAG requirements. One such example is using light text or button classes on top of a light background; the helper classes exist, but to enable a developer to create an accessible environment. In short, we strive to provide the toolkit that web systems can use to be fully accessible, but it is the responsibility of each application to test themselves.
Contributions are always welcome to improve accessibilty within this project and the core components it provides.
JCU Brand DNA v2.7 (retrieved 2020-07-31), adapted like so:
JCU website (accessed 2020-07-31)
Institutional logos (retrieved in .zip archive form, converted into
web-compatible SVG format and colours set to match the JCU website logo)
0 (zero) and YEARS shapes
removed from vectorised files (except small vertical/shield variants)See https://www.pmc.gov.au/government/australian-national-symbols/australian-flags for details. Reproduction of the following resources is underst
Australian Aboriginal Flag: https://en.wikipedia.org/wiki/File:Australian_Aboriginal_Flag.svg (Public domain in USA; educational use in Australia)
Torres Straight Islanders Flag: https://en.wikipedia.org/wiki/File:Flag_of_the_Torres_Strait_Islanders.svg (Non-free media; education use in Australia)
Use of JCU CookBook and its resources are limited to James Cook University projects and where appropriate permission is sought to use the branding. Specific aspects of the JCU CookBook, such as logos and artwork, may be subject to their own approvals, copyright or licensing and users are advised to seek their own independent advice regarding their usage from the appropriate University departments.
[2.0.0-alpha.13] - 2021-02-10
FAQs
The web UI framework for building responsive, mobile-first web projects with University styling
The npm package @jcu/cookbook receives a total of 0 weekly downloads. As such, @jcu/cookbook popularity was classified as not popular.
We found that @jcu/cookbook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.