PHPackages                             iastate/frontend-component-library - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. iastate/frontend-component-library

ActiveLibrary[Utility & Helpers](/categories/utility)

iastate/frontend-component-library
==================================

Frontend component library for Iowa State University.

1.0.80(7mo ago)55934[1 issues](https://github.com/iastate/iastate22-frontend/issues)1JavaScript

Since Aug 30Pushed 7mo ago7 watchersCompare

[ Source](https://github.com/iastate/iastate22-frontend)[ Packagist](https://packagist.org/packages/iastate/frontend-component-library)[ RSS](/packages/iastate-frontend-component-library/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (6)DependenciesVersions (114)Used By (1)

Iowa State University Front End Library
=======================================

[](#iowa-state-university-front-end-library)

This is a frontent library designed and built for use in Iowa State University web projects.

- Staging site: [staging2.idfive.com](https://staging2.idfive.com/iowa-state-university/fractal/), currently displaying the master branch. Use `guest/guest` for username/password.
- Repo: [Bitbucket private](https://bitbucket.org/idfivellc/iowa-state-frontend/src/master/).
- Build pipelines: [Buddy](https://app.buddy.works/idfive/iowa-state-frontend/), idfive access only.

Installation of this library into your projects
-----------------------------------------------

[](#installation-of-this-library-into-your-projects)

### Installing via composer

[](#installing-via-composer)

Whenever possible, we reccomend using composer to install this library, to ensure all future updates can be pulled in to your project.

`composer require iastate/frontend-component-library`

### Using the library

[](#using-the-library)

In general, to use this library in your own project, you would need to link the CSS/JS files from the build folder:

- Link to `/build/css/index.css`
- Link to `/build/css/print.css` (print syles only)
- Link to `/build/js/index.js`

You can then pull, and utilize the provided markup examples in your own project.

Development
-----------

[](#development)

This library is designed to be used "as-is" for most developers. If you wish to modify this library, you will need to create your own fork. This section is strictly information for those working on, and committing to, this project.

The component library includes [Fractal](http://fractal.build) for component based development. Your own components can be added to the `src/components` folder. Static assets such as JavaScript, CSS and images will be served out of the `build` folder, but can also be configured to your specific needs by editing the [fractal.js file](fractal.js). For more information, read the [fractal guide](http://fractal.build/guide).

### General notes:

[](#general-notes)

- Installed Boostrap 5.1, the site uses the default breakpoints
- Using Iowa State color variables
- Using Iowa State Font Awesome for social media icons and various elements
- All CSS/JS is scoped to not interfere with Boostrap, using a prefix of "iastate22-" on relevant classes
- All components live in the `src/components` directory
- The page structure can be found in `src/components/_page-preview.twig`. For individual components, the structure is located in `src/components/_preview.twig`

### Dependencies

[](#dependencies)

Dependencies need to be installed with [node/npm](https://docs.npmjs.com/getting-started/installing-node), and is best pinned to stable versions via [nvm](https://github.com/nvm-sh/nvm). More on [node usage at idfive](https://developers.idfive.com/#/front-end/node).

- `cd idfive-component-library`
- `nvm use`
- `npm install`

### Building for development

[](#building-for-development)

To start the fractal development server:

- `cd idfive-component-library`
- `nvm use`
- `npm run fractal`

### Building for production

[](#building-for-production)

To build your code for production, prior to a release, run the following:

- `npm run build`
- `npm run fractal:build`

This will generate `build` and `fractal` folders at the root of your project. The `build` folder contains all of your compiled assets (CSS, JavaScript etc.), while the `fractal` folder contains a static generated version of your Fractal component library, which can be used for previews and an online reference to your component library. The `build` folder is committed, in order that projects may use it as a dependency directly.

#### Versioning

[](#versioning)

Releases for this project should follow [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

Steps when releasing:

- Commit (or merge) and push master to origin.
- Tag `1.0.1` (the new release version), and push to origin. The tag is what composer uses to define a new release.

### Markup

[](#markup)

- Written using Twig templates
- Proper ARIA functionality is used to meet WCAG accessibility guidelines

#### Page wrapper and overall structure

[](#page-wrapper-and-overall-structure)

This structure below shows the overall wrappers and ordering needed to properly display the layout:

```

  Skip To Main Content

      {% include "@site-header" with header %}

        {{ yield }}

      {% include "@site-footer" with footer %}

```

- The `.skip-link` link is provided for accessibility purposes
- The `.off-canvas` div is in use to set `overflow-x: hidden;` on the whole page to prevent unwanted horizontal scrolling
- Next is the `.max-bound` div, which provides a max-width, (and 100% width), centers the content and provides a background-color the the whole document
- Next our main site header is added `{% include "@site-header" with header %}`
- Then the `` is added which contains all of the page content `{{ yield }}`
- After the closing `` tag, the footer is added `{% include "@site-footer" with footer %}`
- Kitchen sink pages have an additional tag `` directly after ``, which provides left and right padding for the page

### Images

[](#images)

All images should be added to `src/images` which compiles to `build/images/*`.

### CSS/JS

[](#cssjs)

- All CSS/JS/Images will be compiled from `src/*`.
- All CSS to be written as SCSS, and compiled via Webpack.
- All CSS compiled from `src/scss/index.scss`
- All theme JS is written as TypeScript, and compiled to stable, browser-compliant JS via Webpack.
- ALL JS to be compiled from Typescript in `src/js/index.ts`

#### Utility Classes

[](#utility-classes)

- In `_base.scss`, `.align-left`, `.align-right`, and `.align-center` handle images placed in WYSIWYG sections
- In `_base.scss`, the `.skip-link` class is for the "Skip To Main Content" button for accessibility
- In `_placeholder-selectors.scss`, `.visible-for-screen-readers` is used to hide content but allow it to be accessibly read/spoken
- In `_placeholder-selectors.scss`, `.outer-pad-x` handles horiztonal padding throughout various parts of the site
- In `_placeholder-selectors.scss`, `%responsive-img` is a placeholder selector which sets up object-fit for images and the padding-top percentage for the associated pseudo element which sets the height of the image
- In `_placeholder-selectors.scss`, `.caption` is a re-used type style for image and video captions
- In `_placeholder-selectors.scss`, `.arrow` is the arrow shape used throughout various button and nav styles
- In `_base.scss`, there are two helper classes for remove the space above and below paragraph widgets. `.paragraph-widget-no-margin-bottom` will reduce the `margin-bottom` of the widget to zero and `.paragraph-widget-no-margin-top` will reduce the `margin-top` top zero. These both have `!important` tags attached to ensure there are no conflicts.

Acceptance Standards
--------------------

[](#acceptance-standards)

- [W3C Validation](https://validator.w3.org/)
- Passes Accessibility check using WAVE and Google Lighthouse
- Provides fallback of full content for non-JS users.

###  Health Score

45

—

FairBetter than 93% of packages

Maintenance58

Moderate activity, may be stable

Popularity24

Limited adoption so far

Community24

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 79.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~10 days

Recently: every ~89 days

Total

105

Last Release

236d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/b26755984e1a3152bf53dffa104c927637b824f54c2aa817f02a5039cf22c60c?d=identicon)[danrogers](/maintainers/danrogers)

![](https://www.gravatar.com/avatar/64f90ad5084ea31d4ff3cbfca9cf9da40fb4cfc9bc8c2457a3105788dcbe7ec5?d=identicon)[brad.walker](/maintainers/brad.walker)

![](https://www.gravatar.com/avatar/ebb50b1b9f59146ab36b500abcc08d49774027e312f9005d7f2d83244238843e?d=identicon)[webdev-iastate](/maintainers/webdev-iastate)

---

Top Contributors

[![bradwalk](https://avatars.githubusercontent.com/u/91695974?v=4)](https://github.com/bradwalk "bradwalk (636 commits)")[![MarkID5](https://avatars.githubusercontent.com/u/87031330?v=4)](https://github.com/MarkID5 "MarkID5 (104 commits)")[![sheng-iastate](https://avatars.githubusercontent.com/u/29558474?v=4)](https://github.com/sheng-iastate "sheng-iastate (29 commits)")[![ItsJustRBid5](https://avatars.githubusercontent.com/u/124620134?v=4)](https://github.com/ItsJustRBid5 "ItsJustRBid5 (27 commits)")[![drogers98](https://avatars.githubusercontent.com/u/3209424?v=4)](https://github.com/drogers98 "drogers98 (4 commits)")[![simonidfive](https://avatars.githubusercontent.com/u/111444670?v=4)](https://github.com/simonidfive "simonidfive (2 commits)")

### Embed Badge

![Health badge](/badges/iastate-frontend-component-library/health.svg)

```
[![Health](https://phpackages.com/badges/iastate-frontend-component-library/health.svg)](https://phpackages.com/packages/iastate-frontend-component-library)
```

###  Alternatives

[saintsystems/nova-resource-group-menu

Resource group sub-menus for Laravel Nova.

2742.7k](/packages/saintsystems-nova-resource-group-menu)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)