I’m of the firm belief that the rap song describing what just happened in the film you watched — think Men in Black or Deep Blue Sea — is one of humanity’s greatest artforms. But you can’t just take that formula and apply it willy-nilly, as Moto showed this week. The company decided, in the year 2017, to release a one-minute rap video describing its 44-year corporate history. The results are... awkward.

The song was released to celebrate the anniversary of the world’s first call from a mobile phone, made on April 3rd, 1973, by Motorola engineers. The company also invented the phone on which the call was made, an impressive slice of tech history that’s described — and diminished — in a song that rhymes “cellphone” with “cellphone.”

It...

Continue reading…

Read more

Copper Hill Theme for YOOtheme Pro

This April we've got a tasty treat for you. Our new theme for Joomla and WordPress Copper Hill presents restaurants or any other business in an open, generous layout. It comes with new YOOtheme Pro features, like an enhanced Description List element and a completely overhauled Offcanvas and Modal navigation. Fixed image sections and playful background illustrations mix up the light layout.


Copper Hill Style

As usual, this month's release comes with its own style. It is light and without much embellishment. However, the monospaced typewriter font, copper color and detailed divider icon add a rustic feel, which is why the style fits perfectly for the kind of countryside restaurant theme that we chose for this one. Handmade background illustrations amplify this impression and give the theme an individual touch. The vector images are provided with the theme, so that you can use them yourselves without any restrictions.

Style

Better Offcanvas and Leader

One of the new features that come with Copper Hill is the overhauled Offcanvas menu. Social icons and modules/widgets that are assigned to the header position will be displayed next to the menu toggle. The Offcanvas itself now works smoothly and offers a number of different layouts, for example a vertically centered navigation. You can also apply a primary style to the menu that uses a larger font size. In addition to that, the Offcanvas bar now adapts its width according to viewport size.

Offcanvas

We also reworked the Description List element, which now features an optional leader style. In Copper Hill it connects the term and description of each item with a dotted line. This is typical for restaurant menu style price lists.

Leader

Layouts & Topic

Copper Hill features six beautiful layouts dedicated to the gastronomy topic. The Home page briefly introduces visitors to the restaurant, its chef as well as the menu and provides contact details. The phone number for reservations, links to social media and reviews can be accessed directly inside the headerbar where the Offcanvas menu toggle leaves plenty of space. Our Story narrates the place's history with a mixture of text and expressive imagery inside grids. The Lunch page presents daily changing lunch menus and their pricing, while the Dinner page displays the full menu inside the freshly revised Description List element with an image for each course. Visitors can find more pictures of the restaurant on the Gallery page. It shows images with overlays inside a gallery grid. There is also an Instagram feed for more direct impressions. Finally, the Contact page provides details regarding the location – including a Google map –, opening hours as well as a phone number to book tables.

Frontpage
Lunch
Dinner
Our Story
Gallery
Contact

What's next?

This theme comes together with the latest YOOtheme Pro release 1.5. Tomorrow we will post a comprehensive article presenting the many new features, but want to mention some that can be found in Copper Hill. As mentioned before, the Description List element has received a revision and comes with a new meta field and additional settings. We've added a bunch of new header layouts for the Offcanvas and Modal modes and updated a lot of their options. Every element now has a custom CSS field, so that you can easily apply modifications without having to touch template files.

More about all this in our upcoming blog post on YOOtheme Pro 1.5. Until then have fun exploring our theme Copper Hill and feel free to give us your feedback in the comments below.

  • Beautiful Copper Hill style
  • 6 page layouts
  • Great for business websites
  • Restaurant topic
  • 47 lovingly curated and free-to-use images
  • All these features are available in YOOtheme Pro

Joomla DemoWordPress Demo

jQuery(function($) { var gifs = $('img.gif'), scrolled=false; $(document).on('scroll', function() { scrolled = true; }); setInterval(function check() { if (!scrolled) return; gifs.each(function() { if (isInview(this)) { if (!this.playing) play(this); } else { stop(this); } }); scrolled = false; }, 25); function play(element) { element.playing = element.src = element.src; } function stop(element) { element.playing = false; } function isInview(element, options) { var $element = $(element), $win = $(window); if (!$element.is(':visible')) { return false; } options = $.extend({topoffset:0, leftoffset:0}, options); var wl = $win.scrollLeft(), wt = $win.scrollTop(), offset = $element.offset(), left = offset.left, top = offset.top; return (top + $element.height() >= wt && top - options.topoffset <= wt + $win.height() && left + $element.width() >= wl && left - options.leftoffset <= wl + $win.width()); } });</script>

Read more

YOOtheme Pro 1.4 released

Two weeks after publishing our latest website Sonic we are very happy to announce the release of YOOtheme Pro 1.4. This version is a huge step forward. It comes with new elements that bring a lot of much demanded features from Widgetkit 2 into Pro: the Overlay, Gallery and Switcher elements. The Accordion element has been reworked and a bunch of handy new column options were added to Rows inside the builder. New site and admin localizations were added, making YOOtheme Pro available in more and more languages. Of course, many bugs were eliminated and minor improvements were made.


Overlay element

The Overlay element allows you to position content on images and apply a huge range of styles to it. You can select a background color or a second image that appears on hover. Animate title, meta, content and the image itself separately. You can apply different positions to the overlay or set it to cover mode and position the content inside the overlay instead. These are just a couple of the available settings. Just play around with them to get an overview.

Overlay

Gallery element

The Gallery element displays images inside a grid with different layout options, like the number of columns on different viewport sizes. It also provides all settings from the Overlay element to display content inside the images. You can apply a different text color to each item and automatically inverse the color inside the overlay, if necessary, to improve legibility on all backgrounds.

Gallery

Switcher element

The Switcher element provides a number of different navigations to toggle through content items with an optional animation. Apply tabs, a subnav in different styles or a thumbnail navigation. The element features endless layout combinations. You can place the navigation to the left, right, bottom or top of the content and apply a width to it – the same goes for the image. To keep the page from jumping when switching through the items, you can match the content height.

Switcher

Improved Accordion element

We totally spruced up the Accordion element. It now features all of the usual fields, like title, content and image and you can add a link as well as different title and image styles. In addition, the content layout can be modified through the Image Alignment option.

Accordion

New column options for Rows

Layouts in YOOtheme Pro are built by placing rows in sections and arranging elements inside them. Each row can be divided into grid columns. From version 1.4 on, these columns feature individual settings, so you can create more sophisticated layouts. Apply a background color or image as well as text color to each column and modify or remove the grid gutter to generate tiled content boxes.

Row grid

Tile Component

To give you more scope when creating layouts, we developed the new Tile component in UIkit. Like the Card component it allows you to create layout boxes and apply different background styles to them. But tiles can be placed seamlessly next to each other, because they never contain box-shadows or similar decorations outside the box itself. This is what enabled us to create the above mentioned column options for rows.

Tile component

New features from Sonic website

Some of the new features from YOOtheme Pro 1.4 were already pre-released with our March website Sonic and made it possible for us to apply gradients to many UI elements and create those variable and open layouts.

Sonic features

Multiple section backgrounds

Previously, when applying a style to a section, you had to choose between using a background color or an image. Now these options can be combined, so that it is possible to select a background color and at the same time apply a background image. This lets you play with multiple background layers – fixed and scrolling – and greatly enhances the flexibility of sections in YOOtheme Pro.

New text background setting

Titles inside the Headline, Panel and Module/Widget elements now feature a new background color option, so you can apply background images or gradients instead of the text color to those headings.

In addition to that, another title size – Heading Hero - is available. This is great to display extra large headings, for example in hero sections.

New social icon

We also added a new social icon: the receiver. When editing the social links inside the Header layout section of YOOtheme Pro, just enter tel:+1 (555) 555-5555 (with the phone number you actually want to provide) and the icon will be generated automatically.

Receiver Icon

Site & admin translations

At this point we would love to thank everybody who helped translate YOOtheme Pro into so many new languages. By today we have been able to add 25 new site and 11 admin localizations. In addition, YOOtheme Pro now also supports RTL languages out of the box.

Thanks to the OneSky App, everyone who is interested can start translating the project after a simple sign up. There is still work to do, so please feel free to help us further on.

Languages

Improved update safety

If you are still reading, we got more news that we are sure will make a lot of you guys happy. CSS is automatically recompiled after updating YOOtheme Pro. So far, this wasn't happening. The theme would preserve your CSS file upon updating so as not to override your customizations. But this also meant that the CSS was likely to break when there were changes in UIkit. Now you only need to open the Website Builder after you've updated YOOtheme Pro and the CSS is compiled in the background. This will make updating a lot easier.

Wrapping up

These were some of the additions and features in YOOtheme Pro 1.4. A lot more has happened, for example we reworked the navbar and transparent header behavior, added options to the Description List element and squashed lots and lots of bugs. For more information, take a look at the Changelog.

Lastly, we would like to thank you for your feedback and ideas that we have been receiving and especially for everyone's support on the translations. Right now, there's a neck and neck race going on between the Dutch and Danish translations. Both are almost done, lets see who finishes first. ;)

So as usual, we are glad to hear your thoughts and ideas about this latest release. Please leave us your comment below.

jQuery(function($) { var gifs = $('img.gif'), scrolled=false; $(document).on('scroll', function() { scrolled = true; }); setInterval(function check() { if (!scrolled) return; gifs.each(function() { if (isInview(this)) { if (!this.playing) play(this); } else { stop(this); } }); scrolled = false; }, 25); function play(element) { element.playing = element.src = element.src; } function stop(element) { element.playing = false; } function isInview(element, options) { var $element = $(element), $win = $(window); if (!$element.is(':visible')) { return false; } options = $.extend({topoffset:0, leftoffset:0}, options); var wl = $win.scrollLeft(), wt = $win.scrollTop(), offset = $element.offset(), left = offset.left, top = offset.top; return (top + $element.height() >= wt && top - options.topoffset <= wt + $win.height() && left + $element.width() >= wl && left - options.leftoffset

Read more

Today we’re excited to release the 3.x version of Ionic Native, a project that makes it easy to use over 130 native mobile SDK features in your app through simple JavaScript interfaces, in a way that works across all major platforms (and now the web!). (Impatient? Check out the README for instructions on using it, or start a new v2 project)

With this release, we’ve made two major improvements: drastically reduced code bundle size, and 100% browser development support.

Bundle size improvements

With Ionic Native 3.x, you install only the plugins you need, saving significant space in your final code bundle. In one test, we saw a 15% code size improvement. If you use a lot of plugins, you’ll likely see a smaller but still significant improvement.

Plugin Mocking and Browser Development

The 3.x release is significant for adding full support for plugin mocking. That means any of of the 130+ Ionic Native plugins can be tested and used in the browser. This makes it possible to build the entirety of your app in the browser or ionic serve without dealing with device or emulator testing, a level of development speed and agility that is unheard of in mobile.

To take full advantage of this new super power, you’ll need to do some up front work by providing mocks for the plugins you use, and have them return data that makes sense for your app.

Take a look at the Browser Usage documentation for a full example of how to mock a plugin.

Ionic/Angular 1 Support

3.x is the first version that does not support Ionic/Angular 1.x. For those using Ionic/Angular 1, you’ll need to continue using version 2.x of Ionic Native. Take a look at the README for more info.

What’s next?

Reducing filesize and making it possible to develop your app entirely in the browser even if it relies on native plugins is just step one. We are thinking about ways we can make it easy to work with plugins that have browser APIs available, possibly with pre-baked UI on top of the rapidly expanding Web API’s out there.

We’re looking forward to hearing your feedback on the new release, and ways we can help you do more in the browser. To get started, read the README for installation instructions, or create a new v2 app.

Read more

Over the last few months the framework team has been hard at work on a new v3 version of the Ionic CLI. The project’s focus has been on improving the overall developer experience, CLI speed, and architecture to allow us to potentially introduce new plugins and platforms in the future. We want the developer experience of the CLI to be as good as the framework that it supports. ❤️

A major motivation for v3 was improving the speed of the CLI experience itself. The first thing you should notice is the install time: the new CLI install is significantly faster. One measure shows install time reducing from 150 seconds for CLI v2 to around 10 seconds for CLI v3! The commands themselves are also more responsive. ????

Providing better help documentation and more guidance as you interact with commands was another important goal of CLI v3. Command help is now clearer and provides a nice overview of the command’s interface.

Start command output

Most commands also have interactive prompts. These can provide additional details about the inputs that are required.

Getting started

To install the new CLI execute the following command:

npm install -g ionic@beta

If you are working with an existing Ionic project you will also need to execute the following command in your project directory.

For Ionic1 Projects
npm install --save-dev @ionic/cli-build-ionic1@beta @ionic/cli-plugin-cordova@beta

For Ionic2 Project
npm install --save-dev @ionic/cli-build-ionic-angular@beta @ionic/cli-plugin-cordova@beta

Additional Documentation can be found in the project’s README. We hope that in the coming days you will install the new CLI and provide us with feedback on your experiences. Let us know by filing an issue on the repo for the project https://github.com/driftyco/ionic-cli

We look forward to your feedback. Enjoy! ????

Read more

© 2019 Extly, CB - All rights reserved.