The practice questions incrementally apply CSS to the practice template, resulting in a fully functional page with the following features:
- A header and footer rendered via a CSS pattern.
- A simple corner ribbon.
- A generic link panel (side menu)
- An animated transition of the page content-area, as the menu tabs are selected.
- An animated transition of the tab menu, to beneath the header title, as the width of the browser window is resized below a certain threshold.
- A movie table that obtains scrollbars, as the browser window is resized smaller than the table.
- A footer that sticks to the browser window, until it reaches a particular height threshold, at which point it sticks to the bottom of the document.
- Use semantic elements, to minimize divitis (overzealous use of divs and CSS used for styling). For example, using <nav> to represent a menu instead of <div class="menu">.
- Prefer CSS classes for identification of generic elements (e.g., "side-menu" for generic left or right vertical menus, "tab-menu" for generic horizontal tab menus).
- Prefer IDs for explicit functionality (e.g., main navigation menu, home tab content section, movies content section).
- Minimize the use of JavaScript. This needs work.
Caution: The solutions presented here are likely not the best. I plan to improve them as I learn.
- Corner Ribbon
- Tab menu
- Header and Footer
- Generic Tab Transitions
- Custom Home Tab Content
- Box tab
- Movies tab
- Patterns
- Responsive
Write the CSS to add a ribbon, using the <div class="ribbon-box"> element in the practice template:
- The
ribbon-boxelement should support a "left" or "right" position, placing the ribbon in either the top-left or top-right corner of the page. - The
ribbonelement should support either aredorgreencolor class, which provides the ribbon with a red or green background. - Add a thin stripe to the top and bottom of the ribbon, using color #eee.
- Use
Gudeafor the font family. - Ensure that the browser does not add a horizontal scrollbar.
- Ensure that elements beneath the ribbon's region, receive mouse events (e.g., any part of the tab menu covered by the ribbon, must receive hover as well as click events).
See generic/genericTopCornerRibbon.css for current solution.
Write the CSS for a generic tab menu that can be used multiple times in the same page (targeting any element with the tab-menu class).
- Make sure the entire tab area is a click-target (not just the tab's anchor).
- Set the tab hover color to #ebaf3c.
- Set the active tab's text color to #555 and its background color to #fff.
- Give the first tab a round corner.
See generic/genericTabMenu.css for current solution.
Write the CSS to position the main tab menu at the top of the page (use element with id="main-menu").
- Move the main tab menu to the top of the page and nudge it to the right, to make room for the header's Title.
- Make all header tabs the same width.
See kata-specific/mainTabMenu.css for current solution.
- Push the main content down, slightly, away from the header.
- Add a header "icon" using a font (e.g., unicode "\2666") and set its color to #069459.
See kata-specific/pageHeader.css for current solution.
Attach the footer to the bottom of the window. Note: The current solution isn't implemented generically.
See kata-specific/pageFooter.css for current solution.
Enable transitions between the tabs (Home, Box, Movies and About):
- Show the content of the currently active tab and perform a transition to the newly selected tab's content.
See generic/genericContentTransitions.css for current solution.
Write the CSS for a generic vertical menu that can be used multiple times in the same page
(target any element using the <nav class="side-menu"> element in the practice template):
- Use color #068894 for background.
- Use color #ebaf3c for highlight (on hover).
- Make sure the entire tab area is a click-target (not just the item's anchor).
See generic/genericVerticalMenu.css for current solution.
Write the CSS for a simple modal dialog, using the element with id="alert", in the practice template.
See generic/genericModalDialog.css for current solution.
Arrange the Home tab content: sidebar on left, loremIpsum on the right.
See kata-specific/homeTab.css for current solution.
Simple box model example using nested boxes, all centered, with text vertically and horizontally centered.
See kata-specific/boxTab.css for current solution.
Write the CSS to style any table with a class name of simple-table (see the <div id="movies"> element in the practice template).
Don't add any non-generic CSS to the table (e.g., column alignment or table width - those would be specific to a particular table and are addressed by a later question).
Notice how the text of some columns will wrap if the browser width is made too small.
- Give the header a dark background with white (or light) text and vertical separators.
- Add zebra-stripes to the table body and add gray vertical separators to each cell.
See generic/genericTable.css for current solution.
Write CSS to specifically style the table inside the <div id="movies"> element in the practice template.
This CSS will only be appropriate to this table and can't be reused.
- Give the table a fixed width of 700px.
- Right-justify the 'Box Office' column.
- Center-justify the 'Rating' column.
- Add horizontal scrollbars to the table, for when the width of the browser becomes less than 480px (for phones), otherwise no scrollbars should be displayed.
See kata-specific/moviesTab.css for current solution.
Write the CSS for a simple CSS pattern, as shown in the example below, targeting the <header> and <footer> elements from the practice template.
- Stagger the circles, as illustrated below.
- Color one set of circles #111 and the second set #222.
- Make the background color #333
See generic/genericPattern.css for current solution.
- Move the main tab menu below the header title when the browser size is less than 539px (for small screens). Use a a quick transition (e.g., 0.35 seconds).
See kata-specific/mainTabMenuRwd.css for current solution.
Attach the footer to the bottom of the window, when the browser is sized to 580px or more. Attach it to the bottom of the document, when sized to more than 580px (to maximize the available content space on small screens).
See kata-specific/pageFooterRwd.css for current solution.
Just cd to the project directory and open the src/index.html file in your browser.
The CSS and JavaScript files will be accessed in a non-minified and non-amalgamated way.
Alternatively, you can perform a build, which will optimize the CSS and JavaScript files for deployment.
The project's build process uses Node.js and Grunt.
If you don't have Grunt, you can follow the Getting Started guide.
Next, just do an npm install which will install Grunt locally as well as all of the project dependencies:
npm installThe default build cleans the target directory and generates the current release.
gruntCopyright 2014 George Norman
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this software except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.