We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Is there a minimal theme (CSS and EJ2 scripts) available?

We're working on using Syncfusion'e EJ2 into a web product of ours - mainly to use the Grid and Chart controls. We noticed the stylesheet files for these components is too large to deploy (as many of our users have low-speed connections, even with HTTP gzip compression they're still looking at over 2MB of downloads).
Using the Theme Studio tool (https://ej2.syncfusion.com/themestudio/?theme=material ) to generate a stylesheet for the Chart and Grid components, I used the filter to de-select everything except the Grid, but the output CSS is still 770KB in size (!!). I opened-up the stylesheet to see at least 220KB of that is used by the "e-icons" font. I know the Grid uses lots of icons from the font, but I opened the embedded TTF file in a font viewer and saw it contained lots of glyphs that aren't needed by our application. Additionally, why isn't the stylesheet using a compressed font format like WOFF instead of TrueType?

What I'd like is a build of EJ2 that doesn't have any embedded themes or visual assets except the bare minimum to make it usable, so the rest (colors, fonts, animations, etc) can be done by ourselves separately. 

Additionally:
  • Is there a "theme-less" or minimally-themed version of EJ2 available that we can style ourselves that doesn't come bundled with style-related scripting (e.g. Material's "ripple" scripting)
  • Why does the Theme Studio still include styles for other components (like Buttons and Checkboxes) when I select only the Grid component?
  • Is there a minimal version of the e-icons font that doesn't include unused icons? If not, do you have a list of characters/glyphs from the e-icons font that are necessary so I can manually edit the font file to remove unused characters?
  • Will you update your CSS files to use WOFF instead of TTF?


3 Replies

JD Jayakumar Duraisamy Syncfusion Team February 18, 2019 11:00 AM UTC

Hi Scott, 
 
Thanks for your interest in Syncfusion products. 
 
Currently, we have reduced the size of CSS file by removing unwanted icons and segregating the icons theme wise and this will be available in our upcoming Essential Studio Volume 1, 2019 release. To maintain single file, we have maintained the icons in base64 format. 
 
Query 1: Is there a "theme-less" or minimally-themed version of EJ2 available that we can style ourselves that doesn't come bundled with style-related scripting (e.g. Material's "ripple" scripting) 
 
Currently, we don’t have any support for theme-less or minimal-themed version of EJ2 styles. We have provided support for overall wrap styles in theme studio and we don’t have any plan for individual skeleton structure. 
 
Query 2: Why does the Theme Studio still include styles for other components (like Buttons and Checkboxes) when I select only the Grid component? 
 
The Grid component needs button and checkbox styles for specific features. Hence, on downloading Grid component their corresponding dependencies [Button and Checkbox] also gets downloaded. 
 
Query 3: Is there a minimal version of the e-icons font that doesn't include unused icons? If not, do you have a list of characters/glyphs from the e-icons font that are necessary, so I can manually edit the font file to remove unused characters? 
 
Yes, you can remove unwanted and unused icons from metro studio application. We have also provided metro project icon file for selecting required icons and manually deleting the unwanted ones and the same can be referred from the below link. 
 
 
Please find the documentation link for Metro Studio installation and Project creation. 
 
 
Query 4: Will you update your CSS files to use WOFF instead of TTF? 
 
We can update the CSS files and specify the format of icon file. Please find the below steps for generating font file using metro studio application. 
 
Step 1: Open the metro project icon file metro project application by clicking on the open option provided at the bottom left corner of metro studio application. Please find the metro project icon file from the below link. All the icons in the e-icons file will be shown. Select the required icons and delete the unwanted ones. 
 
 
Step 2: After opening the project, the project will be added in the bottom scroll bar. Click on create font button from the e-icons project.  
 
 
 
Step 3: The character mapping window will be appeared with the corresponding name, glyph and code. Click on Generate font button at the bottom right corner of character mapping window. 
 
Step 4: The corresponding font file for the selected icons will be generated. Refer the font face in the style file with the required format type as shown below. 
 
@font-face { 
  font-family: 'e-icons'; 
  src: 
  url('e-icons/Fonts/e-icons.ttf') format('truetype'), 
  url('e-icons/Fonts/e-icons.eot') format('eot'), 
  url('e-icons/Fonts/e-icons.svg?#e-icons') format('svg'); 
  font-weight: normal; 
  font-style: normal; 
  } 
 
For your convenience, we have downloaded the grid component styles and referred the generated font family file in CSS file and the same can be referred from the below link. 
 
 
Note: As of now please ignore ClearAll icon while generating font file as we are having issues with it. 

Please let us know if you have any concerns. 
 
Regards, 
Jayakumar D 



SC Scott February 18, 2019 11:50 AM UTC

Thank you for the info. I look forward to seeing your next release then.


JD Jayakumar Duraisamy Syncfusion Team February 18, 2019 12:08 PM UTC

Hi Scott, 
Thanks for the update. 
We will let you know, once volume 1, 2019 got released. 
Regards, 
Jayakumar D 


Loader.
Live Chat Icon For mobile
Up arrow icon