Framework7: An HTML framework for building iOS7 apps
Framework7is a fully featured HTML framework just for building hybrid (Phonegap) and web-based apps with a native iOS7 feel. It’s ultra lightweight while remaining flexible.
Full Featured HTML Framework For Building iOS7 Apps
Attention!
Framework7 is on early development stage, so many things may be changed and sorted in a short time.
Getting Started
Clone/download this repo
Start building your App from changing Kitchen Sink, or from a clean template fromdist/folder
Server
Because Framework7 uses Ajax for navigation between pages you will need a server. So to make it work you should put dist folder (or Kitchen Sink) on a server. Or, as an option, you may use Grunt's server. Just run:
$ grunt server
Kitchen Sink will be available onhttp://localhost:3000/kitchen-sink/
Dist - onhttp://localhost:3000/dist/
Kitchen Sink
Framework7' JS and CSS files in Kitchen Sink are temporary linked tobuild/to make development process easier on this stage. So to make it work you need to build Framework7 (see Build section) or to re-link JS and CSS files todist/folder.
Fluidityis a tiny bit of CSS (107 bytes total) that fixes the part of HTML that isn’t completely responsive. It makes changes to the way images, tables, iframes, preformatted text, and canvas elements, so that they’re completely responsive.
ThisCode Guide by @mdois a fantastic guide to create sustainable, flexible, and durable HTML and CSS. It includes guidelines for syntax, attribute orders, classes, comments, and more.
Embed Curl makes is easy to embed curl commands into your website, blog, or API documentation. Just place the script on the page, and any element with an embedcurl HTML class attribute will be replaced with a prettified version based on the element’s text.
Native Form Elements is a handy guide that shows you what every native HTML5 form element looks like in your current browser. It shows both active and disabled states, as well as the markup for each.
They say the devil is in the details, and nobody knows it better than WebStartToday. Business websites are its specialty and it comes prepared with an arsenal of over 1000 templates to match even the newest and eccentric fields and domains, from limo service to night clubs. Yes, websites for everyone, but that doesn’t mean this will kill originality. WebStartToday knows that in the near future everyone will have a website, and to this end it makes it possible to have different customization for the same template. That’s how the thousand templates multiply exponentially. All you need to do in the end is put your text instead of the dummy text and you’re done.
Cubender is another web builder focused on stores and business, but not exclusively. It’s very versatile and it combines the ease of use with thoroughness. Features include e-commerce, SEO optimization, mobile integration, Google Analytics and many more. The service is not free, but a demo is included. In 14 days you can test and build your website and then choose a package, which – considering the service quality – comes at a bargain, starting at $9.95 per month.
You’ve probably heard of Wix, as it’s been around for quite a while. It’s a balanced web builder, not too fancy and not too simple either, good for beginners in the sense that it makes suggestions based on the business domains you choose. Another nice aspect is that it doesn’t rush you to buy a package. With its free unlimited demo, you can take your time and build your site, and when you are ready, choose your plan.
What makes Webydo different from other web builders is its focus on the needs of designers. Since designers work with multiple clients, meaning they are creating multiple websites, Webydo has an awesome CMS that they can take advantage of. Designers can focus on the website and the design of it, while still give their clients control over elements of their choosing. This way, the clients will not interfere with the design and the designer can focus on the appearance. Standard DIY site builders do not always fit the needs of designers because they start to lose control of how the site looks. However with Webydo, there are no limiting templates – everything is fully customizable, making each website created on Webydo unique. Some tools used on the platform are grid generators, smart guides and snapping, layers window, text caption, form generators and more.
Webzai is one of the easiest to use and straightforward web builders. You can either use the templates or start from scratch and build everything yourself. The drag and drop menu allows you to modify anything in real time and contains everything a designer might need. SEO optimization and cloud hosting are included. Alongside the free package, there are three more premium options, priced at $6, $11, and $20 respectively.
Without registering, MadeFreshly takes you right in front of your virtual shelf, where you start adding your products. You’ve guessed it, it’s an online store web builder. For customization, it offers a few templates, not numerous but well done, and some of them are free. Without a premium plan your sales are pretty limited, i.e. one picture per product and only three pages per site, but the good news is that the plans are priced at $11.99, $19.99 and $34.99 respectively, and include promotion service, mobile support and Google Analytics, and, unlike many other web builders, you can actually have your own custom domain name.
Aircus is a revolutionary among revolutionaries. Unlike its other brethren, it is a neat and simple web builder, preferring mature and elegant designs without too much complication, and big letter fonts that are easy to read. That doesn’t make it unprofessional – style is its forte, but not for the over-sophisticated. If you want a site built right now and don’t have the time to go through thousands of templates, you might wanna take a look at Aircus. And since it started on the vibe of quickness, why not be revolutionary all the way and be available from any phone or tablet? That’s right, with Aircus you can build your site in a few easy steps no matter where you are.
uCoz website builder is a reliable SaaS (software as a service) platform offering the best cloud hosting solutions. It’s not just a site constructor, but it’s a powerful infrastructure enabling you to create, maintain, publish and optimize your website easily.
uCoz is loved for its beneficial free package. Some of the features you can get on this constructor for free are as follows:
Unlimited traffic.
Extended statistics.
User group management.
Knowledgeable, timely technical support.
Ability to attach your own domain name.
Custom email and many more.
uCoz is an absolutely risk-free platform: you can explore its feature set as long as you need without any fees. But once you feel you’re ready to build your website – you may opt for one of their paid subscriptions (starting with $3.09).
Kopage is a quick, complete and user friendly service with a lot of elements available ranging from slideshows to videos and galleries, even HTML.But what’s really convenient about it is that you can have it installed automatically in Cpanel. If your hosting service doesn’t have the option yet, you can always ask them to do it for you. Kopage is completely free for usual users, charging only the hosting companies.
The best way to understand any process is to carry it out yourself, from the ground up. Today, we're going to do just that with email design, by building an HTML email template from scratch.
Kick Things Off
To begin with, it's worth mentioning where I pulled some of the resources from.
With that sorted, we can commence building the rest of the structure.
Creating the Body and Main Table
First, we’ll add an overall structure for our email, starting with a <body> tag. We'll set the margin and padding on the body tag to zero to avoid any unexpected space.
We'll also add a table with a width of 100%. This acts as a true body tag for our email, because styling of the body tag isn’t fully supported. If you wanted to add a background color to the ‘body’ of your email, you’d need to apply it to this big table instead.
Set your cellpadding and cellspacing to zero to avoid any unexpected space in the table.
Note: We’re going to leave border="1" on all of our tables, so that we can see the skeleton of our layout as we go. We’ll remove them at the end with a simple Find & Replace.
If an attribute exists in HTML, use that instead of CSS
Now place a centered table of 600 pixels wide inside the container table. 600 pixels is a safe maximum width for your emails to display comfortably within most desktop and webmail clients on most screen resolutions.
Set this width using HTML instead of CSS, by using the width attribute. The golden rule in HTML email development is: if an attribute exists in HTML, use that instead of CSS.
We’ll replace our little ‘Hello!’ greeting with this table:
We've also added an inline style property that sets the border-collapse property to collapse. If we don’t do this, newer versions of Outlook will add a small space between our table and our border.
Creating the Structure and Header
In our design we can see that the email is divided into three logical sections, so we'll create a row for each.
Let’s duplicate the single row we already made so that we have three in total. I’ve changed the text inside them so that we can easily identify each row.
Now we’ll color them according to the design. As bgcolor is a valid HTML attribute, we'll use that to set the background color instead of CSS. Always remember to use the full six characters of a hex code, as three character shorthand won’t always work.
Ok, next up we are going to focus on Row 1. We want to adjust the padding on the cell and then insert our image.
Using Padding
When using padding in email, you must always specify every single value (top, right, bottom and left) otherwise you can get unpredictable results. I find that you can still use the shorthand, i.e. padding: 10px 10px 8px 5px;, but if you are having trouble you may wish to write it out longform, i.e. padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.
If you are having even greater troubles with padding (for example, if your send platform is stripping out your CSS), don’t use it at all. Simply use empty cells to create space. There is no need to use spacer GIFs, just make sure you add style="line-height: 0; font-size: 0;" to the cell, place an inside and give it an explicit height or width. Here is an example:
Also note that it’s safe to use padding on TD tags but not on P tags or DIVs. They behave a lot more unpredictably.
So, we’ll use some inline CSS to add padding to the cell. Then we’ll insert our image, adding alt text and adding style="display:block;" which is a common fix that stops some email clients adding gaps underneath your images. We’ll center the image by adding align="center" to our td tag. We’ll also add an alt tag which is important for when our email is initially loaded which, in most cases, will be with images off.
Note: If the contents of your header are really important to your message, don’t use an image-only header. Remember, images are blocked by default for most clients, so if there is an aspect of your email that is crucial, never include it as an image. In this example, however, my header is pretty superfluous.
First off, we’ll add some padding to the middle cell so that the table inside has some space around it, as per our design.
Now we’ll add a table with three rows for our main content — one for the headline, one for the introductory text, and one for the row with two columns. We'll set the width of this table to 100% rather than using a pixel value because this will help us further down the track if we want to make our email responsive. If you always have pixel widths on everything, you can end up with a lot of values to override with media queries. If your nested table widths are based on percentages, then when you adjust the width of the parent element, everything will adapt accordingly.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td>
Row 3
</td>
</tr>
</table>
Now we are going to add our two columns of content to Row 3. Because we want a ‘margin’ in between these two cells, but margin isn’t supported, we’ll create a three-column table with an empty cell between the two outer columns.
As much as I like to stick to percentages, when you have content that is a specific size, it can be tricky to convert it to a percentage (in this example, the columns would be 48.1% which could become confusing). For this reason, since our two images are 260px wide, we’ll create columns that are also 260px wide, with a 20px margin cell in the middle. (This will total 540px, which is the 600px width of our table minus the padding of 30px on either side.) Be sure to zero your font-size and line-height and add a a non-breaking space character in the margin cell.
We'll also set the valign to "top" for both cells so that they will vertically align to the top, even if one column has more text than the other. The default vertical alignment is "middle".
Now let’s add our images and content to those columns. As we need multiple rows, we'll nest yet another table because we can’t use any colspan or rowspan tags. We’ll also add some padding in between the image and copy in each column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
</table>
Here we have set the width of the images using HTML at 100% of the column width. This, again, is so that if we make this email responsive, we only have to use media queries to change the width of the parent element. We'll have to override the height in pixels because using style="height: auto" now won’t work in everything (cough cough, Outlook). So we’ll set it using pixels. This means we'd have to set height: auto!important on those images using media queries to override the pixel value, but we could do that with a single class. As we set the width as a percentage, we won’t need to override that. The fewer things to override, the better.
We’ll create another little table for our social media icons. We’ll set its parent cell to align="right". Make sure you set border="0" on these image links (to avoid a blue link border) and don’t forget display:block.
Now we’ll add our text and add a width to our cells, just to be safe, even though there is a lot of whitespace between them. We'll set this cell to 75% and the other to 25%.
1
2
3
4
<tdwidth="75%">
® Someone, somewhere 2013<br/>
Unsubscribe to this newsletter instantly
</td>
And there we have it! Our layout is complete.
Validation
Let's run this through the W3C Validator to make sure nothing is bad or broken. If you’ve followed along exactly, it will say that it has passed.
Next we’re going to run a test through Litmus to make sure the structure of our email works great. Here’s a summary of my test:
Next we need to style the footer text, and we’ll also tidy up our unsubscribe link. We'll style our unsubscribe text link using both CSS and the HTML <font> tag. This doubling up is the best way to ensure that your links never show up in the default blue.
<ahref="#"style="color: #ffffff;"><fontcolor="#ffffff">Unsubscribe</font></a> to this newsletter instantly
</td>
And there we have it! Everything is in. Time to turn off the borders and see it looking beautiful. Go through and replace every occurance of border="1" with border="0".
At this point, it’s looking a little sad floating in white space, so let’s go up to our first 600px wide table and add:
1
style="border: 1px solid #cccccc;"
Now it doesn’t look like it’s floating anymore. As a final touch, I’m going to add 30px of padding to the bottom of the very first cell, to prevent our email from stopping abruptly at the bottom in some webmail clients (like Apple Mail), and 10px of padding at the top, so that our blue header has a little bit of breathing room.