-
Notifications
You must be signed in to change notification settings - Fork 0
Modules
The concept with which we build our sites is that we create a module for every element of the site. These are put into the src > modules folder, compiled into the app folder by grunt and included in areas around the site using php:
<?php include ( 'modules/your_module.php' ) ?>
This means we can include the module all over the place very easily.
In order to separate the data from the actual module markup we use variables within the module for all content. Then when we add the module to a page template we can set the variable for that particular use of the module. For example...
The module:
<div class="the-module">
<h2><?php echo $moduleTitle ?></h2>
</div>
The code to include it in a template
<?php
$moduleTitle = 'Something';
include ( 'modules/your_module.php' );
?>
The extra benefit of this is that when you are converting a static site build to a CMS you can just update the variables on each use of the module to call your content in however your CMS specifies. Like this:
<?php
$moduleTitle = '<?php the_title() ?>'; //The wordpress post title
include ( 'modules/your_module.php' );
?>
We have built an example module for a post preview within the starter template. Lets have a look at that.
The markup:
<div class="l-strip">
<div class="l-holder">
<div class="l-inner">
<div class="post-preview">
<h2 class="post-preview-title"><?php echo $postTitle ?></h2>
<img clss="post-preview-img" src="<?php echo $postImg ?>" alt="<?php echo $postImgAlt ?>" >
<p class="post-preview-content"><?php echo $postContent ?></p>
<a href="<?php echo $postLink ?>" >Read more</a>
</div>
</div>
</div>
</div>
The code to include with the variables defined:
<?php
$postTitle = 'Post Title';
$postImg = $site_url . 'images/dummy.jpg';
$postContent = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
$postLink = $site_url;
include( 'modules/post-preview.php')
?>
Here you can see the structure for the module and the variables within it and then how to include the module in our page with all the variables defined.
Now if we wanted to switch to some Wordpress variables we would just update the code we used to include the module like so:
<?php
$postTitle = '<?php the_title() ?>';
$postImg = '<? the_post_thumbnail( 'thumbnail' ) ?>';
$postContent = '<?php the_content() ?>';
$postLink = '<?php the_permalink() ?>';
include( 'modules/post-preview.php')
?>
Voila!
##The Multiple States component library is no longer maintained.
Multiple States has a library of components already built and tested. These components include things like menus, custom google maps and slideshows. Feel free to use these as you wish. We store them as gists on github and a current list is below.
Follow the instructions on each individual component and please get in contact if you are having any issues with any of them on info@multiplestates.co.uk.
A floated menu bar with dropdowns.
https://gist.github.com/k33/5635fe518a11ce0fa989
A fixed menu bar with dropdowns.
https://gist.github.com/k33/abd4e289be4966a733b9
A fly out menu.
https://gist.github.com/k33/e160d649ebad625e8d0c
A centered head to use for holding pages.
https://gist.github.com/k33/8f3ed6d4cc8c9c50a100
A google map with some default styles applied to it.
https://gist.github.com/k33/f2e30d15496d9b739ad5