30 open-source projects similar to bendc/frontend-guidelines, ranked by how many features they have in common. Compare stars, activity and what each one does to find the best Frontend Guidelines alternative.
CSS Guidelines is a comprehensive style guide and reference for writing maintainable, scalable, and modular CSS in large-scale web projects. It provides a set of professional standards for organizing stylesheets and implementing consistent naming patterns to improve long-term codebase health and reduce technical debt. The project centers on a strict methodology for scoping classes to create isolated and predictable components, preventing style leakage between independent parts of a user interface. It emphasizes a flat selector hierarchy to avoid specificity conflicts and encourages the separa
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
This project is a software engineering style guide and a curated collection of architectural patterns and coding standards. It provides a multi-language coding standard to ensure maintainable software across Ruby, Python, JavaScript, and Swift. The project establishes a development workflow specification for version control, continuous integration, and peer review to maintain a linear project history. It also includes a web accessibility framework based on ARIA and WCAG standards, using design tokens and semantic HTML patterns to build inclusive interfaces. The guides cover a broad range of
This project is a CSS architecture framework and style guide providing formal coding standards for CSS and Sass. It establishes a structured approach to naming conventions, property organization, and selector management to ensure consistency across large-scale projects. The framework focuses on decoupling visual styles from JavaScript behavior through specific naming prefixes and utilizes a block element modifier system for component naming. It defines strict guidelines for Sass usage, emphasizing the efficient application of variables and mixins to prevent bloated output and complex dependen
Just is a collection of JavaScript utility libraries designed for data manipulation, functional programming, performance optimization, statistical analysis, and string processing. It provides a set of tools for deep cloning, filtering, and transforming complex objects and arrays. The project is structured as a series of zero-dependency modules, allowing utilities to be used independently to minimize bundle size. It implements functional programming patterns including currying, piping, and partial application, and provides execution control through memoization, debouncing, and throttling. The
Spec is a comprehensive set of frontend coding standard specifications and project architecture guides. It provides a framework for organizing directory structures, module dependencies, and package layouts to create scalable and predictable codebases. The project defines rigorous governance standards for React components, including specific naming conventions and structural patterns for props. It also establishes a JSON API data specification to ensure predictable communication between system components through standardized exchange formats and HTTP response structures. The specification cov
Idiomatic CSS is a CSS style guide and architecture standard designed to ensure the creation of consistent and maintainable styles. It provides a set of standardized rules and conventions for writing idiomatic CSS code, functioning as both a formatting specification and a general guide for style organization. The project focuses on CSS preprocessor best practices, specifically providing guidelines to manage nesting depth and selector specificity to avoid complex cascades. It further distinguishes itself through structured documentation patterns and component sectioning to improve the long-ter
This project provides a comprehensive framework for standardizing CSS architecture and development practices in large-scale web applications. It establishes a structured approach to managing design patterns, ensuring that stylesheets remain maintainable, scalable, and consistent across complex codebases. The methodology centers on the use of block-element-modifier naming conventions to organize user interface components into independent, reusable units. By enforcing flat selector specificity and namespace-based scoping, the framework prevents naming collisions and unintended style overrides.
This project is a collection of reference implementations and prototypes focused on routing, performance optimization, background threading, and user interface components. It serves as a sample library demonstrating the use of modern web platform features and native browser APIs. The repository provides prototypes for high-performance graphics, including 3D effects and animations rendered via hardware acceleration and CSS transformations. It includes implementation examples for client-side routing to synchronize application state with browser URLs and pattern galleries for offloading computat
This project is a comprehensive set of architectural and coding standards for organizing and maintaining high-quality JavaScript applications. It provides a framework for JavaScript project best practices across the full software development lifecycle, establishing unified guidelines for project organization and development. The guidelines cover specific standards for REST API design, utilizing resource-oriented interfaces and standardized HTTP methods. It also includes a web accessibility standard focused on semantic HTML and automated audits, alongside a defined Git workflow standard for br
MDN Web Docs is the official source for comprehensive documentation about HTML, CSS, JavaScript, HTTP, and Web APIs for web developers. It serves as both a complete reference for web browser technologies and a structured learning platform that guides users from beginner to advanced levels through tutorials covering core web standards. The project distinguishes itself by providing a complete reference documentation for standard browser APIs alongside guidance for building accessible websites that work with assistive technologies. It offers documented security techniques and best practices for
This project is a curated knowledge base and technical reference for professional web styling. It serves as a comprehensive guide to modern CSS best practices, focusing on techniques that leverage native browser capabilities to create efficient, maintainable, and scalable stylesheets. The collection emphasizes the use of declarative style logic and modern layout engines to replace brittle, imperative approaches. By prioritizing native pseudo-class state management, logical property mapping, and relative unit scaling, the guide demonstrates how to build responsive interfaces that remain consis
This project provides a methodology for organizing, scoping, and naming styles to ensure maintainable and scalable stylesheets in large web applications. It functions as a structured approach to managing component-based styles, preventing global namespace collisions and simplifying long-term codebase maintenance through a set of established design principles. The architecture relies on strict namespace-based encapsulation, where all class names are prefixed with unique component identifiers to ensure visual isolation between modules. It enforces a class-only selector strategy to avoid the mai
This project is a comprehensive front-end engineering guide and web development curriculum. It serves as a reference for the languages, tools, and architectural patterns used to build web applications, including a dedicated manual for web security and performance. The repository provides a curated tooling catalog for code editing, version control, and deployment workflows. It also includes structured learning paths covering user interface design, state management, and browser performance optimization. The content covers a broad range of engineering domains, including security risk analysis,
This project is a comprehensive front-end development guide and roadmap designed to help engineers master the skills and professional standards required for modern web development. It serves as a technical reference for mastering HTML, CSS, and JavaScript, providing structured learning paths and a map of the professional competencies needed to transition from a beginner to a professional web engineer. The resource functions as a categorized directory and ecosystem overview of the JavaScript landscape. It catalogs industry-standard frameworks, libraries, and utilities, offering specific recomm
Reselect is a state management optimization tool and memoization utility designed to minimize redundant calculations and UI re-renders. It functions as a library for creating memoized selectors that derive specific data from a state store. The library implements input-based memoization and recursive selector composition to create a hierarchy of derived data dependencies. It ensures reference-stable result caching and provides custom equality checking to determine when a cache should be invalidated. The project covers capabilities for derived data computation, frontend performance optimizatio
The A11y Project is a community-driven initiative that serves as a centralized repository for web accessibility documentation, design principles, and educational resources. It provides technical guidance and best practices to help developers and designers build digital products that meet international accessibility standards and accommodate users with diverse sensory and motor needs. The platform distinguishes itself through a commitment to inclusive content strategy and rigorous technical standards. It enforces consistent tone, reading levels, and inclusive language across all documentation
Vue is a progressive JavaScript framework designed for building modular, reactive user interfaces. It utilizes a component-based architecture that allows developers to encapsulate logic, templates, and styles into reusable units. At its core, the framework employs a virtual DOM renderer and a proxy-based reactivity system to synchronize application state with the document object model efficiently. What distinguishes this framework is its focus on developer experience and flexibility. It supports a single-file component format that colocalizes related concerns, alongside a powerful composition
This project is a frontend development blog and markdown static site generator. It functions as a technical knowledge base and a web performance resource, converting markdown files into static HTML pages. The site serves as a personal digital garden for documenting professional growth and frontend learning. It focuses on the curation of technical knowledge, specifically aggregating articles and presentations regarding web performance optimization and browser rendering. The system utilizes a build process involving markdown-based static generation, file-system based routing, and frontmatter-d
Stellar.js is a JavaScript parallax library and scroll-based motion framework used to coordinate DOM element positioning and CSS transforms. It functions as a positioning tool that calculates real-time coordinate shifts for background images and foreground items based on scroll triggers. The library utilizes a CSS transform animation engine to ensure movement is hardware-accelerated on both mobile and desktop browsers. It creates depth effects by applying different movement speeds to elements relative to the natural scroll rate. The framework covers a range of motion capabilities, including
This project is a web accessibility checklist and inclusive design framework. It serves as a digital inclusion guide and audit tool for verifying that web content is perceivable, operable, and welcoming to a diverse global audience. The project provides a structured review process for WCAG compliance, focusing on auditing HTML structure, ARIA roles, keyboard navigation, and visual accessibility. It includes specific standards for reviewing language, typography, and color contrast to ensure inclusive content design. The framework covers broader capability areas including device compatibility
re-frame is a functional framework for building single-page applications in ClojureScript. It provides a centralized, immutable database that serves as the single source of truth for the entire application state, enforcing a strict unidirectional data flow where events trigger state transitions and subsequent view updates. The framework distinguishes itself through a reactive signal graph and an interceptor-based middleware pipeline. By treating application logic as a sequence of data-driven events and declarative side effects, it decouples business logic from the view layer. This architectur
This project is a front-end interview study guide and a collection of structured notes designed for technical job preparation. It serves as a comprehensive reference for web technologies, common technical interview questions, and JavaScript algorithm implementation. The notebook distinguishes itself by integrating specialized guides for web performance optimization, browser API documentation, and JavaScript algorithm references. It provides a structured approach to solving coding challenges involving data structures like binary trees, linked lists, and array manipulation. The content covers
This project is a technical interview repository and a curated collection of study guides designed for backend, frontend, and full-stack engineering evaluations. It provides a JavaScript interview guide and a comprehensive question bank of solved coding challenges and algorithmic problems to prepare developers for job screenings. The resource extends beyond core language skills to include a frontend development syllabus covering DOM fundamentals and accessibility, a backend architecture reference for server-side concepts and distributed systems, and a full-stack study resource for the MERN st
Functional-Light-JS is a JavaScript functional programming library designed to implement functional patterns within JavaScript applications. It serves as a toolkit for declarative data processing, immutable data management, and the construction of complex logic through higher-order functions. The library focuses on a pragmatic implementation of functional programming, providing utilities for curried argument application and function composition. It emphasizes the use of pure functions to calculate state updates and manage application data without side effects. The project covers broad capabi
This project is a technical reference and guide for optimizing the performance of Angular applications. It provides a comprehensive checklist for improving speed and efficiency by focusing on bundle optimization, rendering best practices, and runtime execution. The guide covers a wide array of differentiators including the implementation of progressive web app strategies through service workers and offline caching. It also details methods for improving perceived load times using server-side rendering and application shells. The repository provides guidance on broader capability areas such as
Underscore is a JavaScript utility library providing a suite of functional programming and data manipulation helpers. It serves as a framework for transforming data collections, composing functions, managing objects, and performing precise data type validation without modifying core language prototypes. The project includes a functional programming toolkit designed to control function execution timing and behavior through techniques such as debouncing, throttling, and partial application. It also provides a dedicated object manipulation utility for cloning, merging, picking, and omitting prop
This project is a comprehensive knowledge base and study resource designed for mastering technical interviews. It provides structured guides, roadmaps, and curricula focused on data structures, algorithms, system design, and frontend engineering to help candidates prepare for software engineering screenings. The repository distinguishes itself by offering a holistic approach to professional advancement. Beyond technical drills, it includes a career development handbook covering resume optimization, salary benchmarking, and strategic negotiation coaching. It also provides detailed methodologie
The United States Web Design System is a government design system and accessible UI framework. It provides a collection of standardized CSS and JavaScript components, along with a CSS component library, specifically designed for building consistent federal government websites. The system allows for custom CSS theme development through the use of design tokens for colors, spacing, and typography. Users can customize visual themes and compile custom styles to maintain a unified brand identity across multiple web properties. The framework covers responsive interface design and web accessibility