classnames - A simple javascript utility for conditionally joining classNames together

  •        21

A simple utility for conditionally joining classNames together

https://github.com/JedWatson/classnames

Tags
Implementation
License
Platform

   




Related Projects

classcat - Declarative string builder for DOM className properties

  •    Javascript

Classcat is a declarative string builder for DOM className properties. Each class can be conditionally added and removed depending on the falsiness of the value it is paired with. Here is a button you can toggle on and off. Go ahead and try it online.

babel-plugin-react-css-modules - Transforms styleName to className using compile time CSS module resolution

  •    Javascript

Transforms styleName to className using compile time CSS module resolution. In contrast to react-css-modules, babel-plugin-react-css-modules has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs 17kb react-css-modules + lodash dependency).

flexbox-react - Unopinionated, standard compliant flexbox component

  •    Javascript

Unopinionated, standard compliant flexbox components. You should not learn any proprietary syntax, classnames or API's for this. If you know how to use flexbox, you know how to use flexbox-react components.

react-accessible-accordion - Accessible Accordion component for React

  •    Javascript

Try a demo now. We recommend that you copy them into your own app and modify them to suit your needs, particularly if you're using your own classNames.

focal-point

  •    

A small set of CSS classnames to help keep images cropped on the focal point for responsive designs. Using only HTML/CSS, web authors can specify an image's focal point, which stays as the image's primary focus, while the image's available width changes on responsive webpages. Crop and re-size images depending on available width and let CSS to do all of the work, and without any JavaScript.


elemental - A flexible and beautiful UI framework for React.js

  •    Javascript

React & CSS UI Framework. Currently under development; built by @JedWatson and @JossMac at Thinkmill.

babel-plugin-css-in-js - A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e

  •    Javascript

A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the className prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server. babel-plugin-css-in-js works seamlessly on both client and server. It has built-in support for media queries, pseudo-classes, attribute selectors, and theming. The plugin's options allow you to configure vendor-prefixing, minification, and class name compression.

ember-component-css - An Ember CLI addon which allows you to specify styles for individual components

  •    Javascript

An Ember CLI addon which allows you to specify component-specific style sheets in an app, addon, engine, or in-repo addon. Rules defined in the style-sheets will automatically be namespaced with an autogenerated class. That autogenerated class will also be injected into your component's classNames property. This enables you to worry less about rules clashing across component styles.

react-inline - Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e

  •    Javascript

Note: Thanks to the new possibilities of Babel v6+, there's also my babel-plugin-css-in-js project, which works exactly the same but doesn't require a separate CLI/API. If you're using Babel for code transpilation, just put babel-plugin-css-in-js in your build pipeline. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the className prop of React elements.

native-css - Convert pure CSS to React Style or javascript literal objects.

  •    Javascript

Convert pure CSS to javascript literal objects or React Style. 'Cause of this, all ids and inheritance relationships are converted to classes.

expressive-css - An approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand

  •    HTML

Expressive CSS is not intended to be a library or framework, but rather a presentation of an approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand.For more info, go to the Expressive CSS Project Page.

bootstrap-grid-only - Bootstrap's grid and responsive utility classes only, without any extras

  •    CSS

Bootstrap's responsive grid and responsive utility classes only, without any extras. Lightweight yet still powerful. Style to taste. Include one of the precompiled grids (grid12.css, grid24.css, grid30.css, grid100.css) in your site, or customize and compile grid.css.less with command line lessc or LessPHP (no extends are used).

RCSS - Turn your JavaScript objects into CSS classes.

  •    Javascript

Turn your JavaScript objects into CSS classes. Designed with React and Browserify in mind.

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.

tailwindcss - A utility-first CSS framework for rapid UI development.

  •    CSS

A utility-first CSS framework for rapidly building custom user interfaces. For full documentation, visit tailwindcss.com.

utility-opentype - Simple, CSS utility classes for advanced typographic features.

  •    CSS

This is described in more detail in the design decisions. The following examples are supported on Chrome, Firefox, and Internet Explorer 10+ and fallback as gracefully elsewhere. Works on its own, or alongside frameworks like Basscss. That’s it! You’re ready to use the classes within your markup.

react-jss - JSS integration for React.

  •    Javascript

React-JSS provides components for JSS as a layer of abstraction. JSS and the default preset are already built in! Try it out in the playground. React-JSS wraps your component with a higher-order component. It injects a classes prop, which is a simple map of rule names and generated class names. It can act both as a simple wrapping function and as an ES7 decorator.

utils - CSS utility classes

  •    Javascript

The full collection of SUIT CSS utility classes. Requires suitcss-preprocessor or similar in your build process, if you choose to use the packages directly. Read more about SUIT CSS's design principles.

clickspark

  •    Javascript

On a click on the h1 the default sparkling effect will be fired. The particles will be targeted to the center position of the HTML-element with the className ".sparklingDiv". So the particle target can be placed everywhere via CSS.

react-css-modules - Seamless mapping of class names to CSS modules inside of React components.

  •    Javascript

If you are considering to use react-css-modules, evaluate if babel-plugin-react-css-modules covers your use case. babel-plugin-react-css-modules is a lightweight alternative of react-css-modules. babel-plugin-react-css-modules is not a drop-in replacement and does not cover all the use cases of react-css-modules. However, it has a lot smaller performance overhead (0-10% vs +50%; see Performance) and a lot smaller size footprint (less than 2kb vs +17kb).





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.