Trident Design

Category: Generators

  • Country flags in single CSS sprite

    Country flags in single CSS sprite

    Almost every website that caters to an international market needs a set of flag icons, either to visually mark the current language and the alternatives or to mark content specific to a certain country. While there are countless country flag icon sets out there, most of the time you must build your own solution to display them.

    This is where Flag Sprites comes to the rescue. Using the well known technique of CSS sprites, this service allows you to select the country flags you desire and delivers a sprite image with your selection as well as the CSS code needed to display each and every flag. Not only you have the flag for every country in the world, but even a few extra more, like the European Union, Catalonia, Scotland or Wales.

    [notification type=”information”]Licence: free for personal and commercial projects[/notification]

     

    [button color=”green” link=”http://flag-sprites.com/”]Start using the Flag Sprites[/button]

  • Subtle Patterns Background Image Generator

    Subtle Patterns Background Image Generator

    A while ago we presented Subtle Patterns – a growing collection of background patterns that can be downloaded for free. Yet some people wanted more. So they took the patterns from Subtle Patterns and created an application that allows one to create their own custom backgrounds. Just like in Photoshop, you can choose a base colour, the pattern, the blending mode and the “intensity” of the pattern. The extra options include the ability to add noise, to invert the pattern or to generate a retina-ready @x2 image. When you’re satisfied with the result, all you have to do is click the download button and save the image generated. Simple, no?

    [notification type=”information”]Licence: free for personal and commercial projects[/notification]

     

    [button color=”green” link=”http://bg.siteorigin.com/”]Start using the Subtle Patterns Background Image Generator[/button]
  • Fontello icon font generator

    Fontello icon font generator

    Fontello is an online generator for icon fonts, allowing everyone to create a custom icon font set. It uses slightly modified versions of four icon fonts, unified for a common look:

    • Entypo
    • Font Awesome
    • Iconic
    • Brandico
    You can pick what icons you want and you can download the compilation font ready to use on your website using @font-face.

    [notification type=”information”]Licence: MIT (free for personal and commercial projects)[/notification]

     

    [button color=”green” link=”http://fontello.com/”]Start using Fontello[/button]

  • Gridpack – the responsive grid generator

    Gridpack – the responsive grid generator

    Gridpack is a free tool from Erskine Design that allows one to build a grid set for a responsive website. The application allows one to set breakpoints and to change the number of columns, size of gutter and padding for each breakpoint interval. The final result can then be exported to code. The package contains CSS, LESS and SCSS stylesheets, PNG images and a javascript snippet that allows one to overlay the PNG files over the web page with a simple key stroke.

    [button color=”green” link=”http://gridpak.com/”]Use Gridpack[/button]

  • UI Parade Button Builder

    UI Parade Button Builder

    This button builder is a handy application, allowing people with no coding skills to create beautiful modern buttons for their websites. The application also generates the HTML and CSS code needed for the buttons to be fully functional across all modern browsers.

    [button color=”green” link=”http://livetools.uiparade.com/button-builder.html”]Use the Button Builder[/button]

  • Initializr

    Initializr

    Initializr is an HTML5 templates generator that generates for you a clean customizable template with just what you need to start! The base material is offered by HTML5Boilerplate and Twitter Bootstrap. One also can also choose the polyfill method (via Modernizr or HTML5 Shiv), the Google Services that will be used (like Chrome Frame or Analytics).

    [button color=”green”]Start using Initializr[/button]