Skip to content

Instantly share code, notes, and snippets.

@RadValentin

RadValentin/gist:e8bb45aa7c6439b30c90

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RadValentin/e8bb45aa7c6439b30c90 to your computer and use it in GitHub Desktop.
Save RadValentin/e8bb45aa7c6439b30c90 to your computer and use it in GitHub Desktop.
Download ZIP
Build LESS styling
Raw
gistfile1.md

Need

Build LESS styling to support HTML structure so that it can be integrated with the plugin

Deliverables

  • LESS files and the generated CSS for styling and positioning the notification list

Solution

We'll need to create styling for the following:

  1. A notification button with a badge to show the number of new notifications
  2. A notification list that can be positioned according to it's css class with 4 main positions: top, bottom, left and right. Each of these positions can be modified by providing a second class: pull-left and pull-right for vertical positions and pull-top for horizontal positions. The purpose here is to make the list usable in any positioning scenario.
  3. Notification items that will show up in the list. These will have a label and content text.

Prerequisites

TODO

  • Create a LESS skeleton to support the HTML structure
  • Add styles for the button, its appearance and size
  • Extend the button styling to support a badge element
  • Add styles for the notification list
  • Add styles for positioning the notification list
  • Define LESS variables for changing the various styling options
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment