Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Popular

    IPS Datalist

    Jimi Wikman

    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.

     

    <ol class='ipsDataList' itemscope itemtype="http://schema.org/ItemList">
    	<meta itemprop="itemListOrder" content="Descending">
    	<li class='ipsDataItem ipsDataItem_unread' itemprop="itemListElement">
    		...
    	</li>
    	<li class='ipsDataItem' itemprop="itemListElement">
    		...
    	</li>
    	<li class='ipsDataItem' itemprop="itemListElement">
    		...
    	</li>
    </ol>

    The root element should be given the classname ipsDataList. Individual list items receive the classname ipsDataItem. To indicate unread status within a row, add the class ipsDataItem_unread to the list item. The other elements in the row may style differently in 'unread' rows to indicate that status.

    Within the ipsDataItem, multiple other elements can exist which (at desktop resolution) represent cells of data. On smaller devices, these elements reflow to give a more suitable layout. These elements are outlined below. An example of a data list row showing many of these options is shown here:

     

    • ipsDataList
    • ipsDataList_zebra
    • ipsDataList_reducedSpacing
    • ipsDataItem
    • ipsDataItem_main
    • ipsDataItem_stats
    • ipsDataItem_lastPoster
    • ipsDataItem_modCheck
    • ipsDataItem_unread
    • ipsDataItem_generic
    • ipsDataItem_icon
    • ipsDataItem_size1 - 50px
    • ipsDataItem_size2 - 75px
    • ipsDataItem_size3 - 100px
    • ipsDataItem_size4 - 125px
    • ipsDataItem_size5 - 150px
    • ipsDataItem_size6 - 175px
    • ipsDataItem_size7 - 200px
    • ipsDataItem_size8 - 225px
    • ipsDataItem_size9 - 250px
    • ipsDataItem_new - New items
    • ipsDataItem_warning - Items showing a warning state
    • ipsDataItem_error  - Items with an error
    • ipsDataItem_info - An informational state

     

    ipsDataItem_main

    <div class='ipsDataItem_main'>
    	<h4 class='ipsDataItem_title'><a href='#'>Item title</a></h4>
    	<p class='ipsDataItem_meta'>
    		By testadmin, yesterday, 2:21pm
    	</p>
    </div>

     

    <ul class='<strong>ipsDataItem_subList</strong> ipsList_inline'>
    	<li><a href='#'>Sub-item 1</a></li>
    	<li class='ipsDataItem_unread'><a href='#'>Sub-item 2</a></li>
    </ul>

     

    Full example

    <ol class='ipsDataList'>
    	<li class='ipsDataItem ipsClearfix ipsDataItem_unread'>
    		<div class='ipsDataItem_main'>
    			<h4 class='ipsDataItem_title'><a href='#'>Pre-sales questions</a></h4>
    			<p class='ipsDataItem_meta'>
    				Question before you purchase? Post here and get help from both IPS and from other clients. You can also email sales@invisionpower.com for assistance.
    			</p>
    			<ul class='ipsDataItem_subList ipsList_inline'>
    				<li><a href='#'>Company Feedback</a></li>
    				<li class='ipsDataItem_unread'><a href='#'>General Suite Feedback</a></li>
    			</ul>
    		</div>
    		<dl class='ipsDataItem_stats ipsDataItem_statsLarge'>
    			<dt class='ipsDataItem_stats_number'>18,852</dt>
    			<dd class='ipsDataItem_stats_type ipsType_light'>Posts</dd>
    		</dl>
    		<ul class='ipsDataItem_lastPoster ipsDataItem_withPhoto'>
    			<li><a href='#' class='ipsUserPhoto ipsUserPhoto_mini ipsPos_left'><img src='image.jpg' alt=''></a></li>
    			<li><a href='#'>BBCode’s description variable</a></li>
    			<li>By <a href='#'>admin</a></li>
    			<li><time class='ipsType_light' data-short='1 dy'>Yesterday</time></li>
    		</ul>
    		<div class='ipsDataItem_modCheck'>
    			<input type='checkbox' checked>
    		</div>
    	</li>
    </ol>

     

    Discuss the Guide

    Recommended Comments

    There are no comments to display.



    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now
     Share

    • Invision Community Playbook

      This is an extension of the detailed information over at Invision Community.

      INVISIONCOMMUNITY.COM

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

       

  • Latest Updates

×
×
  • Create New...