#WIP: reactomikit
NOTE: This product is still under development, don't consider it near production use just yet
Minimal Atomic UI Toolkit for React and React Native
In the quest for a minimal footprint multi-platform styling architecture
npm i reactomikit -S
- Expose UI kit in your webpack configuration
module.exports = {
...
resolve: {
alias: {
"ui-kit": "reactomikit/dist/ui-kit"
}
...
},
...
}
- Create a new route to showcase your toolkit
import UIKit from "ui-kit/examples";
<Router>
<Route component={ UIKit } path="ui-kit" />
</Router>
- Use it anywhere in your app:
import { Button } from "ui-kit/button"
const LoginButton = () => (
<Button>Some button</Button>
);
export default LoginButton
- Layout
- Base
- Helpers
- Typography
- Animation
- Icons
- Settings
This components lets us setup the elements that our app will use to render content, a sample structure of an app would be:
import React from 'react';
import { App, Topbar, View, Viewport, ScrollView } from 'reactomikit/layout';
const SampleApp = () => (
<App>
<Topbar>The Bar</Topbar>
<View>
<Viewport>Some text</Viewport>
<ScrollView width="50%" height="100vh" />
<ScrollView width="50%" height="100vh" />
</View>
</App>
);
export default SampleApp;
Available components:
- Topbar
- Panel
- ScrollView
- View
- Viewport
- App
In this category we will place all elements that are common to all applications, things like html tags and well defined elements like a Menu or the Logo, a sample snippet of how to achieve this would be:
import React from 'react';
import { Topbar } from '../layout';
import { Menu, Link, Logo } from '../base';
import logo from '../assets/logo.svg';
const TopbarExample = () => (
<Topbar>
<Logo src={logo} />
<Menu>
<Link>Theme</Link>
<Link>Helpers</Link>
<Link>Layout</Link>
<Link>Typography</Link>
<Link>Buttons</Link>
<Link>Buttons</Link>
</Menu>
</Topbar>
);
export default TopbarExample;
Available components:
- Menu
- Button
- Link
- Logo
- Label
As of Powered by styled-components
- β Specificity battle always.
- π΅ Class naming is often a subjective task and takes time.
- πΎ Global scope causes visual regressions.
- π Property duplication (n+1), keep repeating the same rule over and over again.
- π¨ Hard-coded values are a common pattern in most projects.
- ππΌ Modularity is hard to achieve.
- β€οΈ Solves specificity issues
- π Increases modularity
- π Great for big teams
- π Prevents global style leaks
- π₯ Relies in convention and team adaptation
- π Bloats the markup
- π¦ Stylesheet size increases due to long names
- π π½ Not DRY at all
- π© Feels it can be automated
- π» Itβs just a methodology or meta-framework
- ππΌ Solves specificity by ordering styles
- ππ» Deals with scalability
- πͺπΌ For large projects
- π Not well documented
- π Subject to interpretation
- π’ Still needs proper implementation
- π Does not account for latest tech
- π€ Local scope
- ππ½ Composition
- π― Integrates well with everything
- βοΈ Highly reusable if well designed
- π Only works in JS env
- π§ Needs (complex) setup
- π Only a technology, not a methodology
- πΆ Still very young
This package does 1 thing amazingly, it lets us package style primitives in well encapsulated stateless functions so we can use the full power of es6 and modern css to keep our UI's simple and scalable.
In other words, this is the first fully JS + CSS hybrid implementation I've seen and I have the feeling this is where things are going in terms of CSS evolution.
ππ To the team in charge of developing this
It lets us wrap native UI components in an easily swappable low-level API.
This is my personal attempt to solve the problems I see in css, usually I am used to see many developers struggle to understand how to approach working with CSS.
What may be
Just define the pattern, wrap it in a reusable function if you are using javascript or load the base stylesheet to consume it in different environments.
Makes it easier for UI designers to build Style libraries with ease, just learn CSS and extend the kit to start building applications blazingly fast.
Whenever approaching
npm run dev
dev-toolkit --watch
#Generate a static build
# Create
build-folder with compiled files (-b or --build) dev-toolkit --build
removes previous build-folder
automatically uses production-builds of React and Redux
allows for a custom vendor-bundle
extracts css from individual modules
hashes assets, including jpg, png, gif & svg-files