Complete Systems

Context: frontend-dev-bookmarks / Architecture

Ready to use and well documented structures and frameworks for frontend development.

• Atomic Design: Atomic Design discusses the importance of crafting robust design systems, and introduces a methodology for which to create smart, deliberate interface systems.
  • A More Seamless Workflow — Style Guides for Better Design and Development: Ash Connolly explains what styles guides are and which benefits they bring to designers and developers.
  • Atomic Docs: Atomic Docs is a styleguide generator and component manager. Atomic Docs is built in PHP. Inspired by Brad Frost’s Atomic Design principles.
• Authoring jQuery Plugins: jQuery is an utility library and a plugin framework. This section collects resources about creating such plugins.
  • Advanced Plugin Concepts: A collection of best practices for jQuery plugin authoring.
  • How to Create a Basic Plugin: The article describes basic plugin creation and provides a simple boilerplate.
  • Signs of a poorly written jQuery plugin: Collection of jQuery plugin antipatterns.
  • The Ultimate Guide to Writing jQuery Plugins: A comprehensive guide on how to develop jQuery plugins including a simple boilerplate.
  • Writing Stateful Plugins with the jQuery UI Widget Factory: The article demonstrates the capabilities of the Widget Factory by building a simple progress bar plugin.
  • jQuery Boilerplate: This project won’t seek to provide a perfect solution to every possible pattern, but will attempt to cover a simple template for beginners and above.
  • jQuery Plugin Patterns: This project won’t seek to provide implementations for every possible pattern, but will attempt to cover popular patterns developers often use in the wild.
• Block Element Modifier (BEM): Methodology aimed at achieving fast to develop long-lived projects, team scalability, and code reuse.
  • A New Front-End Methodology: BEM: An introduction by Varvara Stepanova at SmashingMagazine.
  • An Introduction to the BEM Methodology: General introduction article on tutsplus.
  • Block, Element, Modifying Your JavaScript Components: Mark Dalgleish is discussing how to organize React code with BEM and build everything with Webpack.
  • Emmet filter for BEM: If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes.
  • Fifty Shades of BEM: Article describes different flavors of BEM.
  • Introduction To BEM Methodology (Toptal): General introduction to BEM methodology and platform.
  • MindBEMding – getting your head ’round BEM syntax: Article on csswizardry explaining the BEM syntax for CSS classes.
  • Support for BEM modules in Sass 3.3: The next major release of Sass is poised for release and with it comes real support for BEM-style modules…
  • To BEM or not to BEM: A series of interviews on BEM methodology.
• Polymer Project: The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web.
  • Building web components using ES6 classes: Web components evolve markup into something that’s meaningful, maintainable, and highly modular. Thanks to these new API primitives, not only do we have improved ergonomics when building apps, but we gain better overall structure, design, and reusability.
  • ShadowDOM Visualizer: This tools allows you to visualize how Shadow DOM renders in the browser.
  • What is shady DOM?: On browsers that support shadow DOM, it’s possible to have an element that is rendered with complex DOM, but have that complexity hidden away as implementation detail.
• SMACSS: SMACSS (pronounced “smacks”) is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
• T3: T3 is a minimalist JavaScript framework sponsored by Box Inc. that provides core structure to code.
• TodoMVC: A project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

License

This work is licensed under a Creative Commons Attribution 4.0 International License.

Please provide a link back to this repository. This is not necessary for GitHub forks.