This file serves as documentation for the front-end development of the Creative Action Network (CAN). It includes information on the HTML/PHP, CSS and JavaScript used to create the different elements on the page.
All the image files are included at /img/. We didn't use any sprites since the system needs to be flexible enough to accomodate additions and removals of any image. However, sprites should be created prior to a launch to avoid delay while loading hover images.
Here are links to more information on the Facebook and Twitter buttons used on the CAN website.
Information on the fonts used and styled examples for each heading and the paragraphs.
p - Used throughout the website
To add a page you need to add code in two places:
Here is an example of how the code looks. Make sure to follow this structure whenever you add a page.
Main navigation:
<li><a href="#questions">Questions</a></li>
Within #pages our div must have a class of .page and a h1 data-name attribute that matches the href of the a tag in the main navigation without the hash:
<div class="page">
<div class="page-header">
<h1 data-name="questions">Questions About Campaign Title</h1>
</div>
<div class="row">
<div class="span12">
<p>Morbi ac tortor ac augue sollicitudin cursus. Nunc sagittis, ipsum quis congue venenatis, tortor sapien vulputate ante, in hendrerit mi risus eu augue. Nam sed ultricies sem. Quisque pharetra vestibulum nibh et faucibus. Aliquam faucibus pellentesque massa non venenatis. Nunc tristique ante vel diam rhoncus nec eleifend est mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam eget mauris vel arcu ullamcorper aliquet. Sed tempus posuere mauris non sagittis.</p>
</div>
</div>
</div>
Modals are used on the website to handle both the login and registration as well as the submission. There are only two modals, one for the login and registration, and the other to handle both image and video submissions.
Notice the three classes on the modal div. modal makes it open as a modal. hide sets the css to display:none form the outset. fade makes the modal slide up and down instead of just appearing.
Here is an example of how you call a modal using a link. Notice how the href on the link matches the id of the modal.
The link code is:
<a id="login-link" data-toggle="modal" href="#login-reg-modal">Login</a>
The modal code is:
<div class="modal hide fade" id="login-reg-modal">Modal information here. See includes/modals.php for more examples.</div>
You can set whether you want to accept the video or image submission type by using the data-submission-type attribute on the #subission-modal in includes/modals.php.
Here is the code when you'd like to accept image submissions. Images are set as the default state in case an incorrect value is used for the attribute.
<div class="modal hide fade" id="submission-modal" data-submission-type="image">...</div>
If you want to accept videos you would change the attribute to "video". It would look like this:
<div class="modal hide fade" id="submission-modal" data-submission-type="video">...</div>
The grid utilizes the Isotope plugin for sorting and filtering the images. The grid also slides down text when you rollover an individual image.
Add the following code within the #images div to add another image. Here is a description of each component:
<div class="image brown programmer" data-colorbox-url="includes/colorbox.php?id=34">
<div class="img-content">
<p class="sort-one">Bill Nye</p>
<p class="sort-two">628</p>
</div>
<img src="http://placehold.it/145x187" width="145" height="187" alt="filler-alt" title="filler-title" />
</div>
We included an example of sorting by numbers and alphabetically. In the above example, elements with the class .sort-one will be used to sort alphabetically. Elements with the class .sort-two will be used to sort numerically.
We use JavaScript so clicking the "Sort by Letter" link will sort alphabettically. That links code is:
<li><a href="#one" class="active">Sort By Letter</a></li>
href="#one" corresponds to the following JavaScript code. You can see that for 'one' we sort by the class .sort-one.
$container.isotope({
itemSelector: '.image',
getSortData : {
//SortOne is a regular text field. We sort alphabetically.
one : function ( $elem ) {
return $elem.find('.sort-one').text();
},
//SortTwo is a number so we are going to cast it to an integer then sort counting up.
two : function ( $elem ) {
return parseInt($elem.find('.sort-two').text(), 10);
}
}
});
Filters are applied based on what classes are included in div.image. For the above example you can see that the eye color "brown" and the job "programmer" would match the filters for that image.
Here is the brown eyes filter. When this link is clicked any image with the brown class remains, while all others are hidden.
<li><a data-filter-value=".brown" href="#">Brown Eyes</a></li>
The Colorbox jQuery plugin is used to show each submission's content in a popup when the image is clicked in the grid.
In order to point to the colorbox file to load with AJAX we use the attribute data-colorbox-url as you can see for this image:
<div class="image blue designer" data-colorbox-url="includes/colorbox.php?id=32">...</div>
The id query string is passed to colorbox.php to be used to pull information about that specific submission and fill everything in for the popout. Right now we are using filler content for includes/colorbox.php.
For the structure to use please refer to includes/colorbox.php
CAN has been tested in the following browsers:
The remaining bugs are as follows: