awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
jonikorpi avatar

jonikorpi/Golden-Grid-SystemArchived

0
View on GitHub↗
1,600 stars·268 forks·CSS·MIT·14 viewsgoldengridsystem.com↗

Golden Grid System

Golden Grid System is a responsive CSS grid framework designed for structuring fluid, multi-column web pages that automatically adapt to different screen sizes. It functions as a fluid layout generator, providing a responsive design tool for arranging flexible layouts that fold gracefully across desktop, tablet, and mobile devices from a single layout foundation.

The framework supports multi-device web development by using proportional fluid sizing to scale container widths and column dimensions dynamically with mathematical percentages rather than fixed pixel values. It handles layout folding through media queries that recalculate element spans, hide columns, or stack them at specific breakpoints, while synchronising vertical line heights and margin spacings with a constant structural baseline unit to maintain consistent horizontal rhythms.

Features

  • Responsive Layouts - Structures web pages with fluid columns that automatically adjust and fold based on the viewing screen size.
  • Baseline Grid Layouts - Synchronises vertical line heights and margin spacings with a constant structural baseline unit to maintain consistent horizontal rhythms.
  • CSS Column-Count Multi-Column Layouts - Adapts multi-column layouts to narrower viewports by recalculating element spans and hiding or stacking columns at specific breakpoints.
  • CSS Grid Layout Design - Structures web page content with pre-calculated column widths and proportional spacing for consistent visual alignment.
  • Responsive Design Patterns - Builds flexible website layouts using a fluid multi-column grid that automatically adapts to different screen sizes and devices.
  • Responsive Grid Layouts - Arranges page content using a flexible multi-column grid that scales fluidly across different screen sizes and device dimensions.
  • Cascading Style Sheets - Structures modular layout rules and spacing overrides natively in standard styling sheets without requiring heavy JavaScript runtimes.
  • Proportional Sizing Logic - Scales container widths and column dimensions dynamically using mathematical percentages rather than fixed pixel values to maintain layout proportions.
  • Responsive CSS Frameworks - Provides a CSS layout system for building fluid, multi-column web pages that automatically adapt to different screen sizes.
  • Web Development - Designs and develops web interfaces that render correctly across desktops, tablets, and mobile phones from a single layout foundation.
  • Layout Generators - Provides a responsive design tool for structuring flexible layouts that fold gracefully across desktop, tablet, and mobile devices.

Star history

Star history chart for jonikorpi/golden-grid-systemStar history chart for jonikorpi/golden-grid-system

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Curated searches featuring Golden Grid System

Hand-picked collections where Golden Grid System appears.
  • CSS layout framework

Projects sharing features with Golden Grid System

These projects share indexed features with Golden Grid System. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • north/northN

    north/north

    4,798View on GitHub↗

    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-configur

    CSS
    View on GitHub↗4,798
  • jhu-ep-coursera/fullstack-course4jhu-ep-coursera avatar

    jhu-ep-coursera/fullstack-course4

    10,934View on GitHub↗

    This project provides educational course materials and reference code for learning frontend web development. It serves as a tutorial and collection of examples demonstrating how to build responsive user interfaces using HTML, CSS, and JavaScript. The repository contains practical implementations and references for responsive web design, specifically focusing on fluid grids and media queries to adapt layouts across different screen sizes. It includes client-side scripting samples that illustrate how to add interactive behavior and dynamic functionality to web pages. The material covers a broa

    JavaScript
    View on GitHub↗10,934
  • bootstrap-vue/bootstrap-vuebootstrap-vue avatar

    bootstrap-vue/bootstrap-vue

    14,450View on GitHub↗

    Bootstrap-vue is a Vue.js component library and responsive UI kit based on the Bootstrap CSS framework. It provides a frontend component suite of reusable interface elements designed for building mobile-first websites and web applications. The project wraps Bootstrap CSS classes in Vue components to manage styles and behaviors through reactive state. It integrates a responsive layout management system that synchronizes internal component states with Bootstrap's grid system and device breakpoints. The library covers a wide range of interface capabilities, including data display with sortable

    JavaScripta11yaccessibilityaccessible
    View on GitHub↗14,450
  • android/compose-samplesandroid avatar

    android/compose-samples

    22,893View on GitHub↗

    Compose Samples is a collection of reference implementations for the Jetpack Compose UI library, serving as a practical guide for building native Android user interfaces. It demonstrates the use of a declarative framework where Kotlin functions describe layout structures and data dependencies, enabling developers to construct modern, reactive interfaces. The repository highlights architectural patterns that prioritize maintainability and testability, such as layered organization and unidirectional data flow. It showcases how to implement adaptive layouts that automatically adjust to various s

    Kotlinandroidjetpack-compose
    View on GitHub↗22,893
Compare all 30 related projects→

Frequently asked questions

What does jonikorpi/golden-grid-system do?

Golden Grid System is a responsive CSS grid framework designed for structuring fluid, multi-column web pages that automatically adapt to different screen sizes. It functions as a fluid layout generator, providing a responsive design tool for arranging flexible layouts that fold gracefully across desktop, tablet, and mobile devices from a single layout foundation.

What are the main features of jonikorpi/golden-grid-system?

The main features of jonikorpi/golden-grid-system are: Responsive Layouts, Baseline Grid Layouts, CSS Column-Count Multi-Column Layouts, CSS Grid Layout Design, Responsive Design Patterns, Responsive Grid Layouts, Cascading Style Sheets, Proportional Sizing Logic.

Which projects share features with jonikorpi/golden-grid-system?

Projects with overlapping indexed features include: north/north — North is a responsive web design methodology and Sass-based CSS architecture framework. It provides a system for… jhu-ep-coursera/fullstack-course4 — This project provides educational course materials and reference code for learning frontend web development. It serves… bootstrap-vue/bootstrap-vue — Bootstrap-vue is a Vue.js component library and responsive UI kit based on the Bootstrap CSS framework. It provides a… android/compose-samples — Compose Samples is a collection of reference implementations for the Jetpack Compose UI library, serving as a… franciscop/picnic — Picnic is a classless CSS framework and styling library that applies visual themes directly to native HTML elements.… jalxob/cool-kitten — Cool-kitten is a web framework designed for building responsive layouts that incorporate multi-speed parallax…