Sitecore Foundation comes with a library of components. These components are actually split into a few projects. The main project is a foundation project that has simple HTML5 components. The feature layer has several projects for different types of components. Owl Carousel, Slick Carousel and Video JS all have their own projects. But a bulk of the components are in the Foundation Components project.
One of my goals for the framework is to ensure components behave consistently. To do this, I built some common classes for rendering container divs in a consistent way, and decoupling the component from the logic that creates a container div. Most components are wrapped in a using statement that handles all this logic.
@using (Html.ComponentContainer("text-component"))
{
@Html.Sitecore().Field("Content")
}This using statement will emit a Div tag with an ID, css classes and additional parameters based on the rendering parameters of the component. To avoid having to hard code this behavior and tie it to Zurb Foundation, I've implemented by own ContainerClass Pipeline. The Foundation project simply injects a processor into this pipeline, checks for the type of component rendering parameters and adjusts the output of the attributes needed to properly support it. If you're supporting Boostrap or your own CSS library, you can add your own rendering parameters and pipeline processor to support it.
Here's a short video to demonstrate how the rendering parameters are used and how it's implemented in code.