Jump to content

CSS Framework

  1. Introduction to the CSS framework

    Introduction In order to properly differentiate between CSS classes and HTML elements that form part of the IPS4 framework and those that do not, and in order to create a logical structure that can be understood at a glance, naming conventions are applied as follows. Framework classes & elements The IPS4 CSS framework is split into loosely-defined 'modules'. A module groups together related styles in a single f
  2. Layout: Columns

    Description The column module, unlike the grids module, provides classes that enable layouts comprising both fixed and fluid columns to be easily created. This is a layout often used for fixed sidebars with fluid content areas, for example. Additional classes are available to collapse the layout on smaller devices.   Usage A column layout consists of a wrapper element, with the column eleme
  3. Layout: Grids

    Description The grid module provides classes for building layouts based on a flexible 12-column grid, with automatic margins, and with additional classes to enable the layout to collapse properly on smaller devices.   Usage A grid should be made up of a wrapper element with the class ipsGrid, and direct descendants with appropriate size classes applied (see below). For example:
  4. Data Lists

    Description The data list CSS module allows us to display complex lists, while rearranging the display in situations that demand it, such as on small devices.   Usage A data list consists of a wrapper and individual list items, which can contain various types of data. In most cases, a data list would use one of the HTML list elements (such as ul or ol) for semantic purposes, though this isn't necessarily required. The basic markup structure is as follows: <ol clas
  5. Forms

    Description The form module provides classes for styling forms throughout the suite, with a range of options available to change the appearance and flow.   Usage A form should have the base class ipsForm. In many cases this will be directly on the <form> element, but it can actually appear on any element that contains form elements. The recommended basic DOM structure for a form is as
  6. Icons

    Description We make use of an icon font called FontAwesome. This enables us to display icons that are accessible, that don't require an additional HTTP request, that can be styled with CSS (and inherit styling automatically), and which scale without loss of quality.   Usage An icon can be included within the markup by using the following code: <i class='fa fa-icon
  7. Dropdown Menus

    Description Dropdown menus allow users to select from a number of options. The markup is designed to work in tandem with the ips.ui.menu javascript module.   Usage A menu consists of a trigger element, and the menu element itself: <!-- The trigger --> <a href='#elMyMenu_menu' id='elMyMenu'>Open Menu</a> <!-- The menu --> &
  8. Messages

    Description The messages module provides a way to style informational messages to bring something to the user's attention.   Usage To create a message, simply add the ipsMessage class to a container element (e.g. div), along with one of the message styles below. The message style class will automatically add the appropriate icon to your message box.   &#
  9. Buttons

    Basics The button classes described here can be applied to any element, although typically would be applied to an element like a, input[type="submit"] or button so that the user can interact with it. As a minimum, a button should receive the basic ipsButton class, plus a size class and a style class (explained below).   Button styles ipsButton_normal 
  10. Typography

    Description The typography module offers a wide range of classes for styling text across the suite   Headings A number of heading styles are provided, which can be used for structuring information on the page. They are element-agnostic; you can use them on any of the <h*> tags (or even other tags) - choose the most semantic element for your particular use. ips
  11. Miscellaneous

    Padding ipsPad 15px padding on desktop ipsPad_half 7px padding on desktop ipsPad_double 30px padding on desktop The padding classes are scaled appropriately on mobile devices.   Spacing ipsSpacer_top 15px top margin ipsSpacer_bottom 15px bottom margin ipsSpacer_both 15px top and bottom margin ipsSpacer_half When combined with one of the above, halves the spacing ipsSpacer_double When combined with one of the above, doubles th
  12. Badges

    Description Badges are a useful way of showing some additional information about an item - its status, for example.   Standard badges Standard badges receive the base class ipsBadge, and then one or more of the options shown below.   Badge styles ipsBadge_new Badge ipsBadge_style2 Badge
  13. Responsiveness

    Introduction to responsive classes IPS4's CSS framework is responsive, meaning elements adapt according to the size of the display the users chooses to use. In most cases, the existing classes already outlined in this guide take care of it for you; for example, menus automatically adjust, and tab bars collapse into a dropdown menu on mobile phones. There may be times when you need to control on which devices sizes elements show or hide themselves. For example, if you add a custom foote
  • Create New...