IPPC Design Docs → HTML & CSS Templates

HTML & CSS Templates

HTML and CSS templates for the IPPC website including layout, typography, form and table elements, colors, iconography, etc.

As with the FAO design system, uses the Bootstrap framework.

E-commerce page …in progress Download latest in ZIP archive (~6mb)
About pages …in progress
Core Activities page …in progress
IPPC Secretariat …in progress
African Phytosanitary Program page …in progress
Globalnav page_menu drop-down menu that works with hover in desktop-sized screens and with clicks on mobile-sized screens, using jQuery SmartMenus for sanity.
Country Page.
Homepage …in progress. See latest mockup.
Latest CSS file …in progress
Topic Page …in progress. See latest mockup (page 2).
Add Pest Report page …in progress. This may be a way to add updated class names to Mezzanine-generated form controls.
Current Consultation page …in progress
Generic Single Page template (logged in) with various elements …in progress.

Notes

Add class="img-fluid rounded" to images placed in articles so they have round corners and resize properly in narrow viewports.
Remember to change the robots meta tag to meta name="robots" content="index,follow" before publishing any pages on the production site so that search engines index them!

=Todo

¶ Help Paola with implementation as needed
¶ Clean up CSS and markup of existing site as needed
¶ Any new graphic design or illustration to support IPPC
¶ New templates based on the newly-approved mockups

Updated on 2024-02-12