Archives

Archives / 2015 / July

  • Intel AppFramework create and use your choice of IcoMoon icons

    2 Comments

    The Intel AppFramework uses a small subset of the IcoMoon icons. This post describes how to make your own selection of IcoMoon icons and use it in your app.

    There is a free IcoMoon icon set with 490 icons available that we will use to make our selection from.

    1. Open the url https://icomoon.io/app/#/select
    2. Open the IcoMoon - Free icon set and select the icons you want to use in your app
    3. It is also possible to select all icons (we will do that for now)
    4. Select the Generate Font option at the bottom
    5. Press settings and select Font Name IcoMoon, select as Class Prefix icon. and select the option Encode & Embed Font in CSS
    6. Now click the download button
    7. Open the downloaded IcoMoon.zip file and copy the file style.cssto your styles folder as customicons.css
    8. Open de customicons.css file and compare with the file appframework/build/icons.css (we need to copy over the appframework specific styles)
    9. Remove the first four lines with a file-based @font-facedefinition, we will use the embeded one
      @font-face {
   font-family: 'IcoMoon';
   src: url('fonts/IcoMoon.eot');
}
    10. Replace:
      .icon {
   font-family: 'IcoMoon';
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;

      /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
with (check appframework/build/icons.css for changes):


      .icon:before {
   font-family:'IcoMoon';
   speak:none;
   font-style:normal;
   font-weight:normal !important;
   font-variant:normal;
   text-transform:none;
   line-height:1;
   color:inherit;
   position:relative;
   font-size:1em;
   left:-3px; top:2px;
}
li .icon:before {
   position:relative;
   width:24px; height:100%;
   top:2px;
   line-height:0 !important;
   margin-right:4px;
}

.icon.mini:before {
   font-size:.7em;
}
.icon.big:before {
   font-size:1.5em;
}

      and we are done! 
    11. In your main.css file include the appframework css files and your customicons.css file (or include directly in html):
      @import url(../appframework/build/af.ui.base.css);
      @import url(../appframework/build/af.ui.css);
      @import url(customicons.css);

  • Intel AppFramework installation and documentation

    No Comments

    I have written a mobile app with Ionic Framework but I must say that I'm not really font of the AngularJS framework, especially now that you know that version 1.3 as used in Ionic at the time of writing (version 1.0.1) is a dead end and version 2 is on the horizon. For a new mobile app I needed a mobile app UI framework that I can use in combination with ReactJS and that would work on an as wide range of mobile devices as possible. Reapp looks promising, but is still alpha and not very cross platform (for example Windows Phone). I ended up with Intel App Framework version 3, a simple framework with great support for multiple devices. It event tries to mimic the native style on each type of device, I'm not sure yet if i'm that happy about that, but it is also possible to override the ui time to a fixed ui (for example ios) for all devices.

    Installing Intel App Framework

    For client framework I normally use Bower. The Intel App Framework in available on Bower as the "intel-bower" package, but that package is not maintained and out of date, so don't use it. There is another reason why you shouldn't use it, it only contains the js and css files, not the samples which you really need due to a lack of documentation. More on that later. My approach is that I add the original appframework Git repository ito my project's Git repository a a submodule:

    git submodule add https://github.com/01org/appframework.git  appframework

    And to update this (an possibly other) submodules in your repository, just execute:

    git submodule foreach git pull

    Documentation

    The documentation available for the Intel App Framework is ... minimal.

    The documentation is very minimal (to say the least) about a lot of things. Good example: the section Vector Icons does not mention the available icons, and does not explain how to add your custom icons (I will write about that in a next blog post).

    One of the most important pages is the appframework/index.html kitchensink example. It is possible to run this page directly within the github repository by translating it's url from: https://github.com/01org/appframework/blob/master/index.html to http://rawgit.com/01org/appframework/master/index.html (see this stackoverflow page for more information on this translation)

    This is a list of all example pages in the appframework github repository. They are interesting to check out and its source code is one of the best sources of documentation:

    I think it might be a good idea if the intel team would give the appframework documentation some more love, and include the links as described above.