Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Stylized letter B, half in bold.

New premium skins and icon pack

Fredrik Danielsson

April 27th, 2020

Written by

Fredrik Danielsson
Fredrik Danielsson

Category

News & Updates

With TinyMCE 5.2, we released a couple of new premium skins and icon packs geared towards forms and webapp use.

  • The outside skin puts the toolbar outside of the visual editor frame, creating an interesting dynamic. 
  • The naked skin does away with all the borders altogether allowing you to decide how to frame the editor. 
  • Finally the new thin icon pack together with the snow skin makes a stunningly beautiful note taking experience.

The outside skin

Below is an example of the new outside skin inside a form. Together with the toolbar location configured on the bottom, it creates an interesting form layout.

TinyMCE configured with the outside skin within a form.

The naked skin

Yes, BYOB – bring your own borders! The naked skin removes the borders around the editor as well as the borders separating the menubar, toolbar and statusbar, giving you ultimate flexibility. It allows you to put your own borders around TinyMCE, and include custom UI controls outside of TinyMCE, making it look like it’s all part of the one, custom editing experience.

TinyMCE configured with the naked skin plus custom borders and controls.

The snow skin

The snow skin was designed to provide a spacious and fresh editing experience, especially with the new thin icon pack. The snow skin, too, does away with the outside border, allowing you to seamlessly incorporate it into your web app. Below is a demo note taking app built using TinyMCE, configured with the snow skin and thin icon pack.

TinyMCE used in a note taking app

The thin icon pack

The new thin icon pack is a light-weight and modern icon pack with a slight playful vibe. The icons are slightly smaller, somewhere between the default and small icon packs in size. Technically, the icons are designed around a 1.25px stroke width to give them a warm and slightly fuzzy feeling on non-retina screens.

A 1.25px stroke width gives a slight fuzzy rounded feeling.

 

The thin icon pack.

What next?

All of these skins are available, plus skins for Material, Bootstrap, and more, in the Tiny Skins and Icon Packs. These are included in all of our paid plans, starting from the Cloud Essentials package.

Start with a 14 day free trial.

For a comprehensive list of all our skins and icon packs, as well as information on how to use and configure them, see our technical documentation.

Also, check out our related blog posts:

Skins and Icons
Fredrik Danielsson
byFredrik Danielsson

Fredrik is Principal Designer at Tiny, responsible for choosing the exact right shade of gray for borders and icons.

Related Articles

  • Laptop and phone.
    News & Updates

    Editable Discontent

    by Team Tiny in News & Updates
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor