Nitro Assets is a package containing common graphics, iconography, and fonts for Nitro products.
By packaging and distributing our common assets we ensure visual consistency across our products and shorten the gap between our designers and developers. Further, because the package is distributed via npm we can properly version assets. We can also encourage and document best practices more effectively.
Scalable Vector Graphics (SVGs) should the preferred media type for iconography and simple graphics. SVGs are well supported by modern browsers, and they offer many advantages over PNGs:
Please note that xlink:href has been dropped from WC3 standards and should not be relied upon.
There are two main groups of images, 1) font-icons and 2) graphics. The other are graphics plain old svgs, but they’re subdivided into roughly different categories.
nicons - Font icons aka nicons (Nitro Icons). These are monochromatic images that can be placed onto a page using text and css.
graphics - All full colored images
npm install
npm version [major | minor | patch]
# example:
# npm version 1.4.20
For SVGs that are monochromatic, it’s possible to put them into a font-icon. This allows for the icons to be included the images using regular text that’s styled by css classes. You can use css to make the icons any color you want.
To add, update, or remove icons, follow this protocol:
example.html. This would be a good time to double-check your icon is showing up correctly.Great! There are probably a couple additional setup items we need.
To release a new version, ship your changes to master and trigger the Nitro-Assets job on Jenkins.
git clone this reposcd into the directorynpm installgruntcd into distopen example.html“Think of using this like you would plain old bootstrap” - Big Boss
All versions of Nitro-Assets get published automatically to the Nitro CDN:
https://assets.gonitro.com/assets/<VERSION>/example.html
Alternatively, the assets are also available as an NPM package:
package.json. Note: Make sure you use the correct version
"dependencies: [
"nitro-assets": "git+ssh://git@github.com/Nitro/nitro-assets.git#2.0.0",
]
yarn or npmwebpack or grunt to bundle the css, fonts, and svg files into your project’s distribution directory (usually dist)svg files in your html pages, or use the css-classes generated in nicons.css to use the Nitro Icons.Nitro Cloud has a special grunt task that will convert any svg that uses the Nitro Orange #EE5B21, with currentColor. This allows the accent color of SVGs to be influenced by CSS, and may be used for Custom branding down the road.
Q: What determines whether or not an image will go into this repos? Will all image assets eventually go here?
A: Any image that is shared across multiple applications. If there is an image assets specific to the project, it is fine to remain in that specific repository. Ideally, however, any image that generic enough to be used in multiple applications, should go here.
Q: Given that there is overhead to maintaining multiple repositories to update or add new assets, what is the real benefit?
A: It is always fine to put an image in your project repository and wait to migrate it until is going to be needed elsewhere. If an asset might be useful for others, consider adding it to the shared location. As a rule of thumb, ask yourself, “Would this asset be helpful if I was trying to bootstrap a new Nitro web project that matches the look and feel of our existing web products?”
The Dream would be to allow a developer be able to up to date. Pete could update assets that affect the cloud project with just a version bump.
Q: Which projects will benefit?
A:
Q: Who’s gonna maintain?
A: Any developer working on a web app. Designers as well.
Q: How large is it? (Naively including everything)
A: Approximately 60K at time of writing
Q: Is it possible to choose Specific Files from Project? Without maintaining a hardcoded list, how could we do this cleanly?
A: We could use webpack loaders to determine which files to include at run time, but that would need to be done in the consuming project. Considering the size of the shared assets is only 60K, it’s not too much overhead to just include them all.
Q: Can we still handle SVG Post Processing of Colors (set to currentColor). Is Pete aware of this?
A: Yeah, this is known and possible, but once again is the responsibility of the consuming programmers.
Ask a developer! Hint: We pretty much run off of :coffee::coffee:.