How to Style a React Redux App Like Windows XP With XP.css
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:10] Prepare the styles. We're going to use the XPCSS by Adam Hamad for our styles. Install this package, yarn, add, XP, CSS.
[00:11 - 00:31] Go to index CSS and import tilde, XP.css, dist, XP, CSS. Also add the icons. Copy them from the completed project folder, code 04, Redux completed as our C icons.
[00:32 - 00:42] You need to create a similar folder in your project. You should have it in your C and there should be an icons folder. Now update the app layout. Open up tss, remove all the old layout.
[00:43 - 00:59] Now you should have a div with class name window inside of it a div with class name title bar. Inside of it div with class name title bar text saying Redux, Paint.
[01:00 - 01:15] Below the text, render the div with a bottom. Area label should be close and class name, title bar controls. Then launch the app, yarn, start.
[01:16 - 01:23] If you launch the app, it should look somewhat like a Windows XP window with the close button and the blue title bar.