maxstarter silverstripe theme
maxstarter is SilverStripe CMS starter theme which includes set of tools for rapid prototyping (wireframing in SilverStripe) and faster theming final product. Uses Foundation Zurb CSS framework.
how to install
init your project as you always do (e.g. using composer)
clone maxstarter theme into your themes directory (will be named as 'main')
cd themes && git clone https://github.com/Webmaxsk/maxstarter main
remove .git folder for this theme (we need editable sources, you will change theme a lot)
cd main && rm -R -f .git
set theme name to 'main' in your config file (yml or _config.php), example of mysite/_config/project.yml:
SSViewer: theme: 'main'
add this to your Page_Controller's init() method:
// Requirements Requirements::clear(); Requirements::block("framework/thirdparty/jquery/jquery.js"); Requirements::combine_files( 'page.js', array( "themes/main/bower_components/jquery/jquery.min.js", "themes/main/bower_components/foundation/js/foundation.js", //all fundation OR custom build - see bellow //"themes/main/bower_components/foundation/js/foundation/foundation.js", //"themes/main/bower_components/foundation/js/foundation/foundation.abide.js", //"themes/main/bower_components/foundation/js/foundation/foundation.accordion.js", //"themes/main/bower_components/foundation/js/foundation/foundation.alert.js", //"themes/main/bower_components/foundation/js/foundation/foundation.clearing.js", //"themes/main/bower_components/foundation/js/foundation/foundation.dropdown.js", //"themes/main/bower_components/foundation/js/foundation/foundation.interchange.js", //"themes/main/bower_components/foundation/js/foundation/foundation.joyride.js", //"themes/main/bower_components/foundation/js/foundation/foundation.magellan.js", //"themes/main/bower_components/foundation/js/foundation/foundation.offcanvas.js", //"themes/main/bower_components/foundation/js/foundation/foundation.orbit.js", //"themes/main/bower_components/foundation/js/foundation/foundation.reveal.js", //"themes/main/bower_components/foundation/js/foundation/foundation.tab.js", //"themes/main/bower_components/foundation/js/foundation/foundation.tooltip.js", //"themes/main/bower_components/foundation/js/foundation/foundation.topbar.js" ) ); Requirements::set_combined_files_folder(ASSETS_DIR."/_compiled"); Requirements::customScript(" $(document).foundation(); ");
dev/build & flush your project
theme is installed and ready to use
how to use
You should have compass/sass installed if you want to play with css
Wireframing with Foundation
watch changes in scss files (compass will compile themes/main/css/style.css & editor.css for every change)
cd themes/main && compass watch
edit themes/main/scss/core/_settings.scss for any change in foundation variables (look at zurb/foundation documentation)
change HTML in themes/main/templates folder, look at Includes/foundation folder for ready to use Includes. Example in Page.ss. You can use parameter within including files, e.g.:
<% include TopBar allowChildren="1" %>
Changing wireframe to final product (with custom graphics)
comment following line in Page_Controller's init() method
do similar with css/scss. Change following line in themes/main/scss/core/_settings.scss to 'false'
turn ON all needed foundation components (in same file):
- Foundation + silverstripe work by Ryan Wachtl (theme and foundation forms module) (I do prefer forms templates inside my customizable theme rather than in separate module, but it's personal preference. Anyway, Ryan made great job and inspired me in many ways... Thanks!)
About Foundation 5
Foundation is the most advanced responsive front-end framework in the world. With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices.