Skip to content

Instantly share code, notes, and snippets.

@pe3

pe3/React-0.13-ES2015-SUIT-CSS.md

Last active August 29, 2015 14:15
Show Gist options
  • Save pe3/0e2b19ce3a26793a6e1a to your computer and use it in GitHub Desktop.
Save pe3/0e2b19ce3a26793a6e1a to your computer and use it in GitHub Desktop.
Download ZIP
React 0.13 ES2015 SUIT CSS
Raw
app.js
// using React v0.13.0 Beta syntax
// http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html
import "./base.css";
import React from "react";
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
HelloMessage.propTypes = { name: React.PropTypes.string };
window.onload = function() {
React.render(<HelloMessage name="World" />, document.getElementById('content'));
}
window.React = React; //for the react inspector
Raw
base.css
@import "suitcss-base";
:root {
--base-link-color: #069;
}
html {
color: #444;
font-size: 1rem;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
a {
color: var(--base-link-color);
text-decoration: none;
}
a:hover,
a:focus,
a:active {
color: var(--base-link-color);
text-decoration: underline;
}
mark {
background-color: #cee2ff;
padding: .1875rem;
border-radius: 3px;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="bundle.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
Raw
package.json
{
"devDependencies": {
"babel-loader": "^4.0.0",
"css-loader": "^0.9.1",
"react": "^0.13.0-beta.1",
"rework-webpack-loader": "^0.1.0",
"style-loader": "^0.8.3",
"suit-loader": "git://github.com/aaronj1335/suit-loader.git",
"suitcss-base": "^0.8.0",
"webpack": "^1.5.3"
}
}
Raw
React-0.13-ES2015-SUIT-CSS.md

to run: webpack-dev-server

suit-loader is deprecated.

should probably use something like rework-webpack-loader but i dont understand webpack or rework well enough.

Raw
webpack.config.js
module.exports = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
devtool: "source-map",
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
{ test: /\.css$/, loader: 'style-loader!css-loader!suit-loader' }
]
}
};
@christianalfoni
Copy link

Hi guys,

I am not familiar with SUIT CSS, but as I see it is the same concept as LESS and SASS, but with some other features?

It basically just needs a loader, like anything else that needs to be preprocessed. Like sass-loader, less-loader etc.

As I understand you should be able to juste replace your config with:

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'       
  },
  devtool: "source-map",
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel"},
      { test: /\.css$/, loader: 'style!rework-webpack' }
    ]
  }
};

rework does not need the css loader. Do not needs the -loader either, it is added automatically.

I have not tested it. But again, webpack loaders are incredibly simple to use, but it requires some mad skills to create one :-) So anything that needs to be transpiled can be transpiled with a loader, including CSS SUIT.

@pe3
Copy link
Author

pe3 commented Feb 17, 2015

@bebraw @christianalfoni Sorry I forgot to give a context. I pinged you guys because of one sentence in your book project regarding CSS:

Of course there are questions such are these kind of ideas compatible with CSS frameworks such as Bootstrap, Foundation or Pure but that's another topic.

I'm myself looking for a way to package ReactJS code and CSS per component as reusable customizable NPM modules. I have tried several approaches but haven't found anything I really like (but it may also just be that I'm not very good at CSS). After my first day with SUITCSS it seems like an interesting mix of utilities, components, methodology, and syntax. I started playing with it yesterday so I don't know yet but I really like the idea of utility classes and gradually adding pre made component modules. I think SUITCSS might be into something regarding the "other topic" you are pondering in your book.

@bebraw
Copy link

bebraw commented Feb 18, 2015

One of the problems is that CSS isn't actually just about styling. It can be intermingled with logic. Let's consider something like a Sidebar component. That will help to illustrate the issue.

Basic markup could look like this:

<Sidebar>
some content would go here
</Sidebar>

I expect it would get fixed to the left side of the screen by default and there would be a handle that could be used to open it. In addition the maximum width of the Sidebar should be fixed. This leads to a couple of questions:

  1. How to deal with the opening logic (ie. setting sidebar container size based on dragging)?
  2. How to set maximum width of sidebar?
  3. How to style sidebar handle?
  4. How to style sidebar content?

Traditionally we would just add some classes to the component, define CSS for 2-4 and deal with jQuery or something to tackle 1. This approach can work with React too but I feel we can get something better.

What if it was possible to inject style as a property? Then we would have something like this:

<Sidebar style={sidebarStyle}>
some content would go here
</Sidebar>

In addition Sidebar would have to bind that style to its contents (ie. content, handle). I guess the component would have some default values to override. The default configuration could look something like this:

style: {
    '.Sidebar': {
        'position': 'fixed',
        'left': 0,
        'top': 0,
        'height': '100%',
    },
    '.Sidebar-handle': {
        'background': '#ddd',
        // how to deal with text? -> :after or go through DOM?
    },
    '.Sidebar-content': {
        'max-width': '200px',
        'width': this.state.width, // set through React logic on drag
    },
}

This gives you a public styling interface and CSS related logic is encapsulated within the component. I followed SUITCSS naming convention here as it seems reasonable. The JSX of Sidebar should match it.

In addition there would have to be something like merge(this.state.style, this.props.style) before rendering. Sidebar-handle should have a drag handler that would modify Sidebar-content width. That sounds like trivial to do in this approach.

There are some props and cons. I'll cover these next.

Pros

  • You get something you can control via React. I expect you could use something like jss to manage the whole thing. The cool thing here is that you can apply various plugins (prefixer and such) to the CSS/JSON before passing it to components.
  • Styles at component level!
  • CSS related logic at component level! I expect this simplifies dealing with complex logic and animations a lot.
  • No cascading. Absolute control over styling.

Cons

  • No cascading. But is this a problem really?
  • External CSS can be problematic given we are using style (first priority) so perhaps it's better to avoid or just deal with colors and such using it?
  • Immature tooling, workflows. This is still experimental and there are no proven ways to do this right.
  • Not having cascading might lead to more code to load but is that a real problem?

At least for now the best thing about SUITCSS for me seems to be the naming scheme. The rest is a little irrelevant in this sort of approach. Having styles on component level feels like the right thing to do with React. There are of course questions like how to deal with global styles of an app but I expect that is something you would deal on a higher level. And given the approach, you would have very good control over it (all React of course).

@bebraw
Copy link

bebraw commented Feb 18, 2015

I think Atomic Design fits React kind of way of doing things. You start with components (atoms) and then compose those into larger entities. That's pretty much what happens in atomic approach. They have some tooling for this purpose, namely Pattern Lab. See also the demo. Getting something like that together based on a set of React components should be too hard.

@bebraw
Copy link

bebraw commented Feb 20, 2015

Here is one more approach, csstyle.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment