Thursday, December 18, 2014
Wednesday, December 17, 2014
Getting started with Foundation for apps
So, there’s a new version of Foundation…
Not long ago, we told you all about how to get started with Foundation 5. Now there’s a new version out; not “Foundation 6” but Foundation for Apps, and it’s going to be huge.
That Foundation 5 is a powerful and flexible framework, there is no doubt. It can be used for content-driven websites, apps, almost anything you can think of, though it might take some work and customization. There are, however, layout and design conventions specific to apps. Also, apps are often developed for mobile browsers, which support newer technologies.
In short, the classic Foundation framework, while flexible enough to make apps with, was created as a tool for many purposes. App developers may want something that caters a bit more specifically to their needs, and Zurb has provided exactly that.
Installation & features
Foundation for Apps is not the old Foundation with some added features. It’s a completely different product. It’s designed from the ground up do be web developer-friendly. Indeed, while you don’t need to be a developer to use it, it helps to know a little bit about setting up development environments.
This is because you don’t just unzip this framework and drop it in your apps folder. It’s based on tools like Angular.js](https://angularjs.org/) and Sass; it comes with its own mini-server which will compile and serve your projects for you on the fly. This means that you have to have Node.js, Ruby, and a few other things installed. You also have to install the whole thing from the command line. Developers working on Linux and OSX won’t have any problems getting set up. It’s a bit more troublesome for aspiring nerds like me who use Windows.
Once you get past these initial hurdl… ahem I mean, embrace this new way of doing things, you’ll see some awesome stuff under the cover, including:
- A grid based on Flexbox and designed for apps. It includes support for laying out your “screens” vertically and horizontally, scrolling inside each section, and more;
- tons of UI components;
- Angular.js; it’s all the rage right now;
- a template and component-based file structure;
- Motion UI: Zurb’s new animation library designed specifically for app user interfaces.
Getting started
One of the advantages of frameworks in general is that they’re perfect for making quick prototypes. Once you’ve installed this thing, and have started the mini server, it’s time to put your ideas together into a live, interactive interface that doesn’t do anything. Yet.
For this article, I created a dead-simple “contact management page” that would have any client begging for more details, and maybe a change of layout:
In your app’s directory, you’ll find several folders and files. For the purposes of pure front-end development, you only need to worry about the “client” folder. That’s where all of your source files go. In there, the following folders and files are set up by default:
assets
- js
- - app.js
- scss
- - _settings.scss
- - app.css
- templates
- - home.html
index.html
The app.scss and app.js files are where you put all your custom Sass and JS, respectively. _settings.scss is just that: the file where you can override a lot of the default styles. The code is properly commented, and it’s easy enough to find what you need. You can also use this file to completely disable different parts of the CSS framework, so they won’t be included when your app is built.
index.html is the file that “make it all happen” by pulling in other components, app screens, and so on. home.html is the content that you’ll see when you first go to http://localhost:8080, once the mini-server is running. It’s also where I started working.
The grid
The first thing you’ll have to get used to is the grid itself. It uses Flexbox, so things work quite a bit differently, but the classes will be familiar. To create two blocks/columns of equal width, this is all you need to do:
<div class="grid-block">
<div class="grid-block"></div>
<div class="grid-block"></div>
</div>
Yup. That’s it. If you want to put actual content inside those two columns, you’ll need to do it differently. This is what the columns in my prototype look like:
<div class="grid-block">
<div class="grid-block">
<div id="side" class="small-12 medium-4 grid-content medium-order-2"></div>
<div id="contacts" class="small-12 medium-8 grid-content medium-order-1">
</div>
</div>
You’ll notice that you always seem to need two elements with grid-block as classes to make things align properly. You might also notice that I’ve manually specified column widths. If you don’t, all blocks will expand to fill all available space, remaining equally wide.
Components
Also included are a large number of components from classic Foundation. You have your classic callouts and modal windows, alert boxes, form styles, button styles, tabs, and more. The typography is solid, and there’s also a limited icon set (all SVG) included for use in buttons, menus, and so on.
I’m particularly fond of the panels, which are basically blocks of content hidden off-canvas, which can be called onto the screen from any side.
I also like the “cards”. Cards are just simple rectangular objects meant to separate content. I used them for the list of contacts in the screenshot above. For the full list, see the documentation.
Go for it.
What are you waiting for? Get your command-line on and start playing with this. Even if you’re not an app developer, it’s good to know how to work in this environment, especially if you work with actual programmers.
| RETRO MANIA: 50 Vintage Text Effects – only $10! |
Source
Vía Webdesigner Depot http://ift.tt/1wJCreP
Wednesday, December 10, 2014
Accelerate your front-end website development with Harp
I like static sites. To be more accurate, I like building them. There’s something pure about sitting there in front of your screen; it’s just you and your text editor, writing in plain old HTML and CSS.
Don’t get me wrong, dynamic sites are fun too. God knows I’m a fan of WordPress and the ease of use that it affords users. Static sites bring me back, though. I remember switching from WYSIWYG software to a text editor. I remember streamlining the development process with my first ever PHP function: include. Those were good days, but unlike so many others, they’re not all gone.
The difference is that now, we can do it better. Pre-processors like Less and Sass vastly improved the experience of writing CSS. We have any number of scripting languages to mix into our HTML, if we so choose. And then… then people did some really interesting things.
I’ve previously mentioned the Hammer app for Mac. It’s an app that introduces its own functions and expansions to good old HTML, allowing you to include a file as a partial in another, and other good things. It compiles the results into a regular static site that can be hosted anywhere. It’s actually got quite a few more features than that, but this article isn’t about Hammer. Why? It’s only available for the Mac platform.
Enter Harp…
Introducing Harp
It’s not an app, it’s a whole lot more. It includes preprocessors for CSS. It includes templating languages for HTML documents. It’s a mini server that can be used for development, or turned into an actual production server. You can use server-side JavaScript to turn it into a full app, as it runs on Node.js. Or, if you’re not a programmer, you can just build your static site, and then compile it for hosting elsewhere.
Because it’s based on Node.js, it’s cross-platform. It’s also MIT licensed, so it’s free. You can even make changes and redistribute or resell it if you like.
Now, people who have been keeping an eye out will have noticed that Harp is not the only tool of its kind. Lots of people are creating Node-based tools for getting web projects started quickly. My main problem with these is that they generally assume that you want to use their favorite CSS framework, animation library, or HTML boilerplate. Harp makes no assumptions about the code you want to write. It just gives you the tools to write it faster.
Mind you, it has to be installed and run via the command line. There’s no GUI for this. But once you get it going — and that isn’t hard at all — the benefits outweigh the learning curve.
The tools
CSS pre-processors
By now, I’m sure most of our readers are familiar with the ways that the web industry has tried to improve on vanilla CSS. When the mini-server for your project is running, LESS, SASS, and Stylus files are all automatically compiled into CSS.
The compilation is always satisfyingly fast. In all of my tests, changes made to my website have compiled in the time it takes me to save my file, then refresh my browser.
Templating languages
Also included are Jade and EJS. These are both JavaScript templating languages designed to help you write/generate more advanced HTML documents with more flexibility. Basically, you can build HTML templates, and store your actual page content separately from those templates. It’s kind of like using a CMS, only there’s no database (unless you want one), and you have to write all of the content into plain text files.
The real advantage is, of course, code maintenance, plus all the cool stuff that actual programmers can do with actual server and client-side JavaScript. These are also the languages that allow you to create more advanced systems, like blogs, all relatively easily (again, if you have a programmer on the payroll).
What’s the difference between the two? It’s mostly about how you prefer to write your code.
EJS keeps things simple. If you already know HTML, it’s just a matter of adding in EJS-specific tags, like so: <% include global/header %>. What I did there? Basically, I just grabbed the HTML for my page header from another file and imported it for use in my main template. You can do lots more complex stuff, of course. Here’s what the Harp documentation has to say about EJS.
Jade takes a very different approach to writing HTML altogether. It looks like this, as shown on the project’s home page:
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
Jade is pretty cool,
That all gets translated into HTML and Javascript. Note the inclusion of an if/else statement right in the middle of it all, and the dependence on proper indentation.
Coffeescript
Coffeescript is to JavaScript what Jade is to HTML. Basically, it’s a simplified format for writing JavaScript, which then gets compiled into the regular stuff. Like Jade, it’s heavily indentation-dependent, and drops a lot of the syntax.
It looks like this (another example shamelessly cribbed from the project’s home page):
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x
And the output looks like this:
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
The platform
The websites created with Harp can be hosted anywhere, of course. It’s worth mentioning, though, that Harp’s creators made a hosting platform specifically designed for stuff built with their software. The pricing ain’t bad, and it integrates with Dropbox for easy automatic updates to your site. Check it out here: www.harp.io
Conclusion
Harp, with its preprocessors, templating languages, sheer speed, and cross-platform goodness, is a solid addition to any designer’s toolbox. I say it’s worth the learning curve.
| Mega Bundle of 105 Incredible Vector Infographic Templates – $27! |
Source
Vía Webdesigner Depot http://ift.tt/1B8g3gC
Friday, December 5, 2014
16 places to get your photo books this holiday season
Perusing your digital photos are great, but sometimes you just want something a little more tangible, something you can hold in your hands. Of course you can turn to getting a bunch of prints at your local superstore or pharmacy, but then what do you do with all the prints? If you’re anything like me, you look through them twice and then shove them into a drawer to be forgotten.
Instead, why not get a bound photo book printed? There are tons of places online to get it done (many of the aforementioned superstores and pharmacies also provide this), some of which can even pull images directly from your Instagram or other online photo accounts. Some offer tons of options, while others offer much more limited ones (which is sometimes reflected in lower prices).
Here are 16 of the best online photo book services, one of which is almost sure to meet your needs (and your budget).
Snapfish
Snapfish offers photo books in a variety of sizes: 5×7, 8×8, 8×11, 12×12, and 11×14. They offer three different types of books: Premier, which can have up to 100 pages and has a lay-flat binding that’s perfect for two-page spreads; Custom, that has a lay-flat binding for up to 90 pages, or a perfect binding up to 150 pages; and Classic, which offers up to 150 pages in either stitched or perfect-bound format.
Pricing starts at $11.99 for a 5×7 book, or $59.99 for an 11×14 book. Their bestseller is the 8×11 book, starting at $24.99.
Blurb
Blurb offers photo books with five different paper options, including standard semi-matte 80# paper, matte 100# paper, and Proline Pearl Photo semi-gloss 140# paper. Their books also come in five sizes: small square 7×7, standard portrait 7.75×9.75, standard landscape 10×8, large square 12×12, and large landscape 13×11. They’re available as softcovers, imagewrap hardcovers, and dust jacketed hardcovers.
Small square books start at $34.99 with 20 pages, while the large landscape books start at $66.24. Quantity discounts are available if you’re purchasing more than 10 books at a time.
Montage
Montage offers photo books in three sizes: small 6×6, medium 8.5×8.5, and large 12×12. They offer “auto-magic” book designs that do your page layouts for you, and their books include up to 70 pages and 180 photos for a fixed price. Books are bound in eco-friendly leather from Italy, and each book has lay-flat pages.
Small books are just $39, medium books are $59, and large are $119.
Kolo
Kolo is an award-winning photo book company that offers a variety of sizes and formats. They offer a 5.5×8, 8.5×11, and 11×14 books, plus a smaller Noci photo book with 24 photos and a Vineyard book that holds just 6 photos. They use archival/acid-free paper, with 10, 20, 30, 40, or 50 sheets per book (unless otherwise specified).
Pricing starts at just $12 for the Vineyard photo book, $20 for the Noci, or $29 for a 20-sheet 5.5×8 photo book. The larger 11×14 starts at $69 for a standard 10-sheet photo book or $99 for a lay-flat version.
Mixbook
Mixbook offers a ton of pre-designed templates for photo books (as well as a blank version you can design yourself), in a range of sizes: 8×6, 8.5×8.5, 8.5×11, 11×8.5, 12×12, and 14×11. There are a variety of styles, too: softcover, hardcover, hardcover with dust jacket, leather with dust jacket, and lay-flat hardcovers. Each book includes 20 pages, with additional pages incurring extra charges.
A standard 8×6 softcover book starts at $12.99, with hardcover versions ranging from $29.99 to $39.99. The 14×11 hardcovers range from $64.99 to $74.99.
Picaboo
Picaboo offers photo books in five styles: premium mini books, classic, seamless lay-flat, “Madison” (handmade with custom covers), and flush mount. Mini books come in 5×5 and 5×4 inch sizes and come with 20 pages standard, though they can be expanded up to 60 total. Classic photo books come in five sizes: 8×6, 11×9, 14×11, 8×8, and 12×12 inch sizes. Lay-flat books come in 8×8, 11×9, 12×12, and 14×11 inch sizes. Madison books are only available in the 11×9″ size. Flush mount books come in either 11×9 or 14×11 inch sizes.
Premium mini books start at $19.99. Classic photo books start at $19.99 for a softcover or $29.99 for a hardcover 8×6, and go up to $24.99 for a softcover 11×9, or $64.99 for a hardcover 14×11. Seamless lay-flat books start at $64.99 for an 8×8 and go to $119.99 for a 14×11. The Madison books start at $199.99 for a 20-page version. The flush mount books start at $399.99 for an 11×9 or $499.99 for a 14×11, including 20 pages.
My Publisher
My Publisher offers four different photo book styles: 15×11.5″ deluxe hardcovers, 11.25×8.75″ classic hardcovers, 7.75×5.75″ pocketbooks, and a 3.5×2.75″ mini book. Cover options include a book jacket, photo finish, leather, or linen. Paper options include two different weights, as well as a matte or satin finish.
Deluxe hardcovers start at $59.99 for 20 pages, classic hardcovers are $29.99 for 20 pages, pocketbooks are $12.99 for 20 pages, and mini books are $2.99 for 20 pages.
Tinyprints
Tinyprints, from Shutterfly, lets you make custom or simple photo books with your Shutterfly photos. They have a variety of styles for your book pages, with custom path books including 1-25 photos per page (up to 1000 total), and simple path books including 1-4 photos per page (up to 500 total). Books come in a variety of sizes, including 5×7, 7×9, 8×8, 8×11, 10×10, 12×12, and 11×14.
Soft cover photo books start at $11.49 for a 5×7, up to $19.49 for a 10×10. Hardcover photo books start at $22.49 for an 8×8, and go up to $34.99 for an 11×14. Both softcover and hardcover books include 20 pages.
Artifact Uprising
Artifact Uprising offers premium hardcover and softcover photo books, and even includes Instagram-friendly books. They come in a variety of sizes: 5.5×5.5, 6×8 (portrait or landscape), 8.5×8.5, and 11×8.5 (portrait or landscape), and in both hardcover and softcover bindings. They’re printed on 100% recycled paper.
Pricing starts at $17.99 for a 5.5×5.5″ 40-page softcover book. Hardcover books start at $69 for 50 pages.
Pinhole Press
Pinhole Press offers photo books with matte or glossy paper, in softcover and hardcover, with a range of bindings. They also offer “Brag Books”, with pages that open accordion-style. They offer a range of sizes: 3.5×5 (Brag Books), 5.25×5.25, 6.75×6.75, 8.75×8.75, 9×6.625, 9.125×6, and 8.125×10.
Signature photo books start at $74.99, while softcover photo books start at $44.99. Brag Books are only $24.99.
Flickr
Flickr offers printed photo books that are easy to make using photos from your Flickr account. They offer fewer options than most other photo book companies: books have glossy hardcovers with matching glossy dust jackets, are 8.5×11 inches, and lustre paper. They include a minimum of 20 pages, and a maximum of 240. Creating a book is simple: just put the photos you want to use into an album and click “create”.
A 20-page book costs $34.95.
Apple
Apple offers a limited selection of printed photo books, including both hardcover and softcover version, in a range of sizes: 13×10, 11×8.5, 8×6, and 3.5×2.6. Creating books is easy, you just use iPhoto to lay out pictures by date, while favoring higher-rated photos. You can then customize your book with captions and titles, two-page spreads, and even add maps. Books come with 20 pages minimum, but can be up to 100 pages long.
A 3.5×2.6″ softcover book starts at $3.99, while the large 11×8.5″ softcover starts at $19.99. Hardcover books start at $29.99 for an 11×8.5″ or $49.99 for a 13×10″ version.
Artisan State
Artisan State offers 100% flush mount photo albums that are very affordable. They offer four styles: a “little black book”, hardcover book, leather cover book, and crystal clear cover book. They’re custom bound to meet your exact page length specifications. The pages are rigid, making them much more durable. There are a huge range of sizes, from 4×4 to 11×8 for the little black book.
Prices vary widely based on size, but the basic little black book starts at $20 for 20 pages, with hardcover photo books starting at $35 for a 16-page book.
Prinstagram
Printstagram offers photo books for your Instagram photos. You get a 38-page book bound with a hardcover. You can opt to put one photo per page and use 38 photos, or use many photos per page and use up to 319 images. You can opt to include the original captions if you’d like, too. Finished books are 7×8.5″.
Prinstagram photo books are $25.
Print Studio
Print Studio is the same company as Printstagram, but allows you to use your non-Instagram photos. The books are 7×8.5″, bound in hardback with a customizable cover, and include 38 pages. You can create a classic 38-image book with or without captions, or use their creative layout for up to 319 images.
Print Studio books are $25.
PastBook
PastBook lets you easily create photo books from a variety of social media and cloud accounts: Dropbox, Instagram, Flickr, Facebook, and more. You can also create collaborative photo books by inviting friends to add their images. Books are in landscape format, either 8.5×6″ or 12×8.5″, and are printed on 200 gram paper. There are two options for softcover books: up to 24 pages or up to 500 pages. Hardcover books can be created with up to 300 pages. There’s also a free iPhone app for creating your PastBooks. And they use environmentally-friendly papers and inks.
Pricing starts at $14 for a 24 page softcover book, and $45 for a hardcover book.
Conclusion
Considering how widely prices and options vary from company to company, be sure to do your homework and figure out exactly what you need prior to ordering your photo books.
| Luxurious Ambassador Plus Font Family – only $19! |
Source
Vía Webdesigner Depot http://ift.tt/1tYftMC