# north/north

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/north-north).**

4,798 stars · 281 forks · CSS · MIT

## Links

- GitHub: https://github.com/north/north
- awesome-repositories: https://awesome-repositories.com/repository/north-north.md

## Description

North is a responsive web design methodology and Sass-based CSS architecture framework. It provides a system for building mobile-first user interfaces using fluid grids and progressive enhancement techniques to ensure a consistent experience across different browser capabilities and screen sizes.

The project features a standardized CSS naming system that uses Sass mixins to programmatically generate class names, distinguishing between components, layouts, and states. It also functions as a frontend project scaffolding tool, providing a generator to bootstrap new environments with pre-configured stylesheets and task runners.

Beyond styling, the framework covers a broad surface of web development standards, including semantic HTML implementation with RDFa metadata and web accessibility auditing. It incorporates a content-first design strategy and an agile frontend workflow to coordinate the transition from information architecture and user personas to production-ready components.

The system includes tools for automating CSS naming and scaffolding project templates to accelerate initial setup.

## Tags

### User Interface & Experience

- [Design System Components](https://awesome-repositories.com/f/user-interface-experience/design-system-components.md) — Provides a comprehensive framework for building reusable components and layouts to ensure a consistent visual identity. ([source](https://github.com/north/north#readme))
- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Implements a mobile-first responsive design framework using fluid grids and progressive enhancement. ([source](https://github.com/north/north#readme))
- [Design Systems](https://awesome-repositories.com/f/user-interface-experience/design-systems.md) — Provides a system for creating grids, style tiles, and component guides to establish a standardized visual identity. ([source](https://github.com/north/north#readme))
- [Semantic Markup Standards](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/accessible-content-structuring/semantic-markup-standards.md) — Uses semantic HTML tags and RDFa metadata to optimize search engine indexing and content accessibility. ([source](https://github.com/north/north/blob/master/README.md))
- [Fluid Percentage Grids](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/windowed-grids/fluid-percentage-grids.md) — Implements layout systems using relative percentage widths to resize automatically based on the viewport. ([source](https://github.com/north/north#readme))
- [Information Architecture Resources](https://awesome-repositories.com/f/user-interface-experience/information-architecture-resources.md) — Models content types and maps site hierarchies to ensure data is reusable and valuable information is prominent. ([source](https://github.com/north/north#readme))
- [Mobile-First Prioritization](https://awesome-repositories.com/f/user-interface-experience/mobile-interfaces/mobile-input-optimization/mobile-ux-optimizations/mobile-first-prioritization.md) — Implements a mobile-first focus that prioritizes essential data and actions for an optimal small-screen experience. ([source](https://github.com/north/north#readme))
- [Programmatic Class Generators](https://awesome-repositories.com/f/user-interface-experience/programmatic-class-generators.md) — Uses Sass mixins to programmatically generate standardized CSS class names based on strict conventions.
- [Responsive Design Patterns](https://awesome-repositories.com/f/user-interface-experience/responsive-design-patterns.md) — Employs a mobile-first methodology using fluid grids and progressive enhancement to adapt interfaces across screen sizes.
- [Responsive Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-layouts.md) — Implements fluid layout grids that adapt seamlessly across different screen sizes and devices.
- [Responsive Grid Systems](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-systems.md) — Provides flexible layout frameworks that ensure visual structures extend naturally based on content size. ([source](https://github.com/north/north#readme))
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Provides a modular system for creating reusable UI components and layouts instead of static pages. ([source](https://github.com/north/north#readme))
- [State-Driven UI Controllers](https://awesome-repositories.com/f/user-interface-experience/state-driven-ui-controllers.md) — Provides a management layer that tracks and styles UI elements based on state using data attributes. ([source](https://github.com/north/north#readme))
- [Stylesheet Maintainability Standards](https://awesome-repositories.com/f/user-interface-experience/stylesheet-maintainability-standards.md) — Structures CSS and Sass partials into a hierarchical system of global, base, component, and layout directories. ([source](https://github.com/north/north#readme))
- [Hierarchical Directory Structures](https://awesome-repositories.com/f/user-interface-experience/stylesheet-maintainability-standards/hierarchical-directory-structures.md) — Structures stylesheets into a tiered system of global, base, component, and layout directories for maintainability.
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Organizes CSS into a scalable system of components, layouts, aspects, and elements. ([source](https://github.com/north/north#readme))
- [Styling Architectures](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures.md) — Organizes Sass partials into a modular architecture to ensure maintainable styling and knowledge distribution. ([source](https://github.com/north/north#readme))
- [Standardized Class Generation](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems/sass-abstractions/utility-class-generation/standardized-class-generation.md) — Uses programmatic mixins to generate standardized CSS class names based on strict prefix and attribute conventions.
- [Design Systems and Style Guides](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/design-system-documentation-strategy/design-systems-and-style-guides.md) — Guides the creation of grids, style guides, and component libraries to ensure visual consistency. ([source](https://github.com/north/north#readme))
- [Content-First Hierarchies](https://awesome-repositories.com/f/user-interface-experience/content-first-hierarchies.md) — Prioritizes website development by establishing core content and navigation before adding branding and interactive elements. ([source](https://github.com/north/north#readme))
- [Flexible Grid Layouts](https://awesome-repositories.com/f/user-interface-experience/flexible-grid-layouts.md) — Builds flexible grid layouts that derive proportions and structure from the specific requirements of the content. ([source](https://github.com/north/north/blob/master/README.md))
- [Data-Attribute-Driven Interactivity](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/ui-interactivity/data-attribute-driven-interactivity.md) — Implements UI behavior and visual state transitions triggered by HTML data attributes.
- [Content-Driven Layouts](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts/responsive-layout-switches/column-based-responsive-grids/content-driven-layouts.md) — Develops page structures based on content needs using asymmetric or ratio-based columns rather than generic symmetric grids. ([source](https://github.com/north/north#readme))
- [Web Accessibility Compliance](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/web-accessibility-compliance.md) — Implements design and development standards, including RDFa metadata, to ensure inclusive web experiences.
- [Source Order Standardization](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/html-content-processing/source-order-standardization.md) — Maintains a single codebase and consistent HTML source order to provide all users access to the same information. ([source](https://github.com/north/north#readme))
- [In-Browser Design](https://awesome-repositories.com/f/user-interface-experience/in-browser-design.md) — Builds user interfaces directly with HTML, CSS, and JavaScript to ensure designs conform to web realities. ([source](https://github.com/north/north#readme))
- [In-Browser Design Methodologies](https://awesome-repositories.com/f/user-interface-experience/in-browser-design-methodologies.md) — Creates user interfaces using live web technologies to ensure designs are technically feasible and standard-compliant. ([source](https://github.com/north/north#readme))
- [Component Interaction Management](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components/component-interaction-management.md) — Controls behavioral changes of interface elements using data attributes to decouple interaction logic from styling. ([source](https://github.com/north/north/blob/master/README.md))
- [Content-Driven Grids](https://awesome-repositories.com/f/user-interface-experience/layout-managers/grid-layouts/content-driven-grids.md) — Implements asymmetric, custom grid layouts derived from specific content requirements rather than generic symmetric systems. ([source](https://github.com/north/north#readme))
- [Accessibility Audits](https://awesome-repositories.com/f/user-interface-experience/screen-reader-accessibility/accessibility-audits.md) — Provides guidelines and methods for auditing content source order and usability via screen readers. ([source](https://github.com/north/north#readme))
- [Style Tiles](https://awesome-repositories.com/f/user-interface-experience/style-tiles.md) — Communicates the essence of a visual brand using fonts, colors, and interface elements without needing full-page mockups. ([source](https://github.com/north/north#readme))
- [UI Component Prototypes](https://awesome-repositories.com/f/user-interface-experience/ui-component-prototypes.md) — Creates standalone interface elements to test visual and interactive concepts before full production.
- [UI Prototyping](https://awesome-repositories.com/f/user-interface-experience/ui-prototyping.md) — Enables the creation of code-based examples of user flows to validate design ideas before production. ([source](https://github.com/north/north/blob/master/README.md))
- [Visual Brand Assets](https://awesome-repositories.com/f/user-interface-experience/visual-brand-assets.md) — Produces abstracted deliverables of fonts, colors, and interface elements to communicate the visual essence of a brand. ([source](https://github.com/north/north#readme))

### Web Development

- [Mobile-First Development Strategies](https://awesome-repositories.com/f/web-development/mobile-first-development-strategies.md) — Provides a mobile-first framework that defines a minimal base for small screens and scales up fluidly.
- [Responsive CSS Frameworks](https://awesome-repositories.com/f/web-development/web-standards/responsive-css-frameworks.md) — Provides a comprehensive system for building mobile-first, responsive user interfaces using fluid grids and progressive enhancement.
- [Responsive Web Frameworks](https://awesome-repositories.com/f/web-development/backend-development/web-frameworks/rendering-and-layout-architectures/responsive-web-frameworks.md) — Provides a framework for building mobile-first, cross-browser compatible web layouts using standardized grid systems.
- [Capability Detection Engines](https://awesome-repositories.com/f/web-development/capability-detection-engines.md) — Queries a browser for specific available capabilities to load experience enhancements without relying on user agent strings. ([source](https://github.com/north/north#readme))
- [Component-Based Architectures](https://awesome-repositories.com/f/web-development/component-based-architectures/component-based-architectures.md) — Organizes user interfaces into modular, reusable components to ensure consistent styling.
- [Progressive Enhancement](https://awesome-repositories.com/f/web-development/progressive-enhancement.md) — Implements a strategy of layering advanced styles and interactions over a basic semantic HTML foundation. ([source](https://github.com/north/north#readme))
- [Progressive Enhancement Tools](https://awesome-repositories.com/f/web-development/progressive-enhancement-tools.md) — Provides a framework for delivering targeted stylesheets based on detected browser capabilities. ([source](https://github.com/north/north#readme))
- [Progressive Enhancement Workflows](https://awesome-repositories.com/f/web-development/progressive-enhancement-workflows.md) — Builds interfaces by layering advanced styles and interactions over a basic semantic HTML foundation.
- [RDFa Metadata Integration](https://awesome-repositories.com/f/web-development/rdfa-metadata-integration.md) — Attaches RDFa metadata to HTML objects to improve search engine optimization and content accessibility. ([source](https://github.com/north/north#readme))
- [Standardized Web Components](https://awesome-repositories.com/f/web-development/standardized-web-components.md) — Applies semantic markup, accessibility standards, and CSS naming conventions to create reusable layout and element building blocks. ([source](https://github.com/north/north#readme))
- [Sass Design Systems](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/asset-lifecycle-orchestration/asset-pipelines/css-preprocessors/sass-design-systems.md) — Organizes stylesheets into hierarchical directories and uses Sass mixins to generate standardized class names.
- [Browser Feature Detection Utilities](https://awesome-repositories.com/f/web-development/browser-feature-detection-utilities.md) — Provides mechanisms to verify browser capabilities at runtime before loading advanced UI enhancements.
- [Normalize-Based Browser Resets](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-infrastructure/normalize-based-browser-resets.md) — Provides a standardized CSS baseline to override browser defaults for consistent rendering. ([source](https://github.com/north/north#readme))
- [Browser Rendering](https://awesome-repositories.com/f/web-development/browser-rendering.md) — Ensures consistent element rendering and responsive behavior across browsers using CSS resets and viewport tags. ([source](https://github.com/north/north#readme))
- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Reduces critical path blocking through the use of minification, CDNs, and lazy loading. ([source](https://github.com/north/north#readme))
- [Performance Auditing](https://awesome-repositories.com/f/web-development/performance-optimizations/performance-auditing.md) — Offers processes for analyzing web pages to identify performance bottlenecks and improve load times. ([source](https://github.com/north/north#readme))
- [Static Site Performance Optimization](https://awesome-repositories.com/f/web-development/static-site-performance-optimization.md) — Implements strategies to limit download sizes and load times for users on slow mobile networks. ([source](https://github.com/north/north#readme))
- [Viewport Configurations](https://awesome-repositories.com/f/web-development/web-standards/responsive-css-frameworks/viewport-configurations.md) — Configures viewport meta tags and CSS directives to control how browsers render pages across different screen sizes. ([source](https://github.com/north/north#readme))

### Content Management & Publishing

- [Content Strategy Planning](https://awesome-repositories.com/f/content-management-publishing/content-strategy-planning.md) — Provides a process for defining project vision, user personas, and information architecture through content modeling. ([source](https://github.com/north/north#readme))

### Software Engineering & Architecture

- [Agile Design Workflows](https://awesome-repositories.com/f/software-engineering-architecture/agile-design-workflows.md) — Implements an agile frontend workflow to coordinate the transition from information architecture to production-ready components. ([source](https://github.com/north/north#readme))
- [Content-First Workflows](https://awesome-repositories.com/f/software-engineering-architecture/content-first-workflows.md) — Guides project execution using an agile approach that prioritizes content over layout from kickoff through development. ([source](https://github.com/north/north#readme))
- [CSS Architecture Patterns](https://awesome-repositories.com/f/software-engineering-architecture/css-architecture-patterns.md) — Organizes stylesheets into hierarchical systems to maintain large-scale CSS codebases.
- [Coding Standards](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/coding-standards.md) — Establishes a unified set of semantic HTML, accessibility, and naming conventions to maintain codebase consistency. ([source](https://github.com/north/north#readme))
- [Naming Conventions](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/coding-standards/naming-conventions.md) — Implements a structured prefixing and casing system to ensure consistent naming of layouts, components, and elements. ([source](https://github.com/north/north#readme))
- [CSS Component Naming](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/coding-standards/naming-conventions/css-component-naming.md) — Enforces a strict naming convention for CSS classes to distinguish between layouts, components, and states.
- [Agile Workflows](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/software-development-lifecycle/agile-workflows.md) — Coordinates designers and developers through iterative sprints and user stories to align product vision with implementation. ([source](https://github.com/north/north#readme))
- [Web Development Standards](https://awesome-repositories.com/f/software-engineering-architecture/web-development-standards.md) — Establishes comprehensive design and development standards for HTML, CSS, and JavaScript to align workflows. ([source](https://github.com/north/north#readme))
- [Collaborative Design Workflows](https://awesome-repositories.com/f/software-engineering-architecture/collaborative-design-workflows.md) — Coordinates parallel design workflows by pairing designers with developers to build browser-based prototypes iteratively. ([source](https://github.com/north/north#readme))
- [Rapid Prototyping](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/rapid-prototyping.md) — Develops standalone code demonstrations to quickly test interactions, styles, or user flows before production. ([source](https://github.com/north/north#readme))
- [Development Workflow Managers](https://awesome-repositories.com/f/software-engineering-architecture/development-workflow-managers.md) — Coordinates team roles and agile scrum workflows using user stories and backlogs to guide the release process. ([source](https://github.com/north/north#readme))
- [Front-End Performance Optimization](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/front-end-performance-optimization.md) — Applies minification and strategic caching to optimize the critical render path and responsiveness. ([source](https://github.com/north/north#readme))
- [Product Development Methodologies](https://awesome-repositories.com/f/software-engineering-architecture/product-development-methodologies.md) — Directs project execution using agile and mobile-first methodologies to align design and development outcomes. ([source](https://github.com/north/north#readme))
- [Project Lifecycle Management](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/project-management/project-lifecycle-management.md) — Guides the entire development process using an agile, content-first approach to ensure iterative value delivery. ([source](https://github.com/north/north#readme))
- [Vision Definitions](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/project-management/project-lifecycle-management/project-principle-definitions/vision-definitions.md) — Includes practices for defining the project vision, target users, and unique selling points to guide development. ([source](https://github.com/north/north/blob/master/README.md))
- [Standard Versioning](https://awesome-repositories.com/f/software-engineering-architecture/standard-versioning.md) — Tracks iterations of development standards using semantic versioning to lock projects into stable requirements. ([source](https://github.com/north/north#readme))
- [Standardized Development](https://awesome-repositories.com/f/software-engineering-architecture/standardized-development.md) — Applies a curated set of best practices and standards across the entire project lifecycle. ([source](https://github.com/north/north#readme))

### Testing & Quality Assurance

- [Web Accessibility](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility.md) — Validates content using screen readers and text-only browsers to ensure logical source order and usability. ([source](https://github.com/north/north#readme))
- [Web Accessibility Standards](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility-standards.md) — Establishes standards for semantic markup and RDFa metadata to ensure inclusive and SEO-friendly web content.
- [Accessibility Auditing](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility-standards/semantic-document-structures/accessibility-auditing.md) — Provides processes for verifying semantic HTML and interface accessibility compliance using screen readers.
- [Semantic Metadata Extensions](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility-standards/semantic-document-structures/semantic-metadata-extensions.md) — Implements semantic metadata extensions to improve accessibility and search engine indexing.

### Data & Databases

- [Content Data Models](https://awesome-repositories.com/f/data-databases/data-structure-definitions/user-defined-types/content-data-models.md) — Defines reusable content types with specific attributes to ensure data remains independent of the presentation layer. ([source](https://github.com/north/north#readme))

### Development Tools & Productivity

- [Project Bootstrapping Templates](https://awesome-repositories.com/f/development-tools-productivity/project-bootstrapping-templates.md) — Ships a project bootstrapper that generates initial directory structures, task runners, and component boilerplates. ([source](https://github.com/north/north#readme))
- [Project Scaffolding](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/project-scaffolding-configuration/project-scaffolding.md) — Offers a scaffolding tool to quickly bootstrap new projects with pre-configured stylesheets and task runners. ([source](https://github.com/north/north#readme))
- [Project Scaffolding Templates](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-templates.md) — Uses a project generator to bootstrap environments with pre-configured stylesheets and task runners.
- [Browser-Based Prototyping](https://awesome-repositories.com/f/development-tools-productivity/rapid-prototyping-environments/browser-based-prototyping.md) — Uses HTML, CSS, and JavaScript to create rapid prototypes that conform to actual web capabilities. ([source](https://github.com/north/north#readme))
- [Rapid Software Prototyping](https://awesome-repositories.com/f/development-tools-productivity/rapid-software-prototyping.md) — Provides a way to create standalone code demonstrations to experiment with interaction options and user flows. ([source](https://github.com/north/north#readme))

### Part of an Awesome List

- [Web Development](https://awesome-repositories.com/f/awesome-lists/devtools/web-development.md) — Design and development standards for aligning web projects.