ryan Posted July 8, 2013 Share Posted July 8, 2013 ProcessWire Site Profile Using Zurb Foundation 4 This is a drop-in replacement for the default ProcessWire site profile. See the live demo at: http://processwire.com/foundation/ It is mobile-first and fully responsive, capturing all the benefits of Zurb Foundation 4. Ready to be expanded upon with built-in support for deeper levels of navigation nesting in the sidebar. Pagination ready with Foundation-specific pagination output, when/if you want it. Improved search engine, relative to the basic profile. Library of Foundation-specific markup generation functions included, primary for generation of navigation (in _nav.php). Uses ProcessWire 2.3+ prepend/append template file settings making it easy to work with. It is largely stock Foundation 4 in terms of look and feel, with a few tweaks. To Install Download this profile from GitHub or mods.pw/4u. Start with a copy of ProcessWire 2.3 or newer, and its default site profile. If starting with an uninstalled copy of ProcessWire Replace the /site-default/templates/ directory with the templates directory from this profile. Replace the /site-default/config.php file with the config.php file from this profile. Run the ProcessWire installer. If starting with an already-installed copy of ProcessWire Replace the /site/templates/ directory with the templates directory from this profile. Add the following two lines to your /site/config.php file: $config->prependTemplateFile = '_init.php'; $config->appendTemplateFile = '_main.php'; Desktop Screenshot Mobile Screenshot 33 Link to comment Share on other sites More sharing options...
MatthewSchenker Posted July 8, 2013 Share Posted July 8, 2013 Greetings, Very interesting. I have been on the fence regarding CSS/JS frameworks for some time (experimenting but never full adopting them), but Foundation has been the one I like the best. I just have not felt sufficiently motivated to stop using my own code. And yet, I understand that it might be best to just start using a framework. With your new profile, it might make the jump even easier! I look forward to giving this a try, and I will report back on my experiences. Ryan -- THANK YOU so much for all your tremendous work, creativity, and endless generosity. Thanks, Matthew 4 Link to comment Share on other sites More sharing options...
cstevensjr Posted July 8, 2013 Share Posted July 8, 2013 Ryan, You constantly make working with PW too exciting. 1 Link to comment Share on other sites More sharing options...
kongondo Posted July 8, 2013 Share Posted July 8, 2013 Wow! Very much appreciated, thanks Ryan! I've been stuck on Foundation 3 since I've never really grasped the "new" Foundation 4 syntax. I'll study this profile to see if I can get it 1 Link to comment Share on other sites More sharing options...
MarcC Posted July 8, 2013 Share Posted July 8, 2013 Thanks Ryan! This is really great and a huge timesaver. Also learning new stuff about 2.3 this way is ideal. 1 Link to comment Share on other sites More sharing options...
renobird Posted July 9, 2013 Share Posted July 9, 2013 Ryan, Thank you for sharing this — I just spent an hour dissecting, and learned some new tricks. Much appreciated. 1 Link to comment Share on other sites More sharing options...
Hieu Do Posted July 9, 2013 Share Posted July 9, 2013 Thanks so much Ryan, I'm just getting started with PW and am totally new here. Being a Wordpress developer for at least 5 years, now I realize that I've been stucked too long in its fixed structure. PW opens my eyes and gives me more innovation. This new site profile is awesome and totally convince me to stay with PW. Again, thanks so much Ryan. You're a super man. 3 Link to comment Share on other sites More sharing options...
underk Posted July 9, 2013 Share Posted July 9, 2013 Superb work. However I would like to let you know that foundation 4 is only supporting IE9+. It is sad because it seems more flexible than bootstrap(which is IE7+). If you can deal with this, then give it a try! 1 Link to comment Share on other sites More sharing options...
videokid Posted July 9, 2013 Share Posted July 9, 2013 Indeed, nice work... Every time I think OK... now I have something solid, let's actually start building a website, I encounter something new here and I want to try it out... Anyway I can live with IE9+, less will get a warning 1 question, why the use of single and double quotations? ex <meta name='description' content='ProcessWire is an open source CMS and web application framework aimed at the needs of designers, developers and their clients. ' /> <link rel="stylesheet" href="/zurb4site/site/templates/foundation/css/foundation.css" /> <div id='topnav'> <div class='contain-to-grid'> <nav class="top-bar"> <ul class="title-area"> why not all " " or am I just being difficult? Regards! Link to comment Share on other sites More sharing options...
Pete Posted July 9, 2013 Share Posted July 9, 2013 Oh ryan, I need this today and here it is Your timing is impeccable as ever! Excellent work once again. 2 Link to comment Share on other sites More sharing options...
teppo Posted July 9, 2013 Share Posted July 9, 2013 @videokid, take a look at _main.php: <?php if($page->summary) echo "<meta name='description' content='$page->summary' />"; ?> <link rel="stylesheet" href="<?=$config->urls->templates?>foundation/css/foundation.css" /> String interpolation only works when variable is in double quotes and in those cases it's just easier (and source-wise more readable) when single quotes are used instead of escaped double quotes (\"). On the other hand, elsewhere it just makes sense to use double quotes 1 Link to comment Share on other sites More sharing options...
ryan Posted July 9, 2013 Author Share Posted July 9, 2013 I just posted version 2 of this profile, which makes typographic tweaks to several styles. It also adds support for photo captions, seen on the typography tests page. Also, there is now a demo site of this profile. However I would like to let you know that foundation 4 is only supporting IE9+. I'm okay with only supporting IE9 and newer for the desktop view. IE8 and lower can have the compatibility mobile view. It's not like IE8 and older are blocked. They just simply get a view that works consistently in older browsers (which is basically the mobile view). I think this is smart, and better than trying to make old browsers display like new browsers. Supporting old versions of IE always means extra bulk and shenanigans in the code. The less legacy-IE monkey business, the better, IMO. But if you are building a complex desktop grid for an audience using old IE versions (like inside a government office that has standardized on IE7 or something) then Foundation is probably not the right framework for that. Here's what this profile looks like in IE8 if you are interested. why not all " " or am I just being difficult? The rule is that you have to start and end an attribute with the same style quote. Otherwise, they are interchangeable. I prefer to use single quotes myself. But if I'm copying/pasting something, I'm not going to bother going and changing double quotes to single quotes either. But ultimately the biggest reason is what Teppo highlighted: what makes the most sense in the context where they are used. 3 Link to comment Share on other sites More sharing options...
ryan Posted July 9, 2013 Author Share Posted July 9, 2013 I've been stuck on Foundation 3 since I've never really grasped the "new" Foundation 4 syntax. I always liked Foundation 3, but it just seemed slower (on my computer) than other frameworks. Foundation 4 doesn't seem slow at all anymore. I was initially confused by the syntax with class names like "small-4 columns" and "large-8 columns", etc. But it's actually very simple: if you want a div to have 4 columns at small (mobile) and at large (desktop) then use "small-4 columns" ...Foundation is literally mobile-first, so the "small" settings inherit through to the large settings, unless you override them. But if you want it to only have those 4 columns on at large (desktop), and 1-column stacked on mobile, then use "large-4 columns" ... which would be like the behavior of Foundation 3. If you want to define different column amounts for small and large, like say 2 columns at small (mobile) and 4 columns at large (desktop) then specify both in the class, like "small-2 large-4 columns". I never got far enough in Foundation 3 to say for sure, but I don't think it had that distinction...I think it just stacked everything at small. 2 Link to comment Share on other sites More sharing options...
kongondo Posted July 9, 2013 Share Posted July 9, 2013 Thanks for the explanations Ryan. The "small-x-columns" and the like are what stumped me and I didn't have the energy to dig around the code to find out what was happening. The documentation on their site was really sparse about this issue. Link to comment Share on other sites More sharing options...
ryan Posted July 9, 2013 Author Share Posted July 9, 2013 I actually thought this Foundation 3 to 4 Migration Guide was really helpful in that regard. Even though I never technically knew Foundation 3 very well, it served as a good starting point for Foundation 4 in general. Link to comment Share on other sites More sharing options...
kongondo Posted July 9, 2013 Share Posted July 9, 2013 Yeah, I'd seen that, thanks. I'll have to revisit it... Link to comment Share on other sites More sharing options...
apeisa Posted July 9, 2013 Share Posted July 9, 2013 This is great. One confusion though: I tested demo site on my mobile (android) and navigation didn't allow going any page that has children. It always opened the menu, no matter where I tapped (arrow or page title). 1 Link to comment Share on other sites More sharing options...
OrganizedFellow Posted July 10, 2013 Share Posted July 10, 2013 Foundation4 by far been my favorite framework of choice. Sublime2 + Emmet plugin & Foundation4 = some pretty quick layouts. 2 Link to comment Share on other sites More sharing options...
arjen Posted July 10, 2013 Share Posted July 10, 2013 OrganizedFellow, holy *** that Emmet stuff is pretty awesome! Thanks for sharing! 1 Link to comment Share on other sites More sharing options...
videokid Posted July 10, 2013 Share Posted July 10, 2013 (edited) @teppo, @Ryan Just Saw Ryan's post also... well, that covers it all Edited July 10, 2013 by videokid Link to comment Share on other sites More sharing options...
arjen Posted July 10, 2013 Share Posted July 10, 2013 Offcourse thanks to ryan too! Great work as usual! Your programming is really great to follow and great to learn by! 1 Link to comment Share on other sites More sharing options...
raydale Posted July 11, 2013 Share Posted July 11, 2013 I've just seen this. Great work and thanks Ryan! 1 Link to comment Share on other sites More sharing options...
SteveB Posted July 11, 2013 Share Posted July 11, 2013 Improved search engine, relative to the basic profile. Care to elaborate on that? Link to comment Share on other sites More sharing options...
teppo Posted July 11, 2013 Share Posted July 11, 2013 Care to elaborate on that? Short excerpt from search.php of Foundation site profile: // if the above doesn't find anything (perhaps due to MySQL minimum word // length or stopwords), switch to non-indexed phrase match if(!count($matches)) $matches = $pages->find("title|body%=$q, limit=$limit"); This is actually pretty nice idea -- use faster method first and only if it seems to fail switch to slower one. Don't know how much difference that really makes, but still. Also: there's a pager now, which is pretty obvious improvement already 2 Link to comment Share on other sites More sharing options...
ryan Posted July 12, 2013 Author Share Posted July 12, 2013 This is great. One confusion though: I tested demo site on my mobile (android) and navigation didn't allow going any page that has children. It always opened the menu, no matter where I tapped (arrow or page title). This always seems to be an issue when translating multi-level drop down navigation to mobile. The other issue with dropdown navigation is that even on the desktop, people may miss the index pages, which might be important. The renderTopNav() function in /site/templates/_nav.php has a "repeat" option, that makes it repeat an index page as it's own first child. This solves both issues. Before I had it default to true, but set it to false later on for some unknown reason. I've switched it to be the default again. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now