Design system utilities for styled-components, glamorous, and other css-in-js libraries
react css-in-js design-systems styled-components glamorous glamor typography layout emotion fela cxs responsiveAn updated and curated list of readings to illustrate best practices and patterns in building scalable, available, stable, performant, and intelligent large-scale systems. Concepts are explained in the articles of prominent engineers and credible references. Case studies are taken from battle-tested systems that serve millions to billions of users. Understand your problems: scalability problem (fast for a single user but slow under heavy load) or performance problem (slow for a single user) by reviewing some design principles and checking how scalability and performance problems are solved at tech companies. The section of intelligence are created for those who work with data and machine learning at big (data) and deep (learning) scale.
system-design backend scalability site-reliability-engineering sre interview architecture devops site-reliability design-patterns back-end back-end-development interview-questions design-systems awesome-list microservices distributed-systems design-system tech big-dataFunctional css for humans. Quickly build and design new UI without writing css.
css html design design-systems design-patterns design-tools responsive-design frontend functional-css oocss postcss responsive performancePrimer is the design system that powers GitHub. Primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project. The Primer repo is managed as a monorepo that is composed of many npm packages.
css sass ui-components framework design-system design-systemsStorybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
storybook styleguide testing components library isolation webpack addons ui react vue react-native design-systems angular polymerAll Evergreen developers get in free. Register with SEGMENTDIGSDEVS. Evergreen is built on the belief that you can never predict all future requirements, only prepare for it. Instead of creating fixed configurations that work today, Evergreen promotes building systems that anticipate new and changing design requirements.
design-systems evergreen segment ui reactThis is a materials library which assists designers to define, refine and finalise the inter-page logic of their products. At the early stage of the product design process, you can use it to draw the logic diagram between pages. Throughout this process, it can help you visualise and understand product architectures and business processes more easily. OmniGraffle is a software which can help you create precise and beautiful graphics ranging from website wireframes, flow charts, organization structure to illustrations. There are unlimited usage scenarios. For example, you can use it to facilitate thinking process, to visualise brain storm ideas, to draw mind map, to create prototypes of website and PDF files, or use it as a style manager. OmniGraffle provides extensive options for objects, canvases, templates, inspectors, and stencils, fully representing its nature of WYSIWYG. You can also customise your own "Stencils", a group of pre-defined drag-able elements.
omnigraffle stencil axure ux design design-systemsKnow a resource that isn't listed below? Feel free to create a new pull request, or open an issue. A design system is a collection of documentation on principles and best practices, that helps guide a team to build digital products. They are often embodied in UI libraries and pattern libraries, but can extend to include guides on other areas such as 'Voice and Tone'.
awesome-list design-systems pattern-library ui-library awesomeWelcome to the Salesforce Lightning Design System brought to you by Salesforce UX. Having trouble getting these steps to work on your machine? Follow the troubleshooting guide below.
css salesforce-lightning design-systems htmlVue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development. The tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.
vuejs design-systems design-system vue-styleguidist components component-library vue vue-design-system vue.js design systemInstall the Kit CLI to get started with isolated component development. Create an examples folder for your components. This folder can be used for development, documentation, and testing purposes.
react components cli development documentation testing ui design-systems styleguide library isolation mdx jsxRead more about x0 in our blog post. x0 renders a directory of React components, automatically handling routing based on filename. Create a docs folder and add an index.js file.
react jsx webpack compositor static-site-generator zero-configuration testing components isolated development-environment ui design-systems documentation docs mdx markdown zero-config prototypingFull Modular Monolith .NET application with Domain-Driven Design approach.
ddd ddd-architecture cqrs architecture rest-api dotnetcore clean-architecture clean-code domain-driven-design ddd-cqrs design-patterns design software-architecture rest ddd-example entity-framework-core design-systems modularity monolithPrimer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.
css sass ui-components framework design-system design-systems primer githubSystem design is a very broad topic. Even a software engineer with many years of working experience at a top IT company may not be an expert on system design. If you want to become an expert, you need to read many books, articles, and solve real large scale system design problems. Spend a few minutes questioning the interviewer and agreeing on the scope of the system. Remember to make sure you know all the requirements the interviewer didn't tell you about in the beginning.
interview interview-questions interview-preparation design-systems systemTheo is an abstraction for transforming and formatting Design Tokens. As of Theo v6, the gulp plugin is distributed as a separate package: gulp-theo.
design-systems design-tokens css design properties tokens sass scss stylus less ios android auraModern and minimalist React UI library, originating from Vercel's design. run yarn add @geist-ui/react or npm i @geist-ui/react install it.
react design-systems react-components design-system geist geist-ui components react-uiUse component classes like btn, card, etc… to build your UI.
css ui-design design-systems design-pattern postcss css-framework design-patterns ui-kit ui-components css-components ui-pattern design-system ui-library ui-framework tailwind tailwindcss tailwind-css components component framework theming design uiBase is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. On npm, you can find Base Web as baseui.
react design-systems react-components component-library uber baseui basewebThis monorepo contains the core of Pattern Lab / Node and all related engines, UI kits, plugins and utilities. Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles. If you'd like to see what a front-end project built with Pattern Lab looks like, check out this online demo of Pattern Lab output.
nodejs design-systems pattern-lab atomic-design
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.