Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Frank: A Free WordPress Theme Designed For Speed

Today we are pleased to release Frank, an open-source WordPress theme designed and built to provide a light, responsive and unobtrusive reading experience. The theme’s default home page makes 9 database queries and consists of 2 requests weighing at roughly 30KB (9.5KB gzipped). Frank keeps it basic: no Javascript dependence, no unnecessary images, just a simple, no-frills, fast blog theme. The theme is introduced by its developer, P.J. Onori. —Ed.

Frank is a responsive WordPress theme. It uses a modified version of the Foundation1 grid system. It also offers the unique feature of a modular home page layout system. The theme comes with various different layouts for your home page (1 column, 2 column, 3 column, 4 column, etc.) that can be mixed and matched. This allows for a home page with different content sections in different layouts.

frank-layout2

With intense use of HTML5 and CSS3 Frank cuts down on complexity and improves performance. Frank works decently on Internet Explorer 8+. However, at the moment no guarantees are given for any earlier IE versions. It is packaged with the parent theme (in the frank directory) as well as the child theme (in the somerandomdude directory) which I use for my own site3. By using Frank, my home page weighs in at 43.65KB over 6 requests (Google Analytics accounts for ~15.5KB and 3 requests). In addition, 33.78% of global page loads completely within 1 second or less (55.75% in the US). On Google Page Speed4, the demo5 gets an overall PageSpeed Score of 97 (out of 100).

Also, Frank uses a subset of Foundation to provide a responsive layout for desktops, tablets and phones. Add this to the theme’s small footprint and you have a mobile-optimized blog. The theme is 100% open source and developer-friendly. The parent theme (/frank) is released under the GNU Public License6 and the child theme (/somerandomdude) directory is released under the Creative Commons Attribution-ShareAlike 3.0 Unported License7.

Demo and Downloads Link

You can check the live demo8 of the theme.

home-somerandomdude-5009

Why Did I Make Frank? Link

There are three reasons:

The first reason was to make good on a promise. I made the commitment that everything I created on my site would be open source. That is how Iconic14 was born, and this is how Frank came to be. My site is now 100% open source.

The second reason is that I believe that speed is an essential part of user experience. I wanted my site to reflect that belief.

The last reason is that WordPress has an unfair reputation of being a slow, resource-hungry blogging platform. Make no mistake, WordPress can be slow, but that is often due to poor use. I wanted to make a WordPress theme to break the unfair stereotype.

Frank shines for sites that need a no-frills blog that focuses on the reading experience. Frank is not for everybody, but it shines when used in its sweet spot.

Reading Experience: Example15

Future Development Link

Frank is ready to be used, but there is still a long way to go until it’s in tip-top shape. This theme can and will get faster. Here’s what is currently being worked on.

  • Greater typographic and visual polish
  • Increased CSS optimization
  • HTML cleanups and structural improvements
  • Modernization and optimization of Javascript components
  • Improved organization and structure of SCSS files
  • Developer-friendly build tools
  • Guides for optimal use of Frank

Credits Link

This theme was built with significant help of some great folks. My sincere thanks to Felix Holmgren16, Jon Christopher17 and Josh McDonald18 for their tremendous contributions.

(ea) (vf)

Footnotes Link

  1. 1 http://foundation.zurb.com/
  2. 2 http://somerandomdude.com
  3. 3 http://somerandomdude.com
  4. 4 https://developers.google.com/speed/pagespeed/insights#url=http_3A_2F_2Fsomerandomdude.com_2F&mobile=false
  5. 5 http://somerandomdude.com
  6. 6 http://www.gnu.org/copyleft/gpl.html
  7. 7 http://creativecommons.org/licenses/by-sa/3.0/
  8. 8 http://somerandomdude.com
  9. 9 http://somerandomdude.com
  10. 10 http://somerandomdude.com
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2013/01/large-preview.png
  12. 12 https://github.com/somerandomdude/Frank
  13. 13 https://github.com/somerandomdude/Frank/archive/master.zip
  14. 14 http://somerandomdude.com/work/iconic
  15. 15 http://somerandomdude.com/2012/08/12/svg-css-injection/
  16. 16 https://twitter.com/felixhgren
  17. 17 https://twitter.com/jchristopher
  18. 18 https://twitter.com/onestepcreative

↑ Back to top Tweet itShare on Facebook

Advertisement

P.J. is a design technologist by trade. Check out his thoughts, work and findings at somerandomdude. You can follow him on Twitter.

  1. 1

    cool as hell!
    might use it for my upcoming blog.

    -8
  2. 2

    This looks fantastic. Can’t wait to do some serious work on here.

    0
  3. 3

    Elliott Stocks

    January 16, 2013 1:55 pm

    Nice theme! I’ll be contributing to the theme to fix a couple of bugs ;)

    1
    • 4

      Thanks so much for the help. It’s greatly appreciated!

      0
      • 5

        Hi thanks for the Awesome Theme , but the sad part is i couldn’t use that, i got error message while uploading it on Wordprss ” Style.css is missing ” , i also tried downloading it from GitHub , getting the same thing ..

        Any Help ?

        3
        • 6

          Chad Ridings

          March 11, 2013 1:16 pm

          Hi, I was wondering the same thing. Here is what I did to solve this… I unzipped the Frank_Master.zip – within that zip is the folder named “frank”. Simply compress that “frank” folder into a zip… I named mine “frank.zip” and put it on my desktop. From there I went into my WP admin panel/themes/installed/upload and uploaded my new frank.zip file and all was successful. I checked the “frank” folder that is in the master zip and it has the style.css file. Hope this helps. -Chad

          2
          • 7

            That’s correct. The wp-uploader is not too flexible when it doesn’t find the style.css on the first level. But you are basically installing 2 themes at once. So you need to unzip them and drop them into the wp-content > themes folder via ftp.

            1
  4. 8

    Excellent!
    Thanks P.J.

    0
  5. 9

    NIce work!

    0
  6. 10

    That’s one great looking theme!

    0
  7. 11

    Luke Williams

    January 16, 2013 2:51 pm

    Has the theme got an optimisations in for the use of images such a post thumbnails or in-post images? These tend to be a large part of the page size bloating in my experience, even if JS is covered.

    -3
  8. 12

    Just wondering: can we expect anything other than WordPress CMS related posts? I mean, perhaps something about Drupal, some random open source CMSes, or whatever?

    I’m not picky btw, just wonder if these are sponsored or not.

    Cheers!

    2
    • 13

      They said quite a few times. They just love WP.
      That’s it.

      And I completely understand that:)

      5
      • 14

        Yeah, I can’t say I read *all* the comments, nor do I read *all* of the WP stuff.

        Was just wondering, ‘s all :)

        Cheers for the answer!

        0
  9. 15

    Nice! I love Foundation! Are you just using the grid, or have you included things like Orbit, Reveal and Magellan, too?

    0
  10. 16

    Good job!!!

    -2
  11. 17

    Borislav Kiprin

    January 16, 2013 11:05 pm

    Splendid work! :) Thanks for sharing!

    0
  12. 18

    Really Sweet! Rockenroll!

    0
  13. 19

    Much appreciations for this theme and its minmalistic design approach, but I would suggest to pay more attention on readability at places where u keep lots of data, like in work sections. I think the work section is looking bit crowded and less readable. You had given black color to titles of sections and same color are for paragraphs. Rest I found it awesome !

    1
  14. 20

    Fast as hell :-) Thanks for the good work!

    0
  15. 21

    Very nice theme indeed :) Excellent readability.

    0
  16. 22

    looks nice.
    great job!

    1
  17. 23

    Great Theme!
    I’ll probably use it for my blog once you get the most infuriating bugs fixed.
    Anyway, Good Job, and thanks for sharing!

    0
  18. 25

    Fails to install in WP 3.5, with error message:
    “Installing Theme from uploaded file: Frank-master.zip

    Unpacking the package…

    Installing the theme…

    The package could not be installed. The theme is missing the style.css stylesheet.

    Theme install failed.”

    2
    • 26

      as commented above, the zip that you download contains the ‘frank’ theme and the ‘somerandomdude’ child theme. These need to be uploaded separately and not within the main zip file.

      2
  19. 27

    Theme looked good but just tried to install it locally on the latest wp build and got a The package could not be installed. The theme is missing the style.css stylesheet error

    … am I missing something or does this need to be fixed?

    1
    • 28

      You need to decompress the file you get, and then you’ll end up with two folders, Frank, and SomeRandomDude – those are the actual theme files. If you zip them up you can upload them right to your wordpress install.

      6
  20. 29

    Yasen Vasilev

    January 17, 2013 7:05 am

    I like it because:

    – it’s clean, simple
    – it has large body text!!!!
    – it’s free

    0

↑ Back to top