style-dictionary - A build system for creating cross-platform styles.

  •        42

Style once, use everywhere. A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

https://github.com/amzn/style-dictionary

Dependencies:

commander : ^2.9.0
fs-extra : ^6.0.1
glob : ^7.1.1
lodash : ^4.16.4
resolve-cwd : ^2.0.0
tinycolor2 : ^1.4.1
chalk : ^2.4.1

Tags
Implementation
License
Platform

   




Related Projects

react-native-style-tachyons - Better styling for React Native

  •    Javascript

React Native Style Tachyons brings functional styling to react-native. It is inspired by Tachyons and uses it's scales and naming convention. More about the advantages of this approach. Of course you can use your old styles along tachyons' classes.

generator-style-prototype - Yeoman Generator for Style Prototypes

  •    Javascript

Style Prototypes are a Pattern Library tool for designing in browser. Style prototyping is a technique used to create a typical instance of a design from which a final site can be assembled. Style Prototypes are a unique tool because, not only are they responsive by default (meaning your client will be able to sign off on styles they've been able to see natively on all browsers and devices), they encourage Style and Color Guide driven Style Tile and Component Guide generation. This means that after you've built out your Style Tile, you'll be on your way to having finished your Style Guide, which you need to for Style Guide Driven Design (and coincidentally takes lots of design decisions off of the shoulders of Front End Developers). You'll also never need to have someone guess at what colors they can use with a fully built out Color Guide with both hex and Sass values.

react-native-drawer - React Native Drawer

  •    Javascript

React native drawer, configurable to achieve material design style, slack style, parallax, and more. Works in both iOS and Android. This module supports a wide range of drawer styles, and hence has a lot of props.

theo - Theo is a an abstraction for transforming and formatting Design Tokens

  •    Javascript

Theo is an abstraction for transforming and formatting Design Tokens. As of Theo v6, the gulp plugin is distributed as a separate package: gulp-theo.

gatsby-style-guide-guide - A boilerplate for creating your own custom style guide

  •    Javascript

Style Guide Guide is a boilerplate for creating a custom style guide for your organization's design system. It provides just enough IA and hooks to get you going. As a bonus, I've provided links to helpful resources and inspiration to help you as you create your own custom style guide. Gatsby Style Guide Guide is built using Gatsby, a site generator built with React.


carbon-components - The component library behind Carbon Design System

  •    Javascript

The Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs. These designs are systemic and logical, as they all follow the same universal principles. The component library gives developers a collection of re-usable HTML and SCSS partials for building their products.

18f.gsa.gov - This repository contains 18F's website.

  •    CSS

This repo houses the 18F website. We use the Draft U.S. Web Design System as a front end framework. The site is built and served through the Federalist platform. 18f.gsa.gov extends the U.S. Web Design System and 18F Brand guidelines to create a style that is professional, unique, and informative. The style guide, located at 18f.gsa.gov/styleguide/ documents the patterns and components used to create this theme.

react-native-actionsheet - An elegant ActionSheet component for React Native.

  •    Javascript

Cross platform ActionSheet. This component implements a custom ActionSheet and provides the same way to drawing it on the defferent platforms(iOS and Android). Actually, In order to keep the best effect, it still uses the ActionSheetIOS on iOS. The style of ActionSheet is defined in lib/styles.js. We can pass the styles prop to cover default style. See Example .

Expo - Easily build cross platform apps with React Native

  •    Objective-C

Expo helps to build apps with React Native. It is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript. Expo apps are React Native apps which contain the Expo SDK. The SDK is a native-and-JS library which provides access to the device’s system functionality (things like the camera, contacts, local storage, and other hardware).

theme - Style your React Native components on one place

  •    Javascript

The React Native component's style is usually defined as a static variable along with the component itself. This makes it easy to build self contained components that always look and behave in the same way. On the other hand, it complicates building themeable (or skinnable) components that could have multiple styles that can be customized without touching the component source code. @shoutem/theme is built to address that problem. With themes, you can target specific components in your app and customize them through one file, just like you would do it with CSS on the web. All the documentation is available on the Developer portal.

mrn - Material React Native (MRN) - A Material Design style React Native component library.

  •    Javascript

This repository is no longer maintained because there is no time to maintain. Recommend another one: React Native Material Design, which is heavily developed on top of the mrn project.

react-styleguidist - Isolated React component development environment with a living style guide

  •    Javascript

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files. Check out the demo style guide. The change log can be found on the Releases page.

NHibernate - object-relational mapper for .NET

  •    CSharp

NHibernate is a mature, open source object-relational mapper for the .NET framework. NHibernate is a port of Hibernate Core for Java to the .NET Framework. It handles persisting plain .NET objects to and from an underlying relational database.

sri - Build truly native cross platform (web,ios,android) apps using scalajs and react, react-native ,This project moved to new organization : https://github

  •    Scala

Sri (Scala React interface) is a scalajs library to build truly native cross platform (mobile (ios and android) and web) applications. It is based on reactjs and react-native, so you must be familiar with them in order to use this library.

ui - Customizable set of components for React Native applications

  •    Javascript

Shoutem UI is a set of styleable components that enables you to build beautiful React Native applications for iOS and Android. All of our components are built to be both composable and customizable. Each component has a predefined style that is compatible with the rest of the Shoutem UI, which makes it possible to build complex components that look great without the need to manually define complex styles. All the documentation is available on the Developer portal.

docz - ✍🏻It has never been so easy to document your things!

  •    TypeScript

Libraries that make our life easier coming up every day. Styleguides and design system are growing so fast. Today, tools that allow us to be quick and effective in what we are doing are really necessary. We can't lose time with tasks that should be trivial for us. Thinking about that docz came out. Documenting our things is one of the most important and heavy processes when you're creating something new. We waste a lot of time with unnecessary setups to build something that can represent and we want with our own style.

styleguide-generators - An overview of automatic living styleguide generators

  •    

Pattern Libraries (or Style Guides) are a helpful tool in developing websites. Read more about Creating Style Guides at this A List Apart article. Maintaining a static Pattern Library (in HTML/CSS) is hard work and errorprone. There are, however, various tools that help us generate a dynamic Pattern Library or 'Living Style Guide'.

vue-styleguidist - Created from react styleguidist for Vue Components with a living style guide

  •    Javascript

Project was started when not finding a tool that generates documentation of components with hot reloading, read documentation and have a playground. Created from React Styleguidist, implement additional support to read and compile .vue files. Only supports 2.x. Vue Styleguidist is a style guide generator for Vue components. It lists component and shows live, editable usage examples based on Markdown files. You can use it to generate a static HTML page to share and publish or as a workbench for developing new components using hot reloaded dev server.

style-guide-guide - A boilerplate for creating your own custom style guide

  •    HTML

Style Guide Guide is a boilerplate for creating a custom style guide for your organization's design system. It provides just enough IA and hooks to get you going. As a bonus, I've provided links to helpful resources and inspiration to help you as you create your own custom style guide. Style Guide Guide is built using Jekyll, a static site generator which works quite well for managing the content of a style guide.