Rutgers Core Component Library FAQ

What is the Rutgers Core Component Library (RCCL)?

The Rutgers Core Component library (RCCL) is a set of visually attractive website design elements that prominently feature and adhere to Rutgers brand standards, website best practices, as well as accessibility guidelines. When coupled with a Drupal content management system (CMS)—the library provides ready-to-configure website design elements and functionality.

The Rutgers Component Library features 17 content types (i.e. page templates) with a mix of  more than 65 components and elements. The design approach uses the concept known as atomic design, in which design elements are characterized as  “atoms, molecules, templates, pages, etc.” Learn more about atomic design theory: patternlab.io/resources.  Developers used the open source Pattern Lab software, patternlab.io, to create the patterns for the Rutgers Core Component Library.

The Rutgers Core Component Library is currently available for use with Rutgers Drupal websites. RCCL is available for use by Rutgers units, providing a 95 percent of the design elements needed to create a Drupal website. The RCCL can also be used with other content management systems with further customization, at the user’s expense. 

See Sites Using the Component Library

• Rutgers.edu 

• NewBrunswick.Rutgers.edu 

• Research.Rutgers.edu

What is Drupal™?

Drupal™ is a leading open source software content management for building websites. Open source means that you don’t need to buy the software. There are no licensing fees, ever. Drupal is supported by one of the largest open source communities of developers in the world. Units may use consultants, have developers on staff, or use Rutgers information technology resources to configure Drupal in order to create a website. Modules are used to extend the out-of-the-box functionality of Drupal, and also to integrate with other services, applications, and third-party programs to create structured content for dynamic web experiences. 

Other similar content management systems include Wordpress and Joomla.

For more information, visit Drupal.org.

What are the benefits of using the Rutgers Core Component Library?

Using the RCCL can help you save time and money in designing your website. Using a Drupal Content Management System, the pre-built design systems offer both design and functionality needed to spin-up a ready-to-configure website. A website developer with Drupal knowledge is needed in order to configure the component library.
 
While each website project is different, the following diagrams illustrate where your project may benefit in using the RCCL. Let's consider an example of project savings for a hypothetical website project in which design takes two months and programming requires about three months accounting for about 45 percent of an overall project budget. Using the component library, you could save both time and money on your next website project—an estimated month and a half on design and two months of development and about 32 percent overall cost savings.

How can I use the component library to create a website?

The component system is an enhancement to–not a replacement for–the CMS. It is NOT equivalent to website-in-a-box experiences such as Site-in-a-Box, Wix, or Squarespace. Creating new websites still requires formal planning and production, including information design/site structure, content strategy, and technical development/ backend integration. Once a structural and content framework has been established, creating the actual pages of the site can be done more easily, flexibly, and with greater variety than in a traditional CMS set-up–at the same time encouraging faithful expression of the institution’s brand and design vision.

In the CMS environment, sets of components are aligned with designated content types (for example “landing page” or “article.”) One component can be in many different sets. A content creator builds a page by first choosing the appropriate content type, and then indicating which components from the available set they want to include. Some content types are organized so that the content creator can add any amount of components from that set, in any order. Each addition to the page involves choosing a component from the set (via a drop-down) and populating it. Some content types are more like templates: the layout of the page is preset, and components are “turned on and off” by populating or not populating them with information.

What functionality is provided with the component library?

The Rutgers Core Component Library on Drupal features:

• Content management content editing functions using WYSIWIG menus, i.e., elements the need to know html, saved page revisions, content moderation
• 17-content types (i.e., page templates) 
• 65-plus reuseable components
• Events calendar
• Staff directory
• Mini-site
• News portal
• Topic-driven filtered pages using site taxonomy
• Photo-, video- and ambient video-rich
• Content syndication
• Role-based permissions

What is "taxonomy" and how is it used in the RCCL to help manage content?

Within the content management system, an editor has the ability to curate content based on a topic, also known as a “taxonomy term"— think of it like a “tag”. These topic tags allow the editor to categorize information, and then display articles assigned to that topic within certain components and content types. 

In the system, you will be required to use the “Term ID number” that corresponds to this term/tag. Taxonomy terms should be created with the thought of creating categories for the topics you most-often want to display by a term/topic.  All taxonomy terms are considered as part of the "news" category of your site. 

Additional information about using taxomony terms is available in the user guide available on the resources section of this site (NetID required).

What is content syndication and its benefits to my unit?

The Rutgers Core Component Library Drupal version provides the ability to syndicate content, that is, share articles, events, and feature articles with other websites that also use the component library. In addition within your RCCL website, you will have access to any articles shared by other sites using the RCCL. 

Content syndication is a great way to amplify stories created and housed on your website and to leverage the editorial contributions provided by other units using the component library.

Additional information about content syndication is available in the user guide available on the resources section of this site (NetID required).

What’s needed to get started using the Component Library?

1. Schedule a Live Web-based Demo and/or complete RCCL Interest Form: Learn about the design and functional benefits of using the component library. 

► Complete the Component Library Interest Form to schedule your demo today. 

2. Required Training: Website Policy and Visual Identity

 University Website Policy: Understand the university's website policies and best practices to better serve univerity audiences. 
Time: 25-30 minutes  | Format: Web-based | Cost: Free for Rutgers Units
► Learn more or register in Rutgers Canvas Online Learning (NetID required)

University Visual Identity: Learn about how to use the university's visual identity system to benefit your unit.
Time: 10-15 minutes  | Format: Web-based  | Cost: Free for Rutgers Units
► Learn more or register in Rutgers Canvas Online Learning (NetID required)

3. Join the to Shared Teams Rutgers Core Component Library - Drupal User Group

All RCCL users should be a member of the Rutgers Core Component Library - Drupal User Group Team website, regardless of if you are using Drupal. Members of the university who are not using the RCCL are also invited to join this community of website owners, managers, and enthusiasts. 

►Link to the Drupal User Group Team (Rutgers NetID/Connect Account Required, Opens Microsoft Teams).
In the team, users can access user guides, training material, post questions, and receive updates about the RCCL. Access to a private channel will be set-up for your RCCL project.

4. Read and Submit the Terms of Usage Agreement: Both the website owner/sponsor and any consultant or developer who will use or have access tothe the Rutgers Core Component Library code must read, agree to, and submit this agreement.
►Read and complete the Terms of Usage Agreement (Qualtrics Form): https://rutgers.ca1.qualtrics.com/jfe/form/SV_6RLyxLilsKhAzEq

5. Establish a Website Hosting Account:

There are a lot of steps that precede actually building your website. See the notes below about the entire website development process below. When you are ready to start building your website, you'll need a secure hosting location. Rutgers OIT offers various website hosting packages, including those optimized for Drupal.

► Learn about OIT Website Consulting Services

6. Secure a Drupal Website Developer 

Drupal is powerful content management tool. In order to set-up and configure a website using the Component Library, units must secure the assistance of knowledgeable Drupal website developer. Rutgers OIT offers various website development services.  In addition, units may consider hiring website consultants. The ACE program offers access to website developers that already have a master contract in place with the university, simplifying the procurement process. Your technical consultant should also be able to manage and resolve any technical issues throughtout the development of your project. After a project's completion, units may also consider keeping a maintenance process in-place with the developer, in the event of any issues.

A website developer (fee-based) can:

• Install the required server environment: PHP 7.2 Minimum, Composer 1.10, NodeJS 12, Git, etc.
• Obtain access to Rutgers Gitlab
• Install the Rutgers Drupal Core Component Library
• Install the Drupal with Composer
• Access to Rutgers core repository, Drupal Installation profile, pattern lab library
• Create a new custom homepage
• Create new components or integrations, if needed
• Set-up the site for a basic configuration and launch, which includes:
  • Set Homepage Node ID
  • Create Taxonomy Links
  • Establish Main Menu
  • Configure Google Search ID and Map API Keys
  • Configure mass site redirects
  • Content Syndication configuration (TBD)
  • Google Analytics Account to connect to Google Tag Manager (optional)
  • Request OEmbed name record from the NOC
• Provide on-going technical assistance during and after the creation of your website.

Is there additional third-party software required to use the component library?

Yes. In order to configure aspects of your website and to use some of the components, third-party software, which requires set-up and/or separate licensing fee paid to those services may be needed.

The following details third-party software requirements:

• Google Search ID (for Search This Site Feature): Rutgers Core has been developed to work with Google Search. Rutgers OIT can provide google search information in order to set-up a “Search this site” functionality.  A Google Search ID is needed in order to enable a search that only searches your site, which is triggered through the "search this site" radio button in the search component in the site’s super-navigation.
  • A Google search ID can be set up using this third-party link: https://cse.google.com/cse/create/new. Your website programmer can configure this search ID within your site. The other searches set up on the site for "People" and "Search All Rutgers" will redirect users to the search.rutgers.edu interface. 
     
• Google Geocoding API Keys(for Events Map display): For any event, one can add a location, that enables a Google Map to display on the event page. Two Google Map Geocoding API keys are required to enable this functionality.
  • Component library adopters can request a Google map API by sending an email to rccltechteam@rutgers.edu. 
     
• Social Media Component: Rutgers Core has been developed to work with Curator.io, which must be purchased separately. Curator is a social media aggregator that will allow you to create various feeds using the social media feeds that you manage. There are a range of monthly pricing levels, from free to $200. The professional level plan or higher is needed, so that the customized styling within the site can be applied. Currently Curator.io supports Facebook, Twitter, Instagram, Tumblr, Flickr, Pinterest, YouTube, LinkedIn and RSS.
  • Learn more about Curator.io.
  • See the Social Media Component in use at the bottom of this page: https://www.rutgers.edu/academics/global-learning 
• Vimeo, Pro Level (for Ambient Video Display): Various components throughout the site allow for the display of ambient video, which is usually decorative short video clips that have no sound. In order to display ambient video on the site, a Vimeo account, at the Pro level or higher is required. 
  • Learn more about Vimeo (Pro).

What are some items to consider in defining my project and the website requirements?  

Define the scope of your project and identify your team to assist with various aspects of creating a user-focused website. All website projects are different and will have different requirements. Your unit may have the ability to facilitate these items in-house or may need to consider hiring consultants to assist with the following aspects of your project.  Some typical aspects in the website development process include the following:

• Project Management
• Discovery/Strategy
• Information Architecture
• Design
• Technical Development
• Content Creation
• Testing and Launch

What ongoing website development costs may be associated with adopting the Component Library?

• Website hosting
• Drupual website developer or programmer, as needed for administrative level functions, monthly security or other code updates
• Third-party software licenses (required to use some components in the component library)
• Project management (Optional)
• Content creation and editorial updates (Optional)

What Drupal programming was used to create the component library?

This project leverages a core Drupal technology, the installation profile. Normally when Drupal is installed, one of two profiles is available: standard or minimal. The installation profile controls the modules and theme that are available after the site is installed.

This site uses a custom installation profile, Rutgers Core (rutgers). The majority of the content entities and theming that will be used on rutgers.edu will also be used to build other Rutgers sites. Maintaining all of this shared functionality in a single repository maximizes reusability while minimizing maintenance resources.

Rutgers Core also manages the version of Drupal, and the common contributed modules needed. It will be listed as a dependency in the composer.json for the project and move to its own repository once the project is complete. The profile is found in the codebase at docroot/profiles/rutgers.

The base theme for the site is found here in docroot/profiles/rutgers/themes . Every common content entity has an associated module in the docroot/profiles/rutgers/ modules directory. Most of these modules only load a set of default configuration to define the entity when they are initially installed. Any additional custom code needed for the function of the entity or feature is also found in the corresponding module.

Content Entities
Editorial content is maintained in eight main fieldable entities: Content, Cost, Graduate and Undergraduate Programs, Media, Paragraphs, Questions, Taxonomy.

What Drupal type of approach was taken in creating the programming for the component library? 

Drupal’s paragraph entity is used to build flexible but structured content. Paragraphs are used to build sections and containers of repeated, similar content. Some advantages of paragraphs are that they group fields together (they are the de facto replacement for Field Group in Drupal 8) and enable drag-to-reorder functionality on templates where this is allowed.

The site contains 72 paragraph types, each of which encapsulates a unique combination of text, image and video fields into a single entity.

How is the code for the Rutgers Drupal Core Component Library managed? 

Rutgers Core Component Library is supported by University Marketing and Communications and partner units across Rutgers including the New Brunswick Information Technology Services, Office of Information Technology, Rutgers Communications (RCOMM), who collaborate to ensure the code is updated as needed for code integrity and security needs. A collective group of skilled technologists, editorial, marketing, and project management professional serve on the Component Library Working Group, which oversees the technical development and maintenance of the component library.

Rutgers units who adopt the component library are invited to contribute new components to the shared repository of components. All new requests will be reviewed for need, programming integrity, and technical compatibility by the Component Library Working Group.

Learn more about governance and the Component Library Working Group

What version of Drupal is the Rutgers Drupal Core running on? 

Rutgers Drupal Core is running on Drupal 8.9. Once all of the contributed modules used to develop Rutgers Drupal Core are compliant with Drupal 9, the core system will be updated to Drupal 9. The timing of this is unknown at this time. Individual site adopters are responsible for updated their individual sites. Neither the working group, nor sponsoring partners, provide technical assistance for ongoing site maintenance. Individual component library users are encouraged to work with their information technology leads and/or consultants for ongoing technical support for their website.

What are the benefits of using Pattern Lab?

Pattern Lab allowed the developers of this site to effectively create designs that were translated by Pattern Lab into twig files—design variables that will be passed into your content management system upon installation. Pattern Lab allows for the design to be configured and managed separately from the content management system programming—making it easier to make design changes to a website.

Pattern Lab is open source software available at no cost users.