Search results

Responsive Tables

Tabular data is best displayed in HTML tables, but sometimes large tables do not fit on small screens making the table information unreadable. Suitcase Interim makes tables responsive so the layout of the tables adapt to small screens.

View a responsive table demo.

How?

When content creators add tables to their pages, news articles, or other types of content, Suitcase Interim automatically detects the table and makes it responsive. 

Table Examples

Table without headers

banana cucumber
apple green bean
orange squash

 


Table with top row header

Fruit Vegetable
banana cucumber
apple green bean
orange squash

 

Luggage Feature Examples

Note: For an overview of the many sites using Luggage, click the Showcase menu.

Below is a list of the various features available in the Luggage platform, with a few website examples for each.

Tables

How to create a table on your website


The next button in the top bar is the table creation button. This button allows you to create tables to organize data so that it is more readable for users. Here is where the table button is located:

Screenshot of the WYSIWYG text editor table creator/editor

Colors

Iowa State University has specific primary and secondary colors defined as part of the ISU brand standards. Essentially, these are the colors which may be used throughout the Suitcase theme.

Primary colors

#cc0000

Accessible Image Content

Per WCAG 2.0, non-text content should have a text-based alternative accessible to screen readers. Suitcase supports this standard by providing content creators with an "alternative text" (often abbreviated as alt text) field for adding image descriptions. Alt text should not be too long so that screen reader users are not inconvenienced.

Screenshot of "alternative text" field for adding image descriptions

Luggage at a Glance

cake

Mobile-First look-and-feel compliant with ISU standards and adapts to mobile devices.


WCAG 2.0 Level AA accessibility compliant out of the box. Born accessible.


Latest Technology with HTML 5 and CSS 3.

Editing Content and Viewing Revisions

Video created by Iowa State University Extension and Outreach IT

How to edit website content and view your revisions


In this tutorial, we will cover how to edit content. Sometimes, you will notice that your content has information that needs to be updated. Or perhaps you created an Announcement with a typo in the body text. Also, at the end of this tutorial, we will discuss how you can view revisions (if they are enabled on your Luggage site).

This tutorial uses the pages content type as an example, but each content type will have similar instructions.

Events

How to creating an event on your website


In this tutorial, we will learn how to create an event. The event content type includes a calendar so that site visitors can view events in a list. Visitors can also view events by day, week, month and year. Posting event pages to the front page makes it easy for users to see upcoming events.

Step 1: Creating Your Event


Using the menu bar at the top of the page, hover over the "Content" tab and select "Event" from the "Add Content" menu (Note: your menu may look slightly different):

Announcements

How to create an announcement for your website


In this tutorial, you will learn all about the announcement content type. The announcement content type is used to present information about events or department news for site visitors (e.g. highlighting a department's accomplishments by showing off new research or displaying faculty awards). Because of the announcement's banner function on the front page, an announcement is often the first thing a site visitor will see. Keep that in mind when creating content.

Pages