This project called for HTML5, CSS, SaSS, javascript, jQuery, and jQuery plugins (jQuery UI, dataTables). We built partial stylesheets using SaSS and .scss and then used Compass to compile the partials into one styles.css. Our SVN of choice was git, code editor was Sublime Text 2, used shell and Ruby to push and deploy files to development server.
Utilized the dataTables jQuery plugin to style the table grid, and jQuery UI to style the form elements such as the radio buttons and checkboxes.
Semantics are important, which is why HTML5 was used on these pages. Here you see the use of the <section> tag and how it is used when toggling (Show/Hide) content.
Here is the open state of the same page. We used a secondary button style to differentiate actions within the site versus pages on the site.
We are using the <aside> tag here for the side rail following the rules of HTML5 semantics. Also added javascript functionality to make rows removable. When any elements change in the table, the Save Changes buttons become active. DataTables have added jQuery logic that gives them sorting options.
We added different styles to each <section> to signify different functionality and purpose of each CTA. Above is an example of an informational section, an error message, the main area of interaction (made to stand out with the darker background), and the data tables.
The use of different form elements is made apparent on this page. With jQuery UI, each element is easy to manipulate and maneuver. Certain buttons on this page add rows, as seen in the Itinerary section, others toggle (show/hide) more content like in the Date & Duration and Currency sections.
We wanted to put weight into the areas we wanted the user to interact with first, which is why we used big blue buttons on top to designate user type, then we have the send button with a custom icon, and then the news and informational downloads with smaller, lighter icons.
