Jump to content
formmailer

Creating new responsive theme based on Foundation

Recommended Posts

Hi!

I am planning to make my existing site (http://www.zwedenweb.com) responsive, but need some help to get started.

The first question: modify the existing theme or start from scratch? I figured that starting from scratch is probably best. Am I right there?

Second: I think I'll go with Zurb's Foundation, but don't really know where to start. Is there a guide or write up how to create a foundation theme in PW? I searched the forums, but didn't find the stuff to get me started.

//Jasper

Share this post


Link to post
Share on other sites

Hi

Foundation, Bootstrap, Skeleton, etc. have a lot more features than just responsive, if you are after that then take one of those. If it is just responsive you are after have a look at pocketgrid css

http://arnaudleray.github.io/pocketgrid/docs/ (scroll to section Making it responsive)

It's easy to insert, gives you full control and takes only a few lines of code.

Share this post


Link to post
Share on other sites

I'd definitely vote for starting from scratch. If you really want to reuse parts than just copy and merge them into the new templates. This avoids unnecessary clutter from the old templates/styles.

For the Foundation thing. There's nothing special about Foundation, it's just some css/js. If you're unsure about how it works I would suggest just taking the any of your sites and try to rebuild it in a static html with the building block you'll find in the docs of the framework. This way you'll get used to it. It's mostly just some special classes and sometimes specific markup, but you should get started by copy&pasting from their examples. Also Foundation is really baseline from the styling perspective, so you'll need to put your own styles above this baseline. It's more about providing a gridsystem and some responsive components.

Share this post


Link to post
Share on other sites

For the Foundation thing. There's nothing special about Foundation, it's just some css/js. If you're unsure about how it works I would suggest just taking the any of your sites and try to rebuild it in a static html with the building block you'll find in the docs of the framework. This way you'll get used to it. It's mostly just some special classes and sometimes specific markup, but you should get started by copy&pasting from their examples. Also Foundation is really baseline from the styling perspective, so you'll need to put your own styles above this baseline. It's more about providing a gridsystem and some responsive components.

This is the "Hack on CSS" option on http://foundation.zurb.com/docs/, right?

The part that confused me was the "Customize with Sass" section, but that might be completely over the top for what I need... 

//Jasper 

Share this post


Link to post
Share on other sites

To answer your question, "the hack on css" is the normal download of Foundation (sans SASS).

I have used both bootstrap and foundation in many projects over the last couple of years and they are both quite easy to implement. The only major differences that I have run into with using the two is bootstrap seems to be a bit more documented and discussed by other users, as well as the class names. 

Bootstrap seems to have a few more resources out there as well if you ever need assistance (ie bootsnipp) where people post snippets of code.

Share this post


Link to post
Share on other sites

After using both Bootstrap and Foundation for the past 2 -ish years, here's a list of stuff I wish I'd known "back then".

Bootstrap comes with a nicer default styling. It shouldn't really matter as the point here is to put your branding on the top. 

Foundations default aesthetic isn't as pretty IMHO and I have to do more work on top of a Foundation install.

Foundation doesn't have an x-small grid and starts at Small. 

Bootstrap on the other hand does have a =n x-small grid and I miss this when working with Foundation

Foundation has slightly less code in setting up a row/column layout.

Bootstrap has an extra Container class that each row everything needs to be wrapped in

Both are pretty heavy in JS. Dont call all the JS. Just call the JS for the components you need

That's pretty much it for me, I settled on Foundation but miss Bootstrap and am thinking of reverting or trying something much lighter. Heard good things about http://getskeleton.com/

Share this post


Link to post
Share on other sites

While I'm using Foundation in a current project I'm still not keen on both of those frameworks. The only thing I always liked is the ready-made form styling, but I found this scss for that a few weeks ago: http://formhack.io/. Otherwise I just use normalize.css and some grid system (haven't found the optimal yet) for my websites. If it just needs to be an internal webapp of sorts I stick to Bootstrap, as it's the prettier one.

Share this post


Link to post
Share on other sites

What I usually use is Base. It's basically a grid and some useful helpers, nothing special. For elements styling I prefer to start from scratch.

Believe me, Foundation or Bootstrap (and alikes) only makes you lazier :)

Share this post


Link to post
Share on other sites

Believe me, Foundation or Bootstrap (and alikes) only makes you lazier :)

Thats true, but it saves much time. :)  What I like on such frameworks is, that all the files are reachable via cdn for free (maxcdn, cdnjs.com,...). This makes the loading of huge amount of data very fast.

Share this post


Link to post
Share on other sites

Some interesting alternatives among others: uikit, semantic ui, kraken, pure...

NB: I've just noticed that skeleton has a new website

Edit: I have just found (again?) http://materializecss.com/

Edit 2: apparently materialize is also supported in Pinegrow

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 flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   Credits
      The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots

    • By Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
    • 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 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.
×
×
  • Create New...