grid-styled - Responsive React grid system built with styled-system

  •        29

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

https://jxnblk.com/grid-styled/
https://github.com/jxnblk/grid-styled

Dependencies:

system-components : ^3.0.0

Tags
Implementation
License
Platform

   




Related Projects

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.

react-styled-flexboxgrid - Grid system based on styled-components and flexbox for React

  •    Javascript

Set of React components that implement flexboxgrid.css but with styled-components. Furthermore, it allows to customize grid configuration like gutter width... Highly inspired by the excellent react-flexbox-grid which the API is nearly the same than this module.

styled-css-grid - 🍱 A tiny CSS grid layout for React

  •    Javascript

A tiny (~2kb) CSS grid layout for React, built with styled-components πŸ’…. See the website.

styled-tools - Useful interpolated functions for CSS-in-JS

  •    Javascript

Useful interpolated functions for styled-components πŸ’…, emotion πŸ‘©‍🎀, JSS and other CSS-in-JS libraries. Same as prop, except that it returns props.theme[path] instead of props[path].


reflexbox - React flexbox layout and grid system

  •    Javascript

Primitive for controlling width, margin, padding and more. Both <Flex /> and <Box /> share the same props.

styled-components - Visual primitives for the component age

  •    Javascript

If you are looking for styled-components v4.0 (under active development), check out the roadmap and dev branch. styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.

styled-components-theme - Defines themes via flexible color selectors for use with styled-components

  •    Javascript

styled-components-theme generates selectors for colors in your styled-components theme that allows color manipulation, using the color library via calls on the selectors themselves. A selector, in this context, is defined as a function that looks like (props) => props.theme.myColor that the styled-components library accepts as a template variable.

styled-theming - Create themes for your app using styled-components

  •    Javascript

<ThemeProvider> is part of styled-components, but is required for styled-theming. Most of your theming will be done with this function.

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.

react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

  •    Javascript

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.

awesome-styled-components - A curated list of awesome styled-components resources πŸ’…

  •    

Please read the contribution guidelines before contributing. Contributions welcome and suggestions! Read the contribution guidelines first.

spectre - Spectre.css - A Lightweight, Responsive and Modern CSS Framework

  •    CSS

Spectre.css is a lightweight, responsive and modern CSS framework. Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.

Singularity - Grids without limits

  •    CSS

Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use. Layout on the web has changed significantly since Scott's first push back on March 7, 2012. First came Flexbox, then CSS Grid. CSS Grid provides layout functionality that covers all of Singularity's usecases and then quite a few more that we were never really able to support.

smooth-ui - Modern React UI library πŸ’…πŸ‘©‍🎀🍭

  •    Javascript

Modern React UI library. Code less, do more. Smooth UI is a style system / UI library for React. It works with Styled Components πŸ’… or Emotion πŸ‘©‍🎀.

jagrid - Japanese-styled grid framework.

  •    Clojure

A CSS framework for Japanese-styled grid sheet.

polished - A lightweight toolset for writing styles in JavaScript ✨

  •    Javascript

When ✨ polished modules are imported properly, tree shaking in webpack and Rollup can be leveraged to reduce your bundle size. ✨ polished has first-class Flow support with zero configuration to assist you in finding type errors while using our modules.

glamorous - πŸ’„ Maintainable CSS with React

  •    Javascript

With the release of glamorous-primitives, now you can use glamorous with react-sketchapp to manage design systems and use React components for designs.You can find documentation and related examples here.

avalanche - Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

  •    CSS

Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers. $av-namespace Global prefix for layout and cell class names. Default: grid.