Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Standard lib for styles in JS

See original GitHub issue

Hi! I’m porting over “'widgets” on our websites from PHP/SASS to to React using styled-components. In doing this, I’ve been looking for JS-friendly replacements for:

Bourbon (e.g. mixins like Compass offers)
Neat (grid)

From my own research, I’ve found that:

color works great for color manipulation.
grid-styled is a fairly new answer for grids.
…not much else.

Personally, I’ve used both Bootstrap and Bulma (my current favorite!) for styling React components.

But, what I suppose I was looking for were recommendations on what libs in the ecosystem would work well with styled-components to fill in the holes that CSS doesn’t cover (but Bourbon & Compass do). That is, until this project deems it appropriate to own that functionality…

Issue Analytics

State:
Created 7 years ago
Reactions:4
Comments:28 (22 by maintainers)

Top GitHub Comments

9reactions

bhoughcommented, Nov 1, 2016

Here is an initial list that I think gets us to a good starting spot. I’ve filtered out any mixins that are purely for adding prefixes only. Also filtered out anything that is reliant on asset pipline functionality (like sprite generation) or helpers that are easily recreated in JS (that don’t have some underlying formula) This includes things like guards, loops, etc. Open to discussion on any of these, or if there are suggestions for any that might be missing:

Mixins

Clearfix
Ellipsis
Flexbox
Font Face
Hide Text
HiDPI Media Query
Keyframes
Placeholder
Radial Gradient
Reset/Normalize
Retina Image
Selection
Size
Timing Functions
Triangle
Word Wrap

Shorthand

Animation
Background
Background Image
Borders
Margin
Inputs
Padding
Position
Transition

Utils

px to em
px to rem
golden ratio

RGB

RGB
RGBA
red
green
blue
mix

HSL

hsl
hsla
hue
saturation
lightness
adjust-hue
lighten
darken
saturate
desaturate
grayscale
complement
invert

Opacity

alpha
rgba
opacify
transparentize

Misc Color

shade
tint

3reactions

ericclemmonscommented, Nov 8, 2016

Dang, so is polished!

:trollface:

Top Results From Across the Web

JavaScript Standard Style

Adopting standard style means ranking the importance of code clarity and community conventions higher than personal style. This might not make sense for...

Google JavaScript Style Guide

1 Introduction. This document serves as the complete definition of Google's coding standards for source code in the JavaScript programming language.

9 CSS in JS Libraries you should Know in 2019

Discover how to use CSS IN Javascript to style your React or other components with the best libraries: Styled components, Glamorous, Radium, Fela, ......

Style Libraries | JavaScript Stuff

The most common type of style library is a CSS processor. These take as input a language similar to CSS but with more...

7 Best CSS-in-JS Libraries for Front-End Developers

6. Styletron ... Styletron is a framework-agnostic CSS-in-JS library that lets you define CSS styles using JavaScript objects. You can use Styletron together...