Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
304 lines (184 sloc) 12.7 KB

CSS Kata

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.

Goals

  • 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.

Kata Demo

Kata

⬆ back to top

Corner Ribbon

Write the CSS to add a ribbon, using the <div class="ribbon-box"> element in the practice template:

  • The ribbon-box element should support a "left" or "right" position, placing the ribbon in either the top-left or top-right corner of the page.
  • The ribbon element should support either a red or green color 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 Gudea for 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).

Generic Top Corner Ribbon

See generic/genericTopCornerRibbon.css for current solution.

⬆ back to top

Tab menu

‣ Generic Tab Menu

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.

Generic Tab Menu

See generic/genericTabMenu.css for current solution.

⬆ back to top

‣ Custom Main Tab Menu

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.

Page Header Layout

See kata-specific/mainTabMenu.css for current solution.

⬆ back to top

Header and Footer

‣ Custom Page Header

  • 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.

Page Header Layout

See kata-specific/pageHeader.css for current solution.

⬆ back to top

‣ Custom Page Footer

Attach the footer to the bottom of the window. Note: The current solution isn't implemented generically.

Page Footer Layout

See kata-specific/pageFooter.css for current solution.

⬆ back to top

Generic Tab Transitions

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.

Tab Content Transitions

See generic/genericContentTransitions.css for current solution.

⬆ back to top

Custom Home Tab Content

‣ Generic Vertical Side Menu

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).

Generic Vertical Menu

See generic/genericVerticalMenu.css for current solution.

⬆ back to top

‣ Generic Modal Dialog

Write the CSS for a simple modal dialog, using the element with id="alert", in the practice template.

Modal Dialog

See generic/genericModalDialog.css for current solution.

⬆ back to top

‣ Arrange Home Tab Content

Arrange the Home tab content: sidebar on left, loremIpsum on the right.

Home Tab Content

See kata-specific/homeTab.css for current solution.

⬆ back to top

Box tab

Simple box model example using nested boxes, all centered, with text vertically and horizontally centered.

Box Model

See kata-specific/boxTab.css for current solution.

⬆ back to top

Movies tab

‣ Generic Table Styling

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.

Generic Table

See generic/genericTable.css for current solution.

⬆ back to top

‣ Custom Movies Table

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.

Custom Movies Table

See kata-specific/moviesTab.css for current solution.

⬆ back to top

Patterns

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

Simple Pattern

See generic/genericPattern.css for current solution.

⬆ back to top

Responsive

‣ Main Tab Menu

  • 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).

Page Header Layout

See kata-specific/mainTabMenuRwd.css for current solution.

⬆ back to top

‣ Footer

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).

Page Footer Layout

See kata-specific/pageFooterRwd.css for current solution.

⬆ back to top

Testing Locally

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.

Building a Release

Setup

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 install

Default Build

The default build cleans the target directory and generates the current release.

grunt

⬆ back to top

JSDoc

CSS Kata JSDocs

⬆ back to top

License

Copyright 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.

⬆ back to top