For CampBase, we used Bootstrap, a front end framework for developing responsive, mobile first websites. Bootstrap uses a 12 column grid system to fluidly scale your site between different window sizes. As you can see, when Daniel resizes the window, the layout of the site changes.

[show camp.blade.php (/camps/{id})]

We also used Blade, a powerful templating engine included with Laravel, to combine multiple views into one HTML response. For instance, the navbar and footer are declared once in a view, and all the other views have an @extend() tag that allows you to include the navbar and footer in the main view. This allows for less repeated code and an overall cleaner structure, as you can now change something in the navbar and footer view and have it reflected site-wide.

[stay on camp.blade.php (/camps/{id})]

One very noticeable application of Blade is the inclusion of custom colors on each camp's page. The camp's colors are stored in the database as HEX values, then pulled into a partial view inside <style> tags. So, all you have to do is use an @include() statement at the top of a view to pull the custom_css partial into the main view, and apply the camp's colors. Again, this allows for code that is much easier to maintain and debug, as all of the color logic is in one place, despite being utilized in many.

[stay on camp.blade.php (/camps/{id})]

With this in mind, I want to show you how the dynamic form fields are displayed with Blade. Here you can see the form field that Maggie created earlier. To display this, each of the camp's form fields are iterated over and the necessary HTML is output dynamically from the database. This allows a Camp Manager to easily define custom fields that they need from a camper.

[show section.blade.php (/camps/register)]

Of course, not all functionality we needed for the site was provided by an outside package or resource. For instance, on the home page, the camp picker uses a custom jQuery script to determine what camp is being hovered over, determine that camp's image URL, calculate the margin-top attribute needed (making sure not to use a value that would make the image go past the bottom of the picker), and then, finally, render the result you see.

[show index.blade.php (/)]

Now I'm going to pass the presentation off to Candace to tell you about our third party API integration and more about the Laravel framework.