|
1 2 3 4 5 |
@font-face { font-family: 'YourFont'; src: url('yourfont.eot'); src: url('yourfont.eot?#iefix') format('embedded-opentype'), url('yourfont.woff') format('woff'), url('yourfont.ttf') format('truetype'), url('yourfont.otf') format('opentype'), url('yourfont.svg#YourFont') format('svg'); } |
These are added within a <style> section in the header. This works all nicely in most modern email clients, but Outlook does not load webfonts and falls back to Times New Roman, which might not always be desired.
|
1 2 3 |
[style*="YourFont"] { font-family: 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif !important } |
Add this to the header <style> section as well. This makes sure that in clients, that allow Webfonts, your font is actually being used.
|
1 2 3 4 5 6 7 |
<table> <tr> <td style="background:white;height:30px;font-family: Arial, 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;"> Some text! </td> </tr> </table> |
In the body of the email template, you assign your font-family styles for the text, but making sure that Arial is listed first.
Outlook will than use Arial for the text styling.
In modern clients this will be overwritten with the “style rule” above, which checks for YourFont and updates the font-family styling accordingly.
“Time Lapse Assembler allows you to create movies from a sequence of images. Provide it with a folder containing sequentially named JPEG images and it will produce a QuickTime compatible movie file for use in iMovie or other editing software.”
The new WOFF 2.0 webfont format is coming to chrome.
“The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases).”
http://www.fontsquirrel.com/tools/webfont-generator
http://everythingfonts.com/ttf-to-woff2
|
1 2 3 4 5 6 |
@font-face { font-family: MyFont; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); } |
Make sure that the viewbox, width and height are defined within the SVG.
Many older browsers misbehave, if those are defined in the image source tag only and not in the image file itself.
|
1 2 3 4 5 6 |
<svg version="1.1" id="mainLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 180.7 166.9" width="230" height="212" enable-background="new 0 0 180.7 166.9" xml:space="preserve"> .... </svg> |
When doing flexible layouts, there is no way around using relative sizes, so that fonts and elements resize accordingly.
If not set differently, 1 em equals 16 Pixel in most browsers, which gives us a calculation basis.
So 1/16 = 0,0625 is our calculation factor.
|
1 2 3 4 5 |
PX EM 1 = 0,0625 12 * 0,0625 = 0,75 48 * 0,0625 = 3 250 * 0,0625 = 15,625 |
The difference between EM and REM is the inheritance.
The REM value is calculated in reference to the root element, the font size of the HTML, not the BODY, element.
The EM value is calculated in reference to its parent element.
Due to limited support in older browsers, you can use graceful degradation in your stylesheet to use both.
|
1 2 3 4 |
li a { font-size:20px; font-size:1.25rem; } |
The Pixel value must be added before the REM value !
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// before li{ border-right: 1px solid red; } li:last-child{ border-right: 0; } // after / compact li:not(:last-child) { border-right: 1px solid red; } |
When mapping shortcodes using vc_map, you can assign icons to your new Visual Composer element.
If you created a container element, that wraps around other elements, the child element icon will currently be overwritten with the parent icon. A fix is apparently on its way :)
Currently the only way is to skip the icon option completely and use pure CSS for that.
You can enqueue a CSSs file for the admin through a vc_map option “admin_enqueue_css“.
|
1 2 3 4 5 6 7 8 9 10 |
.wpb_vc_your_element > .wpb_element_wrapper > .wpb_element_title i, #vc_your_element i.vc_element-icon { background-position: 0 0; background-image: url(/path_to_images/vc_your_element.png)!important; -webkit-background-size: contain; -moz-background-size: contain; -ms-background-size: contain; -o-background-size: contain; background-size: contain; } |
The CSS targets the icon of the displayed element in the editor and the icon when adding new elements to the layout.
For all those that remember the After Dark™ Screensavers.
The animation is build purely in CSS. Author is Bryan Braun.
Many developers hesitate to call WordPress a PHP development platform. I know what I am talking about, as I developed a platform of my own. PHP platforms normally only provide a skeleton and we need to
With WordPress you get most of this out-of-the-box, with some predefined structures.
Having a flexible administration backend in place makes it easy to concentrate on the things that matter for a project, which is designing a frontend experience.
And especially with the JSON REST API finding its way into the core slowly, you are completely free when it comes to using the stored data in your frontend designs.
Sure that was possible before, just with some more work on our side ;)
But WordPress embracing the “freeing of data” through JSON, shows us where the ride is going.
There has not been a single project of mine in the past year, that has not used the REST API in some way. And all of this fits perfectly into the new single page app universe.
WordPress interfaces with your javascript framework setup (client side templating, DOM manipulation, data binding, routing …) and frees you from any design handcuffs.
It has become much easier and faster over the past 2 years to say “YES” to many of my clients wishes.
Its nice to finally see data flow from the server to the client and back that easily.
If you are not exited about this … I am :)
