http___www.kroativ.net_izdvojeno_kako-napraviti-magazin-style-dizajn_comment-page-1__1.xml
1.1 2.1 2.2 3.1 3.2 3.3 4.1 5.1 6.1 6.2 6.3 6.4 6.5 6.6 7.1 8.1 8.2 8.3 8.4 9.1 10.1 10.2 10.3 11.1 12.1 13.1 13.2 13.3 14.1 15.1 16.1 17.1 17.2 18.1 19.1 19.2 20.1 21.1 22.1 23.1 24.1 24.2 25.1 26.1 27.1 29.1 29.2 30.1 30.2 31.1 32.1 32.2 32.3 33.1 34.1 34.2 34.3 34.4 35.1 36.1 36.2 36.3 37.1 38.1 39.1 40.1 41.1 42.1 43.1 44.1 45.1 45.2 46.1 46.2 46.3 46.4 47.1 48.1 48.2 48.3 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 59.1 59.2 59.3 61.1 61.2 61.3 62.1 63.1 65.1 66.1 66.2 67.1 68.1 68.2 68.3 69.1 70.1 70.2 76.1 77.1 77.2 78.1 81.1 85.1 87.1 88.1 89.1 90.1 91.1 92.1 93.1 94.1 95.1 96.1 98.1 99.1 100.1 100.2 101.1 101.2 102.1 103.1 104.1 105.1 108.1 109.1 110.1 111.1 111.2 112.1 112.2 112.3 113.1 114.1 115.1 116.1 117.1 118.1 121.1 122.1 123.1 123.2 124.1 125.1 126.1 127.1 128.1 129.1 130.1 131.1 131.2 131.3 131.4 132.1 132.2 132.3 132.4 133.1 134.1 135.1 143.1 143.2 143.3 143.4 143.5 143.6 143.7 143.8 150.1 166.1 167.1 168.1 169.1 169.2 169.3 169.4 172.1 173.1 174.1 175.1 178.1 179.1 180.1 183.1 184.1 185.1 186.1 188.1 189.1 190.1 193.1 194.1 194.2 194.3 195.1 196.1 196.2 199.1 211.1 212.1 212.2 212.3 213.1 213.2 218.1 224.1 230.1 231.1 232.1 233.1 234.1 234.2 234.3 235.1 236.1 236.2 237.1 247.1 257.1 268.1 268.2 269.1 270.1 270.2 280.1 291.1 292.1 292.2 293.1 294.1 295.1 295.2 296.1 297.1 307.1 310.1 320.1 331.1 332.1 332.2 333.1 334.1 334.2 335.1 355.1 355.2 356.1 357.1 357.2 358.1 358.2 359.1 360.1 360.2 361.1 362.1 363.1 363.2 364.1 365.1 376.1 387.1 388.1 388.2 388.3 389.1 393.1 397.1 398.1 399.1 400.1 401.1 402.1 403.1 404.1 405.1 406.1 407.1 408.1 409.1 410.1 411.1 412.1 413.1 414.1 414.2 415.1 416.1 418.1 419.1 420.1 421.1 422.1 423.1 425.1 426.1 427.1 427.2 428.1 429.1 430.1 432.1 433.1 435.1 436.1 437.1 439.1 440.1 442.1 443.1 444.1 446.1 447.1 449.1 450.1 451.1 451.2 452.1 453.1 454.1 454.2 454.3 456.1 459.1 461.1 462.1 463.1 464.1 465.1 466.1 467.1 468.1 469.1 470.1 471.1 475.1 478.1 479.1 479.2 480.1 481.1 481.2 482.1 483.1 483.2 484.1 485.1 485.2 485.3 486.1 487.1 487.2 488.1
Building Responsive Email Templates with Ink Ink is a responsive HTML email framework by Zurb – the very awesome team that built Foundation. Ink tries to make it easy to build custom and responsive HTML emails that work on all devices. This article will take you through the fundamentals of Zurb’s Ink platform as well as covering some best practice email things. We’ll also build a large boilerplate to copy and paste code from. Be sure to check out the demo links or GitHub. The sad truth about email If you’ve never had the pleasure of building a custom HTML email template before, let me try to explain what it’s like. Imagine you were tasked with building a website. This website needs to work in Internet Explorer 6, 7, and 8. On top of that, each version has 10 other versions like it, but they are not quite the same. All of them have their own special quirks and rules. On top of this, you don’t have a nice Chrome Inspector or Firebug tool to debug with. Oh, and then you somehow have to figure how to make it responsive and use new cool tools. It’s like building a website for 50 different Internet Explorers, blindfolded. A lot of good front-end developers will refuse to do it. In a lot of cases, it’s assigned to junior devs to basically burn inexpensive hours on until the templates are hacked into completion. If you’re that poor soul, take a deep breath and relax, Ink has already fought this battle for you. This article will take you through core concepts of using Ink to successfully build cross-device and responsive custom HTML email templates. Step 1: Sync up with your designers This is an important step that’s not really part of the Official Ink Documentation. With all the cool new features of CSS3, designers can get away with pushing the boundaries of the web. Unfortunately with HTML emails, that’s not the case at all. Container size Zurb Ink has a fixed max-width of 580px for content. This size is optimal for all devices. This is done with “containers” (similar to Bootstrap and Foundation). For devices and screen sizes of 600px and below, the containers will fill 95% of the screen’s width to prevent bleeding over a screen’s edge. Responsive sizes Zurb Ink has only two media query break points – Desktop and Mobile. Mobile begins when the container is equal or less than 600px (when the container switches from a fixed width to a percentage width). If a designer is creating mobile templates as well, this doesn’t mean they should build templates for 600px wide. They should be building for the minimum sizes first (mobile-first approach). This will help prevent things like this from happening: I recommend having them build the mobile PSDs with a width of 320px to make sure they look best on iPhones and other small devices. Custom font’s won’t always work Using custom fonts will work real nice on a lot of new email devices, but, unfortunately, a lot of legacy email clients won’t load these fonts. There’s no work-around for this either. For typography, Ink uses this as their base: body, table.body, h1, h2, h3, h4, h5, h6, p, td { font-family: "Helvetica", "Arial", sans-serif; You can use your own websafe fonts as a base, but it’s important to note that not all web safe fonts will work either. MailChimp has an excellent design reference for typography. So in summary, you can use custom fonts, but expect a fallback to be used for a lot of devices. We’ll cover how to add custom fonts later in this article. Simple stacking for the responsive grid When Ink’s grid stacks while switching from desktop to mobile, it’s going to do so in a normal floating order. In Bootstrap and Foundation, you can reverse that stacking order. Unfortunately, since Ink’s grid system has no choice but to be built in tables, it’s not really possible to do that without extra markup. Key concepts Firstly, Ink’s Official Documentation is amazing. It covers everything in detail and more. I highly recommend spending an hour and reading it through. We’ll cover mostly everything in the docs and then some other helpful tips. Assume nothing works Email clients aren’t browsers. A lot of them only support the bare minimum of what’s required for HTML and CSS. On top of likely being buggy or incomplete, for security and other reasons, they strip out a lot of things. So there’s things you’ll want to just completely avoid for maximum cross-client support (some more obvious than others): - JavaScript - Iframes - Non-inline styles - The tag to manage layout - Forms Inline everything In order to get your styles to work on all clients, you’ll need to inline your styles. This doesn’t mean you have to do it during development, but before sending out the email you’ll need to do this. Fortunately, nobody does this by hand. There are plenty of resources to do this for you. On top of this, email services like MailChimp, Campaign Monitor, Mandrill, etc. usually have a service to do this for you. If it doesn’t, you can use this inliner by Zurb to automatically do it: Use tables for building the layout Everyone hates this now-a-days, but it’s a must for email clients. You should build your layouts with HTML Tables. This means a few things: - The tag won’t work and will likely be stripped out - Assume position: absolute;won’t work - Doing display: block;on a table probably won’t work - Using display: inline-block;won’t be consistent across clients If you follow Ink’s grid systems detailed below, you shouldn’t have to think about this all too much though. Specify all image sizes This is extremely important. You should specify all image sizes. For example: Ink has a reset on all images to ensure that their max-width never exceeds 100% (aka responsive images). Outlook doesn’t care though. If you don’t specify a size on an image, Outlook will be a mangled mess of overflowed craziness. If you want to support Retina images, you can just add an image that is twice the size of the specified image. Here’s an example: Use absolute URLs For referencing anything (images, links, etc.), you should always use an absolute URL. This might be more obvious to some, but it’s definitely worth noting. Sublime snippets If you’re developing with Sublime, there’s a nice Sublime Text 2 and 3 package for Zurb Ink snippets. There’s a lot of markup involved for tables and the grid systems Ink provides. I highly recommend checking this out to help save you time. Remove automatic format detection I personally love that a lot of clients, especially on mobile, automatically convert dates, phone numbers, and emails to links; however, there’s always that random use case where you might not want to have that happen. Here’s how you can stop it: Outlook conditionals Just like how you would specify Internet Explorer HTML conditional tags, you can do that for Outlook. The only thing that is super weird, you need to match the year to a specific version. Here’s some sample code snippets: h1 { color: red; } Not on Outlook Here’s a list matching Outlook version numbers to their year: - Outlook 2000 (version 9) - Outlook 2002 (version 10) - Outlook 2003 (version 11) - Outlook 2007 (version 12) - Outlook 2010 (version 14) - Outlook 2013 (version 15) Finally, Outlook wraps the entire email in a div (even the tag) called: ExternalClass { You can use this “super parent” class to also make Outlook specific style changes. Mobile styles and media queries Mobile styles can be frustrating to implement. As a result of inlining CSS, you need to add the !important declaration to all CSS properties. This makes a lot of sense if you think about it. For example, say you have: @media only screen and (max-width: 600px) { p.blue-on-mobile { color: blue; I'm red, I swear! If you’re on a device under 600px, the tag will still be red. This is because @media rules can’t be inline styles. So the inline styles take precedence over the normal CSS just like it would on a website. To override the inline styles, you must use the !important tag. So this example, the tag will now be blue on mobile: @media only screen and (max-width: 600px) { p.blue-on-mobile { color: blue !important; I'm red, I swear! Ink’s process Ink has five steps to follow to make sure you’re heading in the right direction. Here they are summarized: - Test in Outlook first (If it works in the Outlooks, it probably works everywhere else) - Add your responsive styles right above the closing tag - Bring your styles inline - Test your email with Litmus - Pray for hotness and send it out Testing and debugging Everyone will have their own method for this. I recommend building the emails in Chrome as you normally would with any other basic HTML page. This way you can visualize the desktop and mobile stuff as your building it out. You’ll also be able to use the inspector to get things buttoned-up. To debug, you should definitely be using Litmus. I can’t imagine taking an email project on without it. They have this testing service that will actually take a screenshot in every type of client possible. This is great for testing the Outlooks as well as mobile devices. The screenshots are even shareable so you can get approval from your manager or the client in case there’s any discrepancies. Boilerplate This is Ink’s official starter kit for building HTML email templates: #outlook a{padding:0}body{width:100%!important;min-width:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}. ExternalClass{width:100%}. ExternalClass,. ExternalClass div,. ExternalClass font,. ExternalClass p,. ExternalClass span,. ExternalClass td{line-height:100%}#backgroundTable{margin:0;padding:0;width:100%!important;line-height:100%!important}img{outline:0;text-decoration:none;-ms-interpolation-mode:bicubic;width:auto;max-width:100%;float:left;clear:both;display:block}center{width:100%;min-width:580px}a img{border:none}table{border-spacing:0;border-collapse:collapse}td{word-break:break-word;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;border-collapse:collapse!important}table,td,tr{padding:0;vertical-align:top;text-align:left}hr{color:#d9d9d9;background-color:#d9d9d9;height:1px;border:none}table.body{height:100%;width:100%}table.container{width:580px;margin:0 auto;text-align:inherit}table.row{padding:0;width:100%;position:relative}table.container table.row{display:block}td.wrapper{padding:10px 20px 0 0;position:relative}table.column,table.columns{margin:0 auto}table.column td,table.columns td{padding:0 0 10px}table.column td.sub-column,table.column td.sub-columns,table.columns td.sub-column,table.columns td.sub-columns{padding-right:10px}td.sub-column,td.sub-columns{min-width:0}table.container td.last,table.row td.last{padding-right:0}table.one{width:30px}table.two{width:80px}table.three{width:130px}table.four{width:180px}table.five{width:230px}table.six{width:280px}table.seven{width:330px}table.eight{width:380px}table.nine{width:430px}table.ten{width:480px}table.eleven{width:530px}table.twelve{width:580px}table.one center{min-width:30px}table.two center{min-width:80px}table.three center{min-width:130px}table.four center{min-width:180px}table.five center{min-width:230px}table.six center{min-width:280px}table.seven center{min-width:330px}table.eight center{min-width:380px}table.nine center{min-width:430px}table.ten center{min-width:480px}table.eleven center{min-width:530px}table.twelve center{min-width:580px}table.one .panel center{min-width:10px}table.two .panel center{min-width:60px}table.three .panel center{min-width:110px}table.four .panel center{min-width:160px}table.five .panel center{min-width:210px}table.six .panel center{min-width:260px}table.seven .panel center{min-width:310px}table.eight .panel center{min-width:360px}table.nine .panel center{min-width:410px}table.ten .panel center{min-width:460px}table.eleven .panel center{min-width:510px}table.twelve .panel center{min-width:560px}.body .column td.one,.body .columns td.one{width:8.333333%}.body .column td.two,.body .columns td.two{width:16.666666%}.body .column td.three,.body .columns td.three{width:25%}.body .column td.four,.body .columns td.four{width:33.333333%}.body .column td.five,.body .columns td.five{width:41.666666%}.body .column td.six,.body .columns td.six{width:50%}.body .column td.seven,.body .columns td.seven{width:58.333333%}.body .column td.eight,.body .columns td.eight{width:66.666666%}.body .column td.nine,.body .columns td.nine{width:75%}.body .column td.ten,.body .columns td.ten{width:83.333333%}.body .column td.eleven,.body .columns td.eleven{width:91.666666%}.body .column td.twelve,.body .columns td.twelve{width:100%}td.offset-by-one{padding-left:50px}td.offset-by-two{padding-left:100px}td.offset-by-three{padding-left:150px}td.offset-by-four{padding-left:200px}td.offset-by-five{padding-left:250px}td.offset-by-six{padding-left:300px}td.offset-by-seven{padding-left:350px}td.offset-by-eight{padding-left:400px}td.offset-by-nine{padding-left:450px}td.offset-by-ten{padding-left:500px}td.offset-by-eleven{padding-left:550px}td.expander{visibility:hidden;width:0;padding:0!important}table.column .text-pad,table.columns .text-pad{padding-left:10px;padding-right:10px}table.column .left-text-pad,table.column .text-pad-left,table.columns .left-text-pad,table.columns .text-pad-left{padding-left:10px}table.column .right-text-pad,table.column .text-pad-right,table.columns .right-text-pad,table.columns .text-pad-right{padding-right:10px}.block-grid{width:100%;max-width:580px}.block-grid td{display:inline-block;padding:10px}.two-up td{width:270px}.three-up td{width:173px}.four-up td{width:125px}.five-up td{width:96px}.six-up td{width:76px}.seven-up td{width:62px}.eight-up td{width:52px}h1.center,h2.center,h3.center,h4.center,h5.center,h6.center,p.center,table.center,td.center{text-align:center}span.center{display:block;width:100%;text-align:center}img.center{margin:0 auto;float:none}.hide-for-desktop,.show-for-small{display:none;width:0;mso-hide:all;overflow:hidden}.hide-for-desktop *,.show-for-small *{mso-hide:all}body,h1,h2,h3,h4,h5,h6,p,table.body,td{color:#222;font-family:Helvetica,Arial,sans-serif;font-weight:400;padding:0;margin:0;text-align:left;line-height:1.3}h1,h2,h3,h4,h5,h6{word-break:normal}h1{font-size:40px}h2{font-size:36px}h3{font-size:32px}h4{font-size:28px}h5{font-size:24px}h6{font-size:20px}body,p,table.body,td{font-size:14px;line-height:19px}p.lead,p.lede,p.leed{font-size:18px;line-height:21px}p{margin-bottom:10px}small{font-size:10px}a{color:#2ba6cb;text-decoration:none}a:active,a:hover{color:#2795b6!important}a:visited{color:#2ba6cb!important}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#2ba6cb}h1 a:active,h1 a:visited,h2 a:active,h2 a:visited,h3 a:active,h3 a:visited,h4 a:active,h4 a:visited,h5 a:active,h5 a:visited,h6 a:active,h6 a:visited{color:#2ba6cb!important}.panel{background:#f2f2f2;border:1px solid #d9d9d9;padding:10px!important}.sub-grid table{width:100%}.sub-grid td.sub-columns{padding-bottom:0}table.button,table.large-button,table.medium-button,table.small-button,table.tiny-button{width:100%;overflow:hidden}table.button td,table.large-button td,table.medium-button td,table.small-button td,table.tiny-button td{display:block;width:auto!important;text-align:center;background:#2ba6cb;border:1px solid #2284a1;color:#fff;padding:8px 0;line-height:initial!important}table.tiny-button td{padding:5px 0}table.small-button td{padding:8px 0}table.medium-button td{padding:12px 0}table.large-button td{padding:21px 0}table.button td a,table.large-button td a,table.medium-button td a,table.small-button td a,table.tiny-button td a{font-weight:700;text-decoration:none;font-family:Helvetica,Arial,sans-serif;color:#fff;font-size:16px;display:block;height:100%;width:100%}table.tiny-button td a{font-size:12px;font-weight:400}table.small-button td a{font-size:16px}table.medium-button td a{font-size:20px}table.large-button td a{font-size:24px}table.button:active td,table.button:hover td,table.button:visited td{background:#2795b6!important}table.button:active td a,table.button:hover td a,table.button:visited td a{color:#fff!important}table.button:hover td,table.large-button:hover td,table.medium-button:hover td,table.small-button:hover td,table.tiny-button:hover td{background:#2795b6!important}table.button td a:visited,table.button:active td a,table.button:hover td a,table.large-button td a:visited,table.large-button:active td a,table.large-button:hover td a,table.medium-button td a:visited,table.medium-button:active td a,table.medium-button:hover td a,table.small-button td a:visited,table.small-button:active td a,table.small-button:hover td a,table.tiny-button td a:visited,table.tiny-button:active td a,table.tiny-button:hover td a{color:#fff!important}table.secondary td{background:#e9e9e9;border-color:#d0d0d0;color:#555}table.secondary td a{color:#555}table.secondary:hover td{background:#d0d0d0!important;color:#555}table.secondary td a:visited,table.secondary:active td a,table.secondary:hover td a{color:#555!important}table.success td{background:#5da423;border-color:#457a1a}table.success:hover td{background:#457a1a!important}table.alert td{background:#c60f13;border-color:#970b0e}table.alert:hover td{background:#970b0e!important}table.radius td{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}table.round td{-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px}body.outlook p{display:inline!important}@media only screen and (max-width:600px){table[class=body] img{max-width:auto!important;max-height:auto!important}table[class=body] center{min-width:0!important}table[class=body] .container{width:95%!important}table[class=body] .row{width:100%!important;display:block!important}table[class=body] .wrapper{display:block!important;padding-right:0!important}table[class=body] .column,table[class=body] .columns{table-layout:fixed!important;float:none!important;width:100%!important;padding-right:0!important;padding-left:0!important;display:block!important}table[class=body] .wrapper.first .column,table[class=body] .wrapper.first .columns{display:table!important}table[class=body] table.column td,table[class=body] table.columns td{width:100%!important}table[class=body] .column td.one,table[class=body] .columns td.one{width:8.333333%!important}table[class=body] .column td.two,table[class=body] .columns td.two{width:16.666666%!important}table[class=body] .column td.three,table[class=body] .columns td.three{width:25%!important}table[class=body] .column td.four,table[class=body] .columns td.four{width:33.333333%!important}table[class=body] .column td.five,table[class=body] .columns td.five{width:41.666666%!important}table[class=body] .column td.six,table[class=body] .columns td.six{width:50%!important}table[class=body] .column td.seven,table[class=body] .columns td.seven{width:58.333333%!important}table[class=body] .column td.eight,table[class=body] .columns td.eight{width:66.666666%!important}table[class=body] .column td.nine,table[class=body] .columns td.nine{width:75%!important}table[class=body] .column td.ten,table[class=body] .columns td.ten{width:83.333333%!important}table[class=body] .column td.eleven,table[class=body] .columns td.eleven{width:91.666666%!important}table[class=body] .column td.twelve,table[class=body] .columns td.twelve{width:100%!important}table[class=body] td.offset-by-eight,table[class=body] td.offset-by-eleven,table[class=body] td.offset-by-five,table[class=body] td.offset-by-four,table[class=body] td.offset-by-nine,table[class=body] td.offset-by-one,table[class=body] td.offset-by-seven,table[class=body] td.offset-by-six,table[class=body] td.offset-by-ten,table[class=body] td.offset-by-three,table[class=body] td.offset-by-two{padding-left:0!important}table[class=body] table.columns td.expander{width:1px!important}table[class=body] .right-text-pad,table[class=body] .text-pad-right{padding-left:10px!important}table[class=body] .left-text-pad,table[class=body] .text-pad-left{padding-right:10px!important}table[class=body] .hide-for-small,table[class=body] .show-for-desktop{display:none!important}table[class=body] .hide-for-desktop,table[class=body] .show-for-small{display:block!important;width:auto!important;overflow:visible!important}} @media only screen and (max-width: 600px) { Adding custom fonts To add custom fonts for maximum cross-client support, you should use @import inline. Following this, you’ll want to specify the font-family more specific then you normally would. You should assume fonts won’t be inherited. On top of that, the Ink framework is very specific on font-familys. Below is an example of how to add custom fonts as well as some simple utility classes for them. * Name: Unica One * Code: font-family: 'Unica One', cursive; * Use: Headings * Sizes: 400 * Name: Volkhorn * Code: font-family: 'Vollkorn', serif; * Use: body, paragraphs, etc @import url(https://fonts.googleapis.com/css?family=Unica+One|Vollkorn:400italic,700italic,400,700); body, table.body, p, td, .is-vollkorn { font-family: 'Vollkorn', serif; font-weight: 400; h1, h2, h3, h4, h5, h6, .is-unica-one { font-family: 'Unica One', cursive; font-weight: 400; Add a preheader Some email clients, like Gmail, will preview the first text that exists after the body tag. This is really great except when your email template has text that isn’t relevant to the content beforehand. The most common hiccup are when templates that have a “View in Browser” button in the header or something. To guarentee you have a solid text preview, you can add a preheader immediately following the tag. Here’s what it will look like: This is my preview text that will show up on email clients! Default grid You’ll probably use the default grid the most. Since the grid is built with tables with cross-client in mind, there’s a ton of markup to do seemingly simple things. At first it might seem exhausting, but it will save you a lot of time in the future if you’re buttoned-up about it. So let’s break it down. Here it is with fake-markup to help visualize the steps: Left content here! Right content here! Immediately you’ll see that and elements are basically redundant, but necessary when the tables code is added. The tag doesn’t have anything in it and is purposefully emtpy. This forces the parent column to go full width on smaller devices. So it’s necessary for the responsive component to stack. You’ll also notice the class .last is applied to the last wrapper. This is super important to make sure gutters are working correctly with your grid. Finally, here is that same code with real markup: Left content here! Right content here! It’s a lot of markup. The Sublime Text snippets will save you massive amounts of time. You can also offset columns by doing .offset-by-{number of columns} on the wrapper class. Here’s an example how: Right content here! Sub-Grid (nested columns) You can also place a columns inside of other columns. This is actually a beautiful thing because sub-grid columns will stack full-width on mobile. To do this, all you need to do is add a class .sub-columns to the where your content will be going. You’ll also have to add a .last class to the final column. Here’s a snippet showing how: .three.sub-columnds .nine.sub-columns Right content here! Block-Grid I really didn’t get the purpose of this at first, but the Block-Grid is actually very useful in some cases. Think of the Block-Grid as a way to do floats in an organized way or something similar to display: inline-block on a bunch of divs. This definitely has some benefits to it, but it shouldn’t be used as your main templating grid in most cases. You’ll see in their docs and from the demo that the grid doesn’t always line-up. Here’s a sample of it: You’ll notice the side-by-side commented code. You need to eliminate space between the elements because they’re display: inline-block;. This is nothing special to Ink because a row of inline-block elements create spaces between them. Check out Fighting the Space Between Inline Block Elements by Chris Coyier if you’re curious to why this happens. Full-width rows Sometimes you’ll want to a full-width row. These are good for your headers and footers, but it can even be used in the main content area if you want. A quick trick to get these working is to just take the default Grid and simply swap the .row and the .container classes. Here’s an example: .full-width-demo { background: rgb(25, 229, 144); I'm full width! Buttons Something as seaminly simple as creating a button is quite difficult to support in Outlook. Sizing just doesn’t work well. Fortunately, Ink provides a way to create buttons that not only look in all clients, but they are also responsive. Here’s some example button code: Success! For sizes, you have the following classes: .tiny-button .small-buttonor just .button .medium-button .large-button For colors, you have: .primary .secondary .alert .success For borders, you have: .radius .round Make sure the a tag is a block element The tag in the button by default isn’t display: block; by default. For better usability and easier clicking, you should add that custom style in. table.button td a, table.tiny-button td a, table.small-button td a, table.medium-button td a, table.large-button td a { display: block !important; Add a transition to them Even though most email clients won’t support this, you can add a transition to all buttons with the following code: table.button td, table.tiny-button td, table.small-button td, table.medium-button td, table.large-button td { -webkit-transition: all 225ms ease; -moz-transition: all 225ms ease; transition: all 225ms ease; Custom button colors You can extend the main .button class to create custom button colors. Here’s styles for Facebook, Twitter, and a Forward button: table.facebook td { background: #3971B6; border-color: #134b90; table.facebook:hover td { background: #134b90 !important; table.twitter td { background: #A0D6E2; border-color: #7ab0bc; table.twitter:hover td { background: #7ab0bc !important; table.forward td { background: #3D3D3A; border-color: #333; table.forward:hover td { background: #111 !important; Miscellaneous things Visibility classes Ink provides visibility classes for hiding and showing things on mobile. Here they are: Desktop Only Mobile Only Unfortunately, Outlook won’t support these classes at all. So if you want to support Outlook, you’ll have to use Conditional comments with utitlity classes. This seems crazy, but this is what you have to do: Mobile Only Desktop only Centering content To center content that is both displayed: inline or block, you should follow these three steps: - Add a class .centerto the parent - Add a tag around the element - Add a class of .centerto the element you want to center Here’s some example code: I'm centered text Panels Panels don’t really do much, and I think they are quick to confuse some. They’re not some extra functionality as much as a simple style utitlity class. Hopefully you’re noticing by now that all your content, regardless of the grid choice, will go inside of the final tag. This is always the case with Tables and with Ink. So, Panels in Ink is simply adding the class .panel to that final td to get some default styles. This is good for protyping and visualizing the grid, but it’s not a special componenet or anything. Conclusion That covers almost everything there is about Zurb Ink, responsive emails, and then some. Zurb Ink has been around for about 2 years now. Hopefully this guide will still prove useful to people who are just now diving into the framework. Make sure you check out our demo and GitHub page for this tutorial! If you have any questions or need support, feel free to make a comment – or even better, ping us in the forums. I’m pretty well versed with this now and should be able to help debug any issues or questions you have. I’ll end this with some links to awesome resources:
1.1 1.2 1.3 1.4 2.1 2.2 2.3 2.4 2.5 2.6 2.7 3.1 3.2 4.1 4.2 5.1 5.2 5.3 5.4 5.5 6.1 7.1 9.1 12.1 13.1 15.1 18.1 19.1 19.2 20.1 21.1 23.1 26.1 27.1 28.1 31.1 34.1 35.1 36.1 39.1 42.1 43.1 43.2 44.1 46.1 48.1 48.2 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 61.1 62.1 64.1 65.1 68.1 69.1 70.1 76.1 81.1 81.2 81.3 82.1 84.1 85.1 86.1 87.1 88.1 89.1 90.1 91.1 93.1 95.1 97.1 99.1 102.1 103.1 104.1 106.1 107.1 108.1 109.1 110.1 111.1 113.1 114.1 115.1 116.1 118.1 119.1 120.1 122.1 123.1 124.1 125.1 126.1 127.1 128.1 129.1 132.1 133.1 134.1 136.1 137.1 138.1 139.1 140.1 141.1 142.1 143.1 144.1 145.1 146.1 147.1 149.1 150.1 151.1 154.1 155.1 156.1 157.1 158.1 159.1 160.1 161.1 162.1 165.1 165.2 166.1 167.1 168.1 169.1 171.1 172.1 173.1 174.1 176.1 177.1 178.1 179.1 180.1 181.1 182.1 183.1 184.1 186.1 187.1 188.1 189.1 191.1 193.1 194.1 196.1 197.1 199.1 199.2 199.3 200.1 201.1 202.1 203.1 206.1 208.1 209.1 210.1 216.1 217.1 221.1 222.1 223.1 224.1 225.1 231.1 234.1 235.1 236.1 241.1 241.2 241.3 241.4 242.1 243.1 243.2 243.3 243.4 243.5 244.1 245.1 246.1 248.1 250.1 251.1 252.1 255.1 256.1 260.1 261.1 262.1 263.1 264.1 265.1 268.1 269.1 270.1 272.1 273.1 275.1 276.1 277.1 278.1 279.1 280.1 281.1 283.1 284.1 285.1 285.2 285.3 285.4 285.5 285.6 287.1 288.1 289.1 290.1 291.1 292.1 293.1 294.1 296.1 297.1 299.1 300.1 302.1 303.1 304.1 305.1 306.1 312.1 315.1 316.1 317.1 321.1 322.1 322.2 323.1 323.2 325.1 325.2 325.3 325.4 325.5 325.6 326.1 327.1 328.1 330.1 331.1 332.1 333.1 334.1 335.1 336.1 337.1 339.1 340.1 342.1 345.1 348.1 349.1 350.1 351.1 352.1 354.1 355.1 356.1 357.1 358.1 360.1 360.2 361.1 362.1 363.1 363.2 364.1 365.1 367.1 369.1 370.1 371.1 372.1 372.2 372.3 372.4
Dragi posjetitelji ovo je naš prvi veliki tutorial. Prvo pa muško rekli bi naši stari. Po toj uzrečici i mi ćemo probiti led sa kapitalcem. Upoznat ćemo vas sa CSS frameworks, naučit ćete kako koristiti jedan od njih i prateći ovaj tutorial napravit ćete super dizajn za magazin. CSS Frameworks su unaprijed napravljeni css kosturi. Fleksibilni su i praktički naprave više od polovice posla za vas. Cijela konstrukcija stranice je već napravljena i vi samo slažete kockice. Razmišljajte o njim kao o lego kockama no ipak je na kraju presudna vaša kreativnost. Nemojte sada pomisliti da ćete sa CSS frameworkom postići čuda. Oni su jednostavno alat kojem je cilj pomoći vam u procesu dizajniranja stranica. Odlični su jer imate gotov kostur, rade u svim browserima i jednostavno su rođeni za brzu produkcija. Sa druge strane problem nastaje ako želite izraditi malo kompleksniji dizajn, tada ćete ipak morati upregnuti moždane vijuge i baciti se na posao. Po mom mišljenju trebali bi gledati na njih kao i na svaki drugi alat, ponekad vam dobro dođe, a ponekad od njega nemate koristi… CSS frameworks-a ima stvarno puno i mi ćemo se ovdje fokusirati samo na jedan, po mišljenju autora najbolji. Pogledajte njegove specifikacije. Grid System je kao što ćete vidjeti vrlo jednostavan za korištenje, a dobiti su višestruke. Grid 960 radi na principu tokova klasa, međusobno povezanih u cjelinu. Imate dvije opcije na korištenje, verziju sa 12 i 16 kolumni. Glavni wrapper je uvijek širok 960px jer svi danas imaju barem 1024×768 rezoluciju. Pogledajte 960gs demo stranicu za grafički prikaz i bit će vam malo jasnije. Za lakše snalaženje napravili smo vam i tablicu sa veličinama layera i njihove pripadajuće klase, ostalo ćete naučiti tokom tutoriala. Pogledajmo kako to izgleda u stvarnosti: 940px - header 700px - sadržaj 220px - sidebar 940px - footer Samo imajte na umu da vam zbroj brojeva klasa (grix_XX + grid_XX = 12) uvijek mora biti 12 i to je to, imate savršenu strukturu. Za kraj samo da napomenemo, veličina kompresirane css datoteke je samo 4kb! Sada krenimo na malo konkretnije stvari… Skinite 960gs CSS framework, napravite novu stranicu i uključite css datoteke iz grid 960 paketa. Ok, započnimo sa izradom kostura za naš magazin 940px - Dobrodošli poruka 220px - Datum 460px - Logo 220px - Search Forma 940px - Navigacija 300px - Vijesti 300px - Centralni projekti 300px - Sidebar 940px - Footer Ako imamo dva ili više layera u jednom redu onda prvom moramo dodati klasu alpha, a zadnjem omega Dobro, kostur smo napravili i sada možemo kreirati naš CSS, on se nalazi u source datoteci koju ste skinuli, folder css i pod imenom moj_style.css. Podijelili smo CSS na segmente za lakše snalaženje. Krenimo redom, prvo ćemo dodati dobrodošli (.naslov_ad) poruku u header. Dobrodošli na stranice kroativ magazina • Svakodnevno služimo svježi sadržaj iz područja web dizajna Klasi grid_12 dodali smo klasu light_bg_color za pozadinsku boju i dodali smo stil za donji border style=”border-bottom:1px dotted #ccc”. Mogli smo koristiti i klase za bordere no imamo 2 različita bordera koji se ne mijenjaju. Pogledajmo css koji smo koristili za dobrodošli header dio: .naslov_ad { font-family: "Gill Sans", Verdana; font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: 2px; font-weight: normal; text-align:center; margin:5px auto; .light_bg_color { background-color:#f8f4e8; Krenimo na datum, logo i formu za pretraživanje. Ovdje smo koristili 3 horizontalno poredana layera te kao što smo već i rekli, prvom moramo dodati klasu alpha, a posljednjem klasu omega. Danas, document.write(cijeli_datum); Danas,   Poslužujemo samo kroativnost Pretraživanje Klasi grid_3 (datum – lijeva strana) dodali smo klasu alpha, grid_6 (logo) je u centru i onda dolazi grid_3 (forma – desna strana) sa dodatnom klasom omega. U sourcu našeg tutoriala imate i PSD file za logo. Logo je veličine 460x128px. Za prikaz datuma uzeli smo ovaj JavaScript i prilagodili ga za prikaz hrvatskog vremena. var dani = new Array("Nedjelja","Ponedjeljak","Utorak","Srijeda","Četvrtak","Petak","Subota"); var mjeseci = new Array("Siječanj","Veljača","Ožujak","Travanj","Svibanj","Lipanj","Srpanj","Kolovoz","Rujan","Listopad","Studeni","Prosinac"); var vrijeme = new Date(); //vrati trenutno vrijeme var dan = vrijeme.getDay(); //izvuci dan u tjednu var datum = vrijeme.getDate(); //izvuci dan u mjesecu var mjesec = vrijeme.getMonth(); //izvuci ime mjeseca var godina = vrijeme.getYear(); //izvuci godinu if (godina < 1000) godina+= 1900; //fix Y2K problem if (godina == 101) godina = 2001; //fix Netscape browsers - pokazuje godinu kao 101! var cijeli_datum = dani[dan] + ", " + datum + " " + mjeseci[mjesec] + ", " + godina; //spoji sve i ispiši datum Skriptu pozivamo na sljedeći način: document.write(cijeli_datum); CSS stilovi koje smo koristili za datum, logo i pretragu: font-family:"Gill Sans", Arial, Sans, serif; font-size:10px; font-weight:bold; letter-spacing:2px; text-transform:uppercase; margin:0; .datum { font-family: Georgia, "Times New Roman", serif; font-size: 10px; line-height: 18px; text-align:center; margin:40px 10px 0 auto; width:200px; .datum em { font-family: "Gill Sans", Verdana; font-size: 10px; letter-spacing:2px; font-style:normal; text-transform:uppercase; margin:0; padding:0; #searchf { text-align:center; margin-top:35px; .search_box { width:150px; height:16px; font-size:10px; color:#e43a3a; padding:0 16px 0 0; margin-top:5px; background:url(../images/srch.gif) no-repeat right 1px; border-top:1px solid #999; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-left:1px solid #999; Nekih posebnih napomena nema, ovo su praktički osnove CSS-a no da se lakše snađete sada znate koje su klase korištene. Sada dolazimo do navigacije. Navigaciju smo napravili kao horizontalno poredanu listu. Članci O Nama Download Autori Kontakt Suradnja Izdvojeno Linkovi Sponzori Opet smo dodali klasu light_bg_color za malo boje i dodali smo ID navigacija. Prvom LI elementu dodali smo klasu .no_border da bi maknuli lijevi border. javascript:void(null); je samo fancy način stavljanja praznih linkova, bolja zamjena za #. Pogledajmo css za navigaciju: #navigacija { padding: 5px 0; border-top:1px dotted #ccc; #navigacija ul { list-style: none; display: block; margin: 0 auto; #navigacija ul li { float: left; margin: 0; font: bold 12px Georgia; color:#e43a3a; text-transform:uppercase; border-left:1px dotted #ccc; width:102px; text-align:center; #navigacija ul li a:link, #navigacija ul li a:visited { color:#e43a3a; text-decoration:none; border-bottom:2px solid #f8f4e8; #navigacija ul li a:hover, #navigacija ul li a:active { text-decoration:underline; border-bottom:2px solid #000; #navigacija ul li.no_border { border-left:medium none; Ovdje je u principu sve jasno, UL (unordered list) elementu maknuli smo stilove, definirali prikaz i margine. LI elementu dodali smo lijevi border, veličinu od 104px i lijevi float. Klasičan CSS horizontal list menu. Sa navigacijom smo završili header i on sada izgleda ovako: Gotov header sa pripadajućim 960gs klasama Centralni Sadržaj Sadržaj je dosta velik pa ćemo ovdje proći samo njegov kostur i neke dijelove, a cijelu working verziju možete pogledati u DEMU ili u sourcu kojeg ste skinuli. Vijesti Naslov Vijesti Autor i Datum Sadržaj vijesti Naslov Izdvojenih Vijesti Sadržaj izdvojenih vijesti Naš RSS feed Tekst i link na RSS sa pozadinskom RSS ikonom Izdvojeno Izdvojeni tekst Naš  Flick r   stream Linkovi Link Link Link grid_12 klasi wrappera našeg centralnog sadržaja dodali smo klasu center_bgimage koja sadrži pozadinsku sliku i top/bottom bordere. Iz razloga što nam se sadržaj neravnomjerno širi po dužini u tri kolone i zato što imamo statičnu širinu dodali smo ovdje pozadinsku sliku. Jednostavan gif (images/bg.gif u sourcu) sa drugom pozadinskom bojom i borderima centralne kolumne. Na taj način smo izbjegli komplikacije sa ravnomjernim širenjem svih triju kolumni. Lijevi Sidebar Između linija 3 i 10 nalazi se naša lijeva kolumna odnosno vijesti. Naslov  koristimo za glavne naslove kategorija. Koristimo   sa stiliziranim tekstom i 3px donjim borderom. Sve vijesti spremamo u klasu vijesti (od 5. do 9. linije) i ponavljamo koliko god vijesti imamo. Klasa post_meta sadrži ime autora i datum objave,   sadrži naslov vijesti sa linkom na cijeli tekst ako je to potrebno. Lijeva kolumna Pogledajmo kako nam izgleda css za lijevi kolumnu: h4 a:link, h4 a:visited { text-decoration: none; h4 a:hover, h4 a:active { color: #e43a3a; text-decoration: none; font-size:16px; margin-bottom:5px; font-family:"Gill Sans", Arial, Sans, serif; font-size:10px; font-weight:bold; letter-spacing:2px; text-transform:uppercase; margin:0; border-bottom:3px solid #ccc; margin:5px 0; padding:0 0 5px 0; .vijest { margin:10px 0 20px 0; .post_meta { font-family: Georgia, "Times New Roman", serif; font-size: 10px; line-height: 22px; text-transform: uppercase; letter-spacing: 2px; color:#e43a3a; Kolumna Centar Centar smo namijenili za izdvojene stvari koje želimo naglasiti i držati u centru pažnje. Pozadinskom slikom bg.gif izdvojili smo tu kolumnu te je ujedno i naglasili. Sve centralne vijesti stavljamo u klasu pade_ten koja ima 10px paddinga sa svake strane (od 13. do 17. linije). Male slike moraju biti široke 276px, a visina nije bitna. Stavljamo ih unutar klase sample_pic koja daje border i padding te pozadinsku boju. Za naslov opet koristimo klasu post_meta i ispod nje dolazi sadržaj vijesti. Umjesto standardnog linka saznajte više uključili smo sliku strelice (images/more.gif) Sadržaj centralne kolumne Pogledajmo CSS stilove za centralnu kolumnu: .sample_pic { background:#fff none repeat scroll 0 0; border:1px solid #cecfc6; display:block; margin:0 0 5px 0; padding:1px; .pade_ten { padding:10px; Desni Sidebar U desnu kolumnu smjestili smo link za RSS kanal, izdvojeni/uvod tekst, Flickr stream i linkove. Naš RSS feed Tekst i link na RSS sa pozadinskom RSS ikonom Izdvojeno Izdvojeni tekst Naš  Flick r   stream Linkovi Link Link Link Sadržaj desne kolumne Opet koristimo   tag za naslove, napravili smo klasu rss koja sadrži RSS pozadinsku sliku i stilski uklopljen broj pretplačenih korisnika. Ovu je izradila Maja Benčić za Smashing Magazin. Ako imate svoje radove na Flickr servisu možete ih uključiti na sljedeći način. Koristit ćemo njihov Flickr badge kod sa malo našeg formatiranja count=9 definira koliko slika želimo prikazati i user=29734147@N07 je ID našeg računa. Da bi saznali svoj id potrebno je otići na http://idgettr.com/ i upisati adresu vašeg streama. Naš je npr. http://www.flickr.com/photos/2bpxcom/. Na ovaj način možete prikazivati i grupe. Princip je isti samo morate promijeniti source=user&user=29734147@N07 u source=group&group=921758@N20. U tom slučaju svoj ID na http://idgettr.com/ tražite tako da upišete npr. http://www.flickr.com/groups/kroativ/ Pogledajmo CSS za desnu kolumnu: #flickr a:hover img { border:2px solid #A8AA99; #flickr a img { background:#FFFFFF none repeat scroll 0 0; border:2px solid #CECFC6; display:block; float:left; margin-bottom:10px; margin-left:10px; padding:3px; .flikr { margin-bottom:10px .flikr span span { .flikr span { .fix { clear:both; height:1px; margin:-1px 0 0; overflow:hidden; .rss { background:url(../images/rss_abeja_org.png) no-repeat 240px 0px; padding-left:10px; padding-right:60px; margin:10px 0; Za Flickr stream napravili smo hover efekt i ravnomjerni razmak, rss klasi dodali smo pozadinsku sliku. Ništa posebno, osnove CSS-a. Ovako nam sada izgleda cijeli sadržaj Footer Došli smo do kraja stranice odnosno footera. Za ovaj tutorial smo u njega stavili samo copyright informacije no vi po želji možete konstruirati i puno kompleksniji footer. Kako izgleda footer Pogledajmo html za footer: © 2008 Naš MAGAZIN, Sva prava pridržana • Ovaj tutorial i dizajn možete slobodno koristiti za sve vaše potrebe • Ako želite možete postaviti i link na  Kroativ Dodali smo klasu light_bg_color za pozadinsku boju, kreairali inline css border te smo cijeli sadržaj footera stavili u klasu pade_ten za 10px razmak na sve strane. Pogledajte kako izgledaju naše stranice ako to već niste učinili. Zaključak U ovom ste tutorijalu naučili što su to CSS frameworks i kako se njima koristiti. Izradili ste svoj magazin i naučili poneku stvar o CSS. Vjerujem da ste i vi sada uvidjeli koliku korist možete izvući iz ovih alata, opet napominjem da se ne bi trebali striktno i samo osloniti na CSS frameworks no u svakom slučaju dobro dođu. Ako želite pogledati i elastičnu verziju 960gs frameworka pogledajte ove stranice…