Stylesheets

We discontinue development of the required+ Foundation theme – here is why.×

We don’t have to explain to you what stylesheets are if you made it to this page, but there are certain things you need to know about the use of stylesheet in required+ Foundation that will help you getting the results you desire faster.


In your child theme

There are two ways you can approach a project using required+ Foundation. You either start building your theme directly in WordPress or you built a clickable prototype with Foundation itself and realized that our parent theme would be a great fit taking you from your static clickable to a dynamic site.

So you built a clickable with Foundation?

That’s great and we thought of you as some of our designers start this way before the decision to use WordPress is made. Foundation gives you app.css for your site specific styling. In the child theme you’ll find a folder stylesheets and the app.css. Drop your prototypes app.css in that folder replacing the existing one and the child theme takes care of loading it for you.

Starting in WordPress

If you tend to start the project in WordPress we recommend that you use the style.css file in the child theme instead and remove the following lines from your child theme functions.php:

/**
 * Registers the app.css
 *
 * If you don't need it, remove it.
 * The file is empty by default.
 */
wp_register_style(
    'app-css', //handle
    get_stylesheet_directory_uri() . '/stylesheets/app.css',
    array( 'foundation-css' ),  // needs foundation
    required_get_theme_version( false ) //version
);
wp_enqueue_style( 'app-css' );

Adding / Removing stylesheets

The code above shows you how to add a custom stylesheet if you happen to need more. You can find the code above in a function required_starter_scripts in your child theme functions.php. There is another example on adding a Google Font in the same function:

/**
 * Add our theme specific js file and some Google Fonts
 * @return void
 */
function required_starter_scripts() {

    // other code ...

    /**
     * Adding google fonts
     *
     * This is the proper code to add google fonts
     * as seen in TwentyTwelve
     */
    $protocol = is_ssl() ? 'https' : 'http';
    $query_args = array( 'family' => 'Open+Sans:300,600' );
    wp_enqueue_style(
        'open-sans',
        add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ),
        array(),
        null
    );
}
add_action('wp_enqueue_scripts', 'required_starter_scripts');

Magic in the browser

Let us show you how we use JavaScript to add some more magic to your visitors browser and how you can do it yourself.

Browser magic »