LESS File Structure

1. App.less

• The main LESS file for the app. Imports all other LESS files

2. utilities.less

• Miscellaneous mixins

3. variables.less

• Colors, layout sizes, tyopgraphy from Flocab style guide

4. animations.less

• Animation mixin, keyframes, and custom animations

5. base.less

• Base app styles (headings, body, background)

6. buttons.less

• Base button styles from Flocab style guide

7. forms.less

• Base form styles from Flocab style guide

8. madLibForm.less

• MadLib Form View

9. submittedMadLibs.less

• Submitted Mad Lib form View

Thank you for accepting Flocabulary's UI/UX/CSS challenge!

At Flocabulary, we strive to provide rich educational materials that are also elegant, intuitive web interfaces. In this challenge you'll help create a hypothetical feature that's very similar to mad libs ( https://en.wikipedia.org/wiki/Mad_Libs ). It won't be highly educational, but with your help, it'll at least have a good UI.

Here's a live hosted demo of this functionality: https://flocabulary.github.io/madlibs-ui-challenge/

It's functional, but it clearly needs some styling and finessing. In your work, feel free to use our style guide https://www.flocabulary.com/tools/ui-style-guide/ but you are not bound to it. You can alter or remove any static text. Usage of modern CSS features like transition, animation and flex-box is encouraged. This exercise may require you to use some git, but you are not being judged on your use of it.

If you have Node.js installed on your computer, or foresee no problem getting it installed, follow these directions (otherwise scroll down):

0. install Node.js https://nodejs.org/en/download/
1. Fork this repo https://help.github.com/articles/fork-a-repo/
2. Clone forked repo to local folder
3. In same directory as package.json, run npm install
4. To start development server, run npm start. Navigate to http://localhost:8000/webpack-dev-server
5. Add/change CSS in styles/App.css. If you would like to use a preprocessor, create a new file in styles/ with the suffix of your choice and require it in Main.js
6. Alter markup in Main.js, MadlibForm.js and SubmittedMadlib.js in the components/ folder. We use React's jsx syntax to generate HTML. It can generally by altered like HTML, with some differences that are noted in comments. More info: https://facebook.github.io/react/docs/jsx-in-depth.html
7. To submit your challenge push your updates to your forked repo

This is definitely the preferred option. Please feel free to reach out if you have any questions at all about getting this up and running. I'm happy spending a little time on the phone if necessary

If you cannot install Node.js (the lo-fi option)

1. Fork this repo https://help.github.com/articles/fork-a-repo/
2. Clone forked repo to local folder
3. Run git checkout gh-pages
4. Prepare styles in new file styles/App.css and link it in index.html.
5. Push updated gh-pages branch to github

or

1. Download gh-pages branch as zip file https://github.com/flocabulary/madlibs-ui-challenge/archive/gh-pages.zip
2. Prepare styles in new file styles/App.css and link it in index.html.
3. Submit your work as a .zip file in an email.

Unfortunately this option means using CSS only.