This exercise primarily focusses on the use of the FLEXBOX css module for layout. It should also reinforce your understanding of css animation or transitions, and the use of multiple backgrounds.
First, download the starter files and screenshots.
Since this is an exercise, I have not sized the images down to the final size I would use them at. In a production site, I would definitely do so. Use the images as supplied. This is commonly done while figuring out how our layout is to behave.
Use greek text, using Emmet’s lorem functionality. In the paragraphs under story items, the paragraph lengths vary. To make the task easier, keep the headings short ( one or two words ).
In the files I supply you is a movie file called RedunzlAnimation.mov. Please watch it, then look at all the enclosed screenshots, too.
For Langara Classes: In groups of three, please recreate as accurately as possible the layout represented in the screenshots. Have one person in your group hand in your completed file. Include a text file with your files. Call that file GroupMembers. In it, list the names of your group members.
Make sure the layout works in Google Chrome. Then test it in Firefox. Depending on what version we have in the lab at the moment, it might look like nothing’s working. If things look like they’ve totally fallen apart because the images aren’t shrinking, think carefully about what Flexible Boxes actually do. This will help you diagnose the problem.
Good Guides For These Tasks
- Visual Guide To CSS FlexBox
- CSS Tricks Complete Guide to Flexbox
- Mozilla Dev Network: CSS Multiple Backgrounds
Conditions of the Exercise: Layout
You can’t use floats on anything. None. Zero. No br tags, either.
Do not make separate grid classes.
Use flex properties to control as much of your layout as possible, including widths of element boxes. You will not need the type of mathematics we had to employ when doing float-based layouts. In other words, no width + margin + margin * number of elements thinking here.
Watch the movie carefully for clues on what I want to have happen at different screen sizes.
Notice the flow of alignments in the small menu area underneath the biggest image on the page—presumably, this would be a carousel kind of element. If a user clicked different numbers, they’d get different images and story titles. Don’t worry about adding that functionality (yet), but definitely make sure you get the different responsive alignments of that little menu correct. This is pure flexbox.
Conditions of the Exercise: Animation
If you look at the header in the first part of the supplied movie, you will notice that there are at least two background images on the header. But only one of them is animated. The grid image stays still, but the “stars” image moves slowly, like a timelapse of a night sky.
If a user clicks on the Win 100,000 Aeroplan Points at the top of the page, a form comes down (as in the movie).
Style the form. Give the user the ability to click the CLOSE button to have the form slide up off screen.
For a bonus mark, see if you can figure out how to add a Thanks for entering the contest message when the SUBMIT button is clicked.
The background images I used came from transparenttextures.com. I’ve downloaded a large number of them. They are in the patterns folder. The images used here were
- header: batthern.png
- header: asfalt-light.png
Conditions of the Exercise: Background
In Preview (if you’re on a Mac), open the screenshot file entitled ScreenShot-Full.png. Make sure you look at it at full size ( View > Actual Size ). Scroll down to the bottom. Notice the subtle background pattern. Now start scrolling up slowly. See how the pattern gradually fades away after about two or three story boxes.
Replicate that effect.
The image I used here came also from transparenttextures.com:
- bottom of page: skulls.png
Definitely figure out how this “fading” effect is produced.