9Rooftops Framework

Project Description

This project is an ongoing WIP for a full framework that can be used on all 9Rooftops websites. This framework should include simple styling to allow for full creative control.

Setup local development

The following steps will help in setting up the local environment for this project.

cd ~/projects/
git clone [email protected]:9rooftops/framework.9rooftops.com.git
cd ~/projects/framework.9rooftops.com

Start your local env.

lando rebuild -y

Local dev tooling commands

lando grunt build
lando grunt dev
lando grunt favicon
lando grunt sync

lando grunt dev will build, watch and sync.

Contributing

For major changes, create a branch that you will work in. Once fully tested, the branch can be merged into master.

Updating NPM package

Once updates have been approved and merged into master, they can be merged into the npm-package branch. This branch has a few minor edits to allow for projects to pull in and override where needed. Be sure to update the following file were needed.

Increment the version number.

package.json

Add new components

/source/scss/9r-framework.scss

You will need to add any newly created components to this file so they will be part of the build process.

You can then submit the package via the following command.

lando npm publish --access public

The ./web directory contains a PHP-based component library and demo site for the 9Rooftops Framework, a modular CSS/SCSS framework designed for building websites with reusable UI components. Here's a breakdown of its structure and purpose:

Overall Architecture

• Framework Type: Atomic design-based CSS framework with PHP components
• Build System: Uses Grunt for SCSS compilation, JS concatenation/minification, and asset management
• Technology Stack: PHP (server-side), SCSS (styling), JavaScript (interactivity), HTML5

Key Directories and Files

Core Structure

• index.php: Main documentation page explaining the framework's atomic structure (components, elements, layouts, regions, vendors)
• includes/: Shared PHP includes like head.php (HTML head with meta tags and CSS link), header.php (site header with logo and navigation), footer.php, and navigation.php

Components (components/)

Reusable UI modules, each in separate PHP files:

• Layout Components: nine-section.php, nine-grid.php, nine-alternating.php
• Content Components: nine-hero.php (hero banners with images and CTAs), nine-card.php, nine-blockquote.php
• Interactive Components: nine-tabs.php (tabbed content with accessibility features), nine-accordion.php, nine-search.php
• Feedback Components: nine-alert-*.php (success, error, warning, info alerts)
• Utility Components: nine-cta.php, nine-banner.php, nine-milestones.php

Example from nine-tabs.php:

<div class="nine-tabs" data-id="001">
  <div class="nine-tabs__navigation">
    <button class="nine-tabs__menu-item -active" role="tab">Link 1</button>
    <!-- More tabs -->
  </div>
  <div class="nine-tabs__items">
    <div class="nine-tabs__item -active" role="tabpanel">Tab content</div>
  </div>
</div>

Elements (elements/)

Basic UI elements:

• nine-buttons.php: Button styles and variants
• nine-forms.php: Form inputs, selects, etc.

Layouts (layouts/)

Page-specific layouts:

• Header variants (nine-header-a.php, nine-header-b.php)
• Footer variants (nine-footer-*.php)

Assets (assets/)

Compiled and static assets:

• css/: Compiled SCSS (style.css, style.min.css with sourcemaps)
• js/: Concatenated JS (main.js, main.min.js)
• vendors/: Third-party libraries (FontAwesome, Slick carousel, Colorbox, AOS animations, Axe accessibility testing)
• webfonts/: FontAwesome font files
• imgs/, favicon/: Static images and favicons

Pages (pages/)

Demo pages for each component (e.g., nine-tabs.php shows the tabs component in action)

MJML Builder (mjmlbuilder/)

A separate TypeScript-based email template builder using GrapesJS, with components for MJML email templates.

Build and Development

The framework uses Grunt tasks defined in the root Gruntfile.js:

• lando grunt build: Compiles SCSS, concatenates JS, copies vendors
• lando grunt dev: Builds + watches files + BrowserSync for live reloading
• lando grunt favicon: Generates favicons from source image

Key Features

• Responsive Grid System: Uses classes like nine-g (grid), nine-u-1-1 (full width), nine-u-lg-12-24 (half width on large screens)
• Accessibility: ARIA attributes, semantic HTML, screen reader support
• Modular SCSS: Atomic structure with components, elements, regions, partials
• Vendor Integration: FontAwesome icons, AOS animations, accessibility testing with Axe
• Component Variants: BEM-style classes with modifiers (e.g., nine-button -primary)

Change Log

01152025

• Added new version of fontawesome

08012024

• Added AOS for animations
• Removed dark theme so it can be added only when needed

Software Requirements

• Docker
• Lando
• GIT
• GitKraken -optional

License

• MIT