From e66acab0a77ce1c330b12fe139f580c1039c9209 Mon Sep 17 00:00:00 2001 From: Luiz Baldi Date: Wed, 26 Feb 2020 22:45:40 -0300 Subject: [PATCH 1/2] Improve readme --- README.md | 40 ++++++++++++++++++++++++---------------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 6f414e50..98130943 100644 --- a/README.md +++ b/README.md @@ -21,49 +21,58 @@ - [Become a backer or sponsor on Patreon](https://www.patreon.com/arturbien). - [One-time donation via PayPal](https://www.paypal.me/react95) +## Motivation +Create modern mobile/web applications with the retro and old school Windows 95 style. Our goal is not to exactly recreate Windows95 components, but to provide a solid component library for current scenarios. ## Getting Started First, install component library and styled-components in your project directory: ```sh -$ npm i react95 styled-components +// yarn +yarn react95 styled-components + +// npm +npm i react95 styled-components ``` Apply style reset, wrap your app content with ThemeProvider with theme of your choice... and you are ready to go! 🚀 ```jsx -import React from "react"; -import { createGlobalStyle, ThemeProvider } from "styled-components"; -import { reset, themes, List, ListItem, Divider } from "react95"; +import React from 'react'; +import { createGlobalStyle, ThemeProvider } from 'styled-components'; +import { reset, themes, List, ListItem, Divider } from 'react95'; const ResetStyles = createGlobalStyle` ${reset} `; -export default props => -
+const App = () => ( +
- 🎤 Sing - 💃🏻 Dance - - 😴 Sleep + 🎤 Sing + 💃🏻 Dance + + 😴 Sleep
- +); + +export default App; ``` ### Explore You can view components on [Storybook](https://arturbien.github.io/React95/). If you want to play with it locally, simply clone the repo and run commands below: + ```sh -$ npm i -$ npm run storybook +$ yarn +$ yarn storybook ``` + ### Submit your project Apps built with React95 will be submitted on the official React95 [website](https://react95.io) 🤟🏻 ### Contributing -**We are not attempting to exactly RECREATE Windows95 components. We are going to make them usable in the modern mobile / web apps. -Thus, any help from UI / UX designers would be EXTREMELY appreciated. The challenge is to come up with new component designs / layouts that are broadly used in modern UIs, that weren't present back in 95.** +Any help from UI / UX designers would be EXTREMELY appreciated. The challenge is to come up with new component designs / layouts that are broadly used in modern UIs, that weren't present back in 95. There's a lot to do. If you want to help with the project, feel free to open pull requests and submit issues. Let's make UI great again 🔥 @@ -80,4 +89,3 @@ There's quite a few things to be done: And the boring stuff too: - Testing - Semantic release -- eslint From 21a3b6a58791ee27274a09122970544dc6cc4acc Mon Sep 17 00:00:00 2001 From: Luiz Baldi Date: Tue, 3 Mar 2020 00:03:41 -0300 Subject: [PATCH 2/2] Minor tweaks on readme --- README.md | 35 +++++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 98130943..3923f540 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ NPM React95 version React95 license - +

Components - @@ -14,26 +14,32 @@

Refreshed Windows95 UI components for your modern React apps.
Built with styled-components 💅

- + ![demo](https://user-images.githubusercontent.com/28541613/56099388-7513f800-5f0c-11e9-893b-532eded39f92.png) ### Support + - [Become a backer or sponsor on Patreon](https://www.patreon.com/arturbien). - [One-time donation via PayPal](https://www.paypal.me/react95) ## Motivation + Create modern mobile/web applications with the retro and old school Windows 95 style. Our goal is not to exactly recreate Windows95 components, but to provide a solid component library for current scenarios. ## Getting Started -First, install component library and styled-components in your project directory: + +First, install component library and styled-components in your project directory: + ```sh -// yarn -yarn react95 styled-components +# yarn +$ yarn react95 styled-components -// npm -npm i react95 styled-components +# npm +$ npm i react95 styled-components ``` + Apply style reset, wrap your app content with ThemeProvider with theme of your choice... and you are ready to go! 🚀 + ```jsx import React from 'react'; import { createGlobalStyle, ThemeProvider } from 'styled-components'; @@ -61,23 +67,31 @@ export default App; ``` ### Explore + You can view components on [Storybook](https://arturbien.github.io/React95/). If you want to play with it locally, simply clone the repo and run commands below: ```sh -$ yarn -$ yarn storybook +# yarn +$ yarn && yarn storybook + +# npm +$ npm i && npm run storybook ``` ### Submit your project + Apps built with React95 will be submitted on the official React95 [website](https://react95.io) 🤟🏻 ### Contributing + Any help from UI / UX designers would be EXTREMELY appreciated. The challenge is to come up with new component designs / layouts that are broadly used in modern UIs, that weren't present back in 95. -There's a lot to do. If you want to help with the project, feel free to open pull requests and submit issues. Let's make UI great again 🔥 +There's a lot to do. If you want to help with the project, feel free to open pull requests and submit issues. Let's make UI great again 🔥 ### Roadmap + There's quite a few things to be done: + - Styled system - Lots of tacky color schemes 🌈 - Custom icons maybe? (Emojis from Windows 10 seem to go very well with the lib) @@ -87,5 +101,6 @@ There's quite a few things to be done: - Components common in all modern UIs (FAB, Badge, Avatar, Snackbar, Steppers) And the boring stuff too: + - Testing - Semantic release