flower-power - The “Flower Power” Component Style Guide

  •        429

Flower Power: Deconstruction of a design component

https://github.com/JohnAlbin/flower-power

Dependencies:

kss : ^2.0

Tags
Implementation
License
Platform

   




Related Projects

bem-components - Set of components for sites development

  •    Javascript

bem-components is an open-source library that provides a set of ready-made visual components (blocks) for creating web interfaces. The library provides design themes. This version introduces the islands theme, which implements the new Yandex design. Features include supporting multiple themes at once, and creating new themes.

react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules

  •    Javascript

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS & postcss-preset-env features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules. Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

postcss-bem-linter - A BEM linter for postcss

  •    Javascript

A PostCSS plugin to lint BEM-style CSS.BEM-style describes CSS that follows a more-or-less strict set of conventions determining what selectors can be used. Typically, these conventions require that classes begin with the name of the component (or "block") that contains them, and that all characters after the component name follow a specified pattern. Original BEM methodology refers to "blocks", "elements", and "modifiers"; SUIT refers to "components", "descendants", and "modifiers". You might have your own terms for similar concepts.

sass-build-structure - An example SASS build structure sample to start a project

  •    CSS

After reading the book SMACSS and finding it very helpful the Front End team at Evernote has used some of the ideas in our SASS build. We've found breaking the SASS files out into directories (Base, Layout, Modules, and Views) helps organize our files in a project and compile CSS into a clean, logical file. Each page has a SASS (.scss) file created that acts as a project file that imports the individual modular components from Base, Layout, Modules, and Views that are needed to build the particular page. This build methodology is currently being used on Evernote.com.

style - An opinionated starting point for scalable, maintainable CSS architecture.

  •    HTML

An opinionated starting point for scalable, maintainable CSS architecture. Style is an approach to writing CSS born & refined over several years at Envato by the team responsible for maintaining & evolving the 9 year old Rails codebase that powers Envato Market.


kss - A methodology for documenting CSS and generating styleguides.

  •    Ruby

Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format. It is not a preprocessor, CSS framework, naming convention, or specificity guideline. The methodology and ideas behind Knyle Style Sheets are contained in SPEC.md. At its core, KSS is a documenting syntax for CSS.

css-components - :coffee: A set of common UI Components using the power of CSS and without Javascript

  •    HTML

A set of common UI Components using the power of CSS and without Javascript. * CSS3 transitions are not supported in IE8 and below. ** Janky z-index. See tooltip on right example.

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

Vuetify.js - Material Component Framework for Vue.js 2

  •    Javascript

Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze. Build amazing applications with the power of Vue and Material Design and a massive library of beautifully crafted components. Created according to Google's Material Design Spec, Vuetify components feature an easy-to-remember semantic design that shifts remembering complex classes and markup, to type-as-you speak properties that have simple and clear names.

Patternfly - A community of designers and developers collaborating to build a UI framework for enterprise web applications

  •    Javascript

The PatternFly library is a collection of UI design patterns. Design patterns are recurring solutions that solve common design problems and provide a common language for people who create user interfaces. In general, patterns do not specify requirements, but rather, present recommended solutions to design problems. PatternFly patterns build on that approach by additionally considering the needs of complex enterprise IT software, and the habits and motivations of its users, in their recommendations.

design-system-components - 🛠 Component code and tests for the Australian Government design system

  •    HTML

The components for the Australian Government Design System. The design system components are distributed through the npm ecosystem and can only be installed through the npm command. Npm requires node.js and the components needs node.js 8 or higher.

design-system - Priceline.com Design System

  •    Javascript

If you'd like to contribute to the design system, we'd love to have your help. If you work at Priceline.com, please join the #design-system Slack channel and let us know what you'd like to work on. For all contributors, please be sure to read the Contributing doc.

grunt-styleguide - Universal CSS styleguide generator for grunt

  •    HTML

If you are looking for a replacement and are using kss or styledocco see below. Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow.

argon-design-system - Argon - Design System for Bootstrap 4 by Creative Tim

  •    CSS

Start your development with a Design System for Bootstrap 4. It is open source, free and it features many components that can help you create amazing websites. Argon Design System is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files.

material-components-web - Modular and customizable Material Design UI components for the web

  •    Javascript

Material Components for the web (MDC-Web) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.MDC-Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

ant-design-vue - An enterprise-class UI components based on Ant Design and Vue. 🐜

  •    Vue

An enterprise-class UI components based on Ant Design and Vue. We recommend using npm or yarn to install,it not only makes development easier,but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.

stylable - Stylable - CSS for components

  •    TypeScript

Stylable enables you to write reusable, highly-performant components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability. At build time, the preprocessor converts the Stylable CSS into a minimal, flat, static, valid vanilla CSS that works cross-browser.

bem-constructor - A Sass library for building immutable and namespaced BEM-style CSS objects

  •    CSS

BEM Constructor is a Sass library for building immutable and namespaced BEM-style CSS objects. By enforcing a consistent and programatic way of defining objects (blocks, elements and modifiers) it ensures a more structured, robust and secure object codebase that is easy to understand and maintain. Objects defined using the constructor are impossible to modify and reassign by mistake or omission.