Get Started

Download Assets

  1. Download the latest library version
  2. Copy the following files into your project:
    • css/netapp-library.min.css
    • svg/sprite.svg
    • js/components.js (includes the svg4everybody library for IE SVG compatibility)
    • The /images directory

NOTE: The javascript provided in components.js is for prototyping purposes only. Not intended for production.

Page Setup

  1. 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">
      
    

    Change /path/to/netapp-library to 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)

  2. Add the following script reference just before the closing </body> tag:
    <script src="path/to/components.js"></script>
  3. Copy and paste the following page shell code into your <body> tag:
    
      

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-container and .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

Next Steps

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.

Environment Setup

  1. 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 -v in your terminal.
  2. Clone the repo from Stash: ssh://git@ngage.netapp.com:7999/luci/netapp-library-site.git.
    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.
  3. Clone the netapp-library submodule via the command line:
    • cd /your/path/to/netapp-library-site
    • git submodule init
    • git submodule update
  4. Install node dependencies:
    • npm install
  5. Install bower dependencies:
    • bower install
  6. Install the scss-lint gem (NOTE: the underscore in the gem name):
    • gem install scss_lint
  7. Start the local development environment:
    • gulp dev

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:

  • netapp-library
    containing all the HTML, CSS, and JS for the library components
  • netapp-library-site
    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:

  1. Markup, as Nunjucks macro(s)
    netapp-library-site/netapp-library/src/templates/components/_[component_name].html
  2. Styles, as SASS
    netapp-library-site/netapp-library/src/scss/components/_[component_name].scss
    Note: you will need to add an import statement like @import [component_name].scss to netapp-library/src/scss/netapp-library.scss on order for your styles to be compiled.
  3. Documentation
    netapp-library-site/src/templates/component.[component-name].html
  4. Javascript (optional)
    netapp-library-site/netapp-library/src/js/components/_[component_name].js

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 nyckie.pineau@netapp.com

Additional Resources

The library uses the following tools to compile and build the static LUCI site:

  • Gulp - Task Runner
  • Sass - CSS Precompiler
  • Susy - Sass-based grid system
  • Autoprefixer - CSS Post-Processor
  • Nunjucks - JavaScript templating engine that enables reusable html snippets and macros