GitXplorerGitXplorer
m

styling-workshop

public
17 stars
4 forks
0 issues

Commits

List of commits on branch master.
Unverified
c92c9b9ff8c8205e3b7b0d5084152b08fdfceebc

Fix repo URL ��

mmxstbr committed 7 years ago
Unverified
41095647e42089fd5162167d14446947e9886d91

Add note about first branch

mmxstbr committed 7 years ago
Unverified
272965e5ab0891179fd90538ffbaf31bc819e7e2

Further cleanup

mmxstbr committed 7 years ago
Unverified
90de430accf920452f608cc7a3465b6a453cade1

Cleanup

mmxstbr committed 7 years ago
Unverified
5db37bb4cb1a406502053531972ed56fa7e01288

src/global.css -> public/global.css

mmxstbr committed 8 years ago
Unverified
912ad779de0ce9a23055c7f8eb5f8c99f2160f39

Add screenshots to README

mmxstbr committed 8 years ago

README

The README file for this repository.

Styling React Applications Workshop

This is the excerise (lab) for the styling React workshop. You can see the finished styled app at https://styling-workshop.now.sh !

Setup

Follow these steps to get the repo:

# Download the repo
git clone https://github.com/mxstbr/styling-workshop.git
# Go into the newly downloaded directory
cd styling-workshop
# Install all the dependencies (can also run yarn)
npm install
# Start the app
npm start

A browser window should open at localhost:3000 (if not, try going to that URL manually) and you should see a weather app. If so, you're set up and ready to go!

Make sure you have git and the latest stable version of Node.js installed. If any of these commands fail, please reinstall the relevant binary.

Task

Your task in this lab is to style our weather application in three different ways:

  • Inline styles
  • CSS Modules
  • styled-components

We've built a React app and styled it with a global CSS file on this branch. (public/global.css) You have to move those styles to the new way and make sure it looks as close to the original as possible.

Getting started

This lab is based on three branches (inline-styles, css-modules, styled-components) that have the same starting point. Get started with the inline-styles branch:

git checkout inline-styles

In case you aren't running it locally anymore, this is what the finished app looks like (and should look like after converting it to a different library):

The finished app with styling The finished app as seen on a phone

Note: There are no unit tests verifying the correct solution—if your app looks the same with the moved styles that's it! (note that a 1:1 move might not be possible)

License

Copyright (C) 2017 Maximilian Stoiber & Nikolaus Graf. You may use this repo for non-commercial use under the GPLv3 license.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

(see LICENSE.md for the full license text)