- Download the latest library version
Copy the following files into your project:
js/components.js(includes the svg4everybody library for IE SVG compatibility)
components.js is for prototyping purposes only. Not intended for production.
Start with an empty HTML page containing just the html, head, and body elements. Within
<head>element copy the following:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta charset="utf-8"> <link rel="stylesheet" href="//cloud.typography.com/6091132/651206/css/fonts.css"> <link rel="stylesheet" href="/path/to/netapp-library.min.css">
/path/to/netapp-libraryto reflect the path to that file within your project.
NOTE: when viewing your content from the file system, the Gotham fonts will not load. To solve this issue, run a local web server and view your content that way. For an easy way to run a local web server check out Anvil (Mac Only) or MAMP (Windows, Mac)
Add the following script reference just before the closing
Copy and paste the following page shell code into your
NOTE: Make sure to change the paths of the SVG and image references to match the location of
sprite.svg and the
/images folder within your project.
Your page should now look something like this:
Create A Layout
Within the code you've copied thus far, find the section that looks like this:
The grid in LUCI has 12 available columns. Each row within the grid can contain divs that are 1 to 12 columns wide. In our example we have a div with class
.n-column-sm-12. This means at the smallest viewport and wider this div will be full width. Also note the
.n-row div's which are key to keeping the grid centered and controlling the left and right padding.
For the rest of the Getting Started guide we're going to simply remove the
<h1> that says "Page Content Goes Here" and use this existing grid. When you're ready to build a more advanced grid refer to the LUCI Grid Documentation for tips on creating a layout.
Build your page content
Add a page title with breadcrumbs to your layout by copy/pasting the following snippet into your layout in between the "START OF PAGE CONTENT" and "END OF PAGE CONTENT" comments:
NetApp FAS8000 Series Unified Scale-out Storage for the Enterprise
Now add an xup component to the bottom of your layout. After the page title snippet, copy/paste the following:
Read how customers move to the cloud using NetApp solutions
Customize the content of the two components you've added to your page and continue to build your page using component code from the library of available components.
- Download and install node.js if not already installed locally on your machine.
Be sure you're using Node 4.2.3 or higher. To find your node version type
node -vin your terminal.
Clone the repo from Stash:
If you cannot clone the repo using the SSH Url due to permissions issues, you'll need to make sure you've set up an SSH key with Stash. See the Using SSH keys to secure Git operations.
Do not clone the repo using the https URL or you will be unable to checkout the submodule in the next step.
netapp-librarysubmodule via the command line:
git submodule init
git submodule update
Install node dependencies:
Install bower dependencies:
Install the scss-lint gem (NOTE: the underscore in the gem name):
gem install scss_lint
Start the local development environment:
The environment will do an intial build and then your default browser should load http://localhost:3000
All HTML, CSS, SVG, JS, and image assets are watched and will be processed and copied to the
/dist directory while you work. Your browser will auto-refresh as you make changes.
About the Repositories
Two git repositories comprise the LUCI library site:
containing all the HTML, CSS, and JS for the library components
containing component documentation and page-type examples demonstrating how to assemble pages.
How to Contribute Code
- Create a feature branch in
netapp-library(if you are building new components or base styles) or
netapp-library-site(if you are creating documentation or other library site features)
- Commit and publish the branch(es)
- Submit a pull request assigning it for review by Jonri Rothwell
Your pull request will be reviewed by library team members and merged into the library upon approval.
Contributing a New Component
A component is typically a combination of at least three files:
Markup, as Nunjucks macro(s)
Styles, as SASS
Note: you will need to add an import statement like
netapp-library/src/scss/netapp-library.scsson order for your styles to be compiled.
Contributors are expected to provide all required files and adhere to the LUCI coding style.
New work should be performed on a feature branch and a pull request should be submitted when work is ready for review.
For questions and coordinating contributions contact firstname.lastname@example.org
The library uses the following tools to compile and build the static LUCI site: