flydev

Foundation 6 Minimal site profile

Recommended Posts

Foundation 6 Minimal site profile for ProcessWire

This profile is based on the "minimal site profile (intermediate edition)" and bundled with Foundation 6.

This precompiled version can be downloaded at github.

 

  Features

  • Foundation 6 framework
  • Font-Awesome
  • MeanMenu
  • Slick Carousel (Why not Orbit ?)
  • Render / helper functions for :
    • Simple ul navigation
    • Foundation Multi-level topbar
    • MeanMenu - Responsive menu for mobile device
    • Slick Carousel
    • Foundation Accordion
    • Foundation Callouts
    • Jumbotron

 

  Dependencies

  • jQuery

 

How To Install

  1. Download the zip file at Github or clone directly the repo with git clone and skip the step 2.
  2. Extract the folder site-fdn6-precompiled into a fresh ProcessWire installation root folder.
  3. During the installation of ProcessWire, choose the profile "ProcessWire Foundation 6 profile".

 

  References

 

  Credits

  • The ProcessWire staff

 

Screenshots

Capture-big.png

mobile-1.PNG                                          mobie-2.PNG

Edited by flydev
typo and precompiled version download link modified
  • Like 14

Share this post


Link to post
Share on other sites

Hi at flydev => you did it again and this time with the foundation grid :)

Thanks for doing this and also making a pre-compiled profile. I am happy to see it is also compatible with processwire 2.7.2. I have uploaded it to a test server online here: http://www.dev8.pe.hu I think I like the friendly foundation grid more than the intimidating bootstrap but that may be just personal expierence. Looking inside the templates folder, home.php, basic-page.php, _main.php, etc. I see you have a deeper understanding of pw api than I do and am happy to learn from there e.g. filling, preparing and render $content. I also saw you did a great job with customizing the backend:

ClipBoard-1.jpg

Since the issue for me in this is building processwire website templates, I add here franciccio's post where he mentioned a good source of free html5/css templates: https://processwire.com/talk/topic/13589-free-css-templates-css-layouts/ and here are also eight responsive foundation templates:  http://foundation.zurb.com/templates.htm although you have to subscribe to foundation for downloading (I am not affiliated with them in any way). There are probably more free foundation templates to find on the web such as this really nice one: http://pixelhint.com/volcano-html5-responsive-zurb-foundation-template/ (foundation 5 is still available)

Edit: make your own foundation template:

http://foundation.zurb.com/sites/download.html/#customizeFoundation

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

@flydev 

In "Download the zip file at Github or clone directly the repo with git clone and skip the step 2." the link points to your Bootstrap profile. You might want to fix this.

Thanks for this profile anyway, I'm gonna take a look at it in the following days.

 

  • Like 2

Share this post


Link to post
Share on other sites

@flydev It's me again :)

I've installed the profile, and thank's to @adrian's Tracy Debugger module, I did spot these:

https://html5.validator.nu/?doc=http%3A%2F%2Fwww.dev8.pe.hu&showimagereport=yes&showsource=yes

These are easy to fix issues, so you might want to update the published version on github.

BTW, thanks @pwired for the online demo! This way I could easily demostrate validator.nu's result.

  • Like 2

Share this post


Link to post
Share on other sites

@flydev most grateful for this ZF6/PW profile. I found your examples in _func.php to be tremendously helpful and enlightening.  Thanks too for your introduction to the slick.js carousle/slider. I use the scss version of Foundation and was delighted to find the slick.js scss files in its distro. I chose to slug it out with the ZF6 top nav using @soma's MarkupSimpleNavigation rather than meanmenu.js but glad to learn about that too.

Edited by joebaich
completing what I set out to say.
  • Like 1

Share this post


Link to post
Share on other sites

thx for this nice and clean F6-profile.   Sorry for this attachement, I thought there was a problem to remove the images, but it's working fine.

 

Screen Shot 08-13-16 at 12.35 PM.PNG

Edited by hansv
problem mentioned was not a problem

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Clément Lambelet
      Hi all,
       
      I'm really new to ProcessWire, maybe I missed the solution in the documentation.
      I'm working on a site which involves a lot of image upload fields, and I'm always getting many timeout errors. I'm pretty sure it's because I generate too many variations on a single page load (around 20 images with 7 different sizes, for them to be responsive).
      I can't use ImageSizerEngineIMagick to help (my host doesn't support it).
       
      I was wondering if there was a way to hook to the process of client-side image resizing (https://processwire.com/blog/posts/processwire-3.0.63-adds-client-side-image-resizing/) to generate the different variations (as it seems really faster). If not, is there a way to generate the different variations on upload and not on page load ?
       
      Any ideas and suggestions are welcome!
    • By modifiedcontent
      I have my own register-login-profile/account page system. I know that Ryan recently released an official module for this, but there may be an advantage to having my own custom solution. Anyway, it seems to work well.
      But, I have been getting annoying Russian hack attempt accounts, mostly as 'guests' that don't bother to use the activation link.
      Most if not all of these accounts have this in the name field:
      No Subscription Detected
      Not Recognized
      ...which makes them relatively easy to filter out from real name accounts.
      Where do these "strings" come from? I can't find them in Processwire's source. Are the hackers using some kind of tool that inserts these for some reason? Or is it a PHP thing? Does anyone recognize them? Does it mean they are using some kind of backdoor instead of the registration form?
      In general, what are the best practices to secure my registration form, prevent spam accounts, etc.?
      I'll start with adding a check to block IP addresses that try to register with 'Not Recognized' etc. in the name field I guess.
       
       
    • By abdus
      While I was reading Smashing Magazine, I discovered this handy tool called XRespond that lets you load webpages in iframes that are designed to simulate different devices, (similar to how browsers' mobile simulators work).
      I think it's quite useful for local development. In fact it works for any website as long as it doesnt have `X-Frame-Options` headers set to `sameorigin`. I highly recommend using it with browser-sync with live loading as well. I use this settings when using it with PHPStorm to live reload my dev site on pw.dev.
      // remember set cwd to /site/templates/ or call it from templates directory path/to/browser-sync.cmd start --proxy pw.dev --port 8080 --files "**/*.php" --files "assets/**/*.css" --files "assets/**/*.css"
      What other tools/utilities do you use for testing your responsive designs?
    • By erikvanberkum

      I like to showcase my new website acniti on the forum here.
      History
      Building and managing a website is a hobby, over the years, making websites got more complicated and more technologies, knowledge and wisdom are required. I started building my first website around 1997. It started out with a static site built with FrontPage, a WYSIWYG HTML editor. A few years later it was time for the first content management system, I looked at Joomla but settled for MediaWiki. I run those websites for 2 years on the MediaWiki platform and then moved on to WordPress. WordPress was good, it did a good job but over time, it became more complicated to make something out of the box, if it's not a blog, it becomes complicated and to have a feature rich website requires a lot of plugins. Little by little it became less fun and more and more hassle juggling the various plugins.
      In 2014 I became interested in learning PHP programming, I wanted to do this already for many years, but never had enough time to bite the bullet and work my way through the basics. At the end of the courses I though and now what have I learned, how to put this into action? To built modern website with PHP only is difficult, it also requires knowledge of html, MySQL, CSS, java-script etc. I started looking for a framework experimented a little with CakePHP and then came across Processwire via a CMS Critic blog post.
      Development setup
      I developed the acniti website on a Linux Ubuntu 16, with PHP 7 and MySQL as the development server. For the IDE I use PhpStorm, before using Storm I have used and tried some other IDE's such as Zend, Eclipse, Netbeans, Aptana but none of them I liked, some were feature poor, Zend and Eclipse were slow and use a lot of memory. PhpStorm not free but definitely worth the investment. I make use of the free tier Git repository of AWS called CodeCommit, I still use GIT Cola to commit the changes, I could also use PhpStorm for this but I never took the time to change my workflow.
      For project management I am a big fan of Redmine, Redmine is a web-based open-source project management and issue tracking tool. I use this also for my other work so it easily integrates with the website building flow as well. It's easy for maintaining lists of features you want to carry out per version, it supports a wiki which is easy for making notes and keeping a log of the activities. I use it everyday and it runs on Ruby. For images and graphics I switch back to Windows for some Photoshop.
      Processwire
      The acniti website runs on the latest stable Processwire version at the time of writing 3.0.62, the website has 4 languages including an Asian language. The Japanese language URL's are implemented with their 3 alphabets kanji, hiragana, katakana i.e. https://www.acniti.com/ja/インレットフィルタ. Some images on the site have text and image language tags help to select the correct language, the Processwire blog post from 30 June was helpful to get this running.
      The main site has a bootstrap theme, for the mobile version of the site the google AMP specification is implemented. This was really fun to do but challenging at times as the AMP specification is still a little limited. To visit the AMP pages type /amp/ behind any URL like https://www.acniti.com/amp/ for the homepage. The Google webmaster portal is really easy to troubleshoot and check for the correct AMP implementation. Finally structured data according to schema.org is added to the site via the JSON-LD markup.
      The commercial modules ProCache and Formbuilder are installed. The ProCache module is really amazing and makes the website lightning fast. Besides the commercial modules around eleven open-source modules are used, Database Backups, Tracy Debugger, Wire Mail SMTP, Protected Mode, Batcher, Upgrades, PublishAsHidden, URL (Multi-language), Twitter Feed Markup, Email Obfuscation (EMO), Login History, Selector test.
      During development the Processwire forum is really helpful and checked often. The forum is good for two reasons, most of the questions, I had during development of the site, are already on the site. Secondly the only 6 questions I posted over the last 2 years, are quickly and accurately answered. The downside I didn't become a very active member on the forum but see that as a compliment.
      An open issue on the acniti site is the AMP contact form with Formbuilder, the restricted usage of java-script for the AMP specification requires some more in-depth study.
      Hosting setup
      For the hosting services the acniti site uses Amazon EC2, I use AWS already many years to manage my cloud office so it was easy to decide to use it for the web hosting as well. The site is running on a micro instance of EC2 and with the ProCache module CloudFront is serving webpages worldwide fast. Updates from the development server are sent to CodeCommit and from there to the production server. From a site management point of view it would be nice to use AWS RDS to manage the MySQL databases, but from a cost perspective I decide not to do that for now. Via a cron I have set up automatic MySQL backups and these are via another cron job uploaded to AWS S3. To make sure the server is safe, a cron job runs daily snapshots of the server, this is getting initiated via AWS Lambda. Lambda also removes older snapshots because during creation a delete tag is attached for sevens days after their creation. It's important to make a separate MySQL backup as with snapshots the database often gets corrupted and its easier to restore a database backup than to fix a corrupted database. Another nice feature to use AWS Lambda for is a simple HTTP service health checker, which reports to you by email or sms when the website is down.
      Making use of all these Amazon services cost me probably somewhere between 10 - 15 $ a month, I have to estimate a little since I am running a lot more things on AWS than only the website.
      The site is running on a Comodo SSL certificate but next year I will change to the free LetsEncrypt, as it is easier to add and will automatically renew after 90 days. The Comodo certificate requires manually copy pasting and editing the certificates in place.
      Writing Content
      The content for the site I write in the Redmine wiki, most of the content I write requires research and it takes about two weeks before I publish the content to the Processwire site. For writing content I use the google spell checker with the grammar checker, After the Deadline. To ensure catchy headlines they are optimized with the Headline Analyzer from CoSchedule
      Social Media
      Now the site is running, it needs promotion. The robots.txt files shows the search engines the way as does the sitemap.xml both of these I have made in a template file. Most of the blog articles I promote are republished on social networks like, LinkedIn, Tumblr, Google+, Twitter, and some branch specific networks as the Waternetwork and Environmental XPRT. To check, the search engines index the site well, Google webmaster and Bing webmaster check for any problems with the site. For statics on the same server there is an instance installed of Piwik. Piwik is a leading open alternative to Google Analytics that gives full control over data. The Piwik setup works very well and gives a good overview of the site usage both on the desktop via the site or via a mobile app. As a part of a test I have installed the open-source SEO-panel on the same server to manage keywords and to further improve the scores in the search engine, a nice feature is that you can also track your competitors. I am still new to SEO panel and have to learn more how to use the tool effectively.
    • By Kiwi Chris
      Years ago before Wordpress had even been invented, I started work on a site providing information about my local region of New Zealand. Back then, most people were on dialup, and if you wanted a CMS you had to roll it yourself - if you could find a host that supported server scripting at an affordable price.
      This year, with a quiet patch with essentially no paid work, I finally decided it was time to make the move from a home-grown CMS using an obscure scripting language to something more modern, so I could spend more time adding content and features, and less time maintaining the core CMS.
      www.marlboroughonline.co.nz
      I love Processwire because it works the way I think, and when I was first introduced to it, I was up and running within 20 minutes of reading the documentation, vs several hours reading Wordpress documentation, and still not entirely sure how to create my own fields and create a theme from scratch.
      I come from a database programming background, particularly Microsoft Access, so being able to make fields and add them to a form or report, is the way I'm used to working, although it took a bit of getting used to Processwire not adding fields to a table by default, although I see Pro-Fields or custom field types can achieve this. (I haven't used Pro-Fields in this project as I'm essentially on a zero budget).
      The site itself doesn't use anything particularly fancy. I use the following modules:
      Map Marker Form Template Processor Social Share Buttons (With my own colour version of the button icons) AIOM+ (This is particularly handy as I'm using a customised version of Bootstrap, and it handles compiling all the LESS files) Jumplinks The biggest task was importing all the content from my existing CMS, but since I wrote it, it was easier than dealing with some third-party CMS.
      The site had been around for a long time, and had numerous inward links including a number from Wikipedia, and I didn't want to break them in the conversion.
      If you're converting a site to Processwire with a URL structure that can't be replicated in Processwire, Jumplinks is a must-have module, as it handles complex URL redirects very nicely.
      The site has quite a bit of content, much of it which needed updating in addition to changing the CMS, so there might be odd bits that don't look right, but that's certainly not Processwire's fault.