self publishing let authors bypass the traditional filters

How to Add Semantic-UI to Your ePub File
Published: 26-Jun-2018

If you're in to self-publishing, you've probably come across the ePub format. ePub is literally a zipped up web site. But with much fewer features.

While not every feature of function of modern web programming will work within the ePub format, it is still possible to work with modern web frameworks such as Semantic-UI (https://semantic-ui.com/). The tricky part is connecting the dots.

So, here's how.

  1. Start by creating an ePub file using your favourite ePub editor. Mine is Sigil (https://sigil-ebook.com/).
  2. Download the Semantic-UI zip, which at time of writing is located on the Getting Started page (https://semantic-ui.com/introduction/getting-started.html).
  3. Don't forget to download jQuery (https://jquery.com/). You may as well only use jQuery slim (minified), because, well, lack of features of ePub.
  4. Import your files:
    1. Import semantic-min.css;
    2. Import jquery-3.3.1.min.js (or whatever version is current);
    3. import semantic-min.js;
    4. import brand-icons.ttf and brand-icons.woff, icons.ttf and icons.woff, outline-icons.ttf and outline-icons.woff (because SVG and WOFF2 fonts are not supported by ePub);
  5. Edit the semantic.min.css file that has been imported into your ePub file. You need to change the icon paths from
    themes/default/assets/fonts

    to

    ../Fonts

    Sigil has a Find/Replace feature for this.

  6. Add links to your xhmtl file contents (you'll need to be in HTML editing mode for this):
      1. In your <head>, add this:
          
        
          <link href="../Styles/semantic.min.css" rel="stylesheet" type="text/css"/>
        
        ... links to any custom css
        
          
        
        
      2. Just before your closing </body> tag, add this:
        
        
        <!-- Scripts -->
        
        <script src="../Misc/jquery-3.3.1.slim.min.js"></script>
        
        <script src="../Misc/semantic.min.js"></script>
        
        
        
        

    Once you've done the above, your file should now use Semantic-UI and it's included icons from font-awesome.

self publishing let authors bypass the traditional filters

How to Add Semantic-UI to Your ePub File
Published: 26-Jun-2018

If you're in to self-publishing, you've probably come across the ePub format. ePub is literally a zipped up web site. But with much fewer features.

While not every feature of function of modern web programming will work within the ePub format, it is still possible to work with modern web frameworks such as Semantic-UI (https://semantic-ui.com/). The tricky part is connecting the dots.

So, here's how.

  1. Start by creating an ePub file using your favourite ePub editor. Mine is Sigil (https://sigil-ebook.com/).
  2. Download the Semantic-UI zip, which at time of writing is located on the Getting Started page (https://semantic-ui.com/introduction/getting-started.html).
  3. Don't forget to download jQuery (https://jquery.com/). You may as well only use jQuery slim (minified), because, well, lack of features of ePub.
  4. Import your files:
    1. Import semantic-min.css;
    2. Import jquery-3.3.1.min.js (or whatever version is current);
    3. import semantic-min.js;
    4. import brand-icons.ttf and brand-icons.woff, icons.ttf and icons.woff, outline-icons.ttf and outline-icons.woff (because SVG and WOFF2 fonts are not supported by ePub);
  5. Edit the semantic.min.css file that has been imported into your ePub file. You need to change the icon paths from
    themes/default/assets/fonts

    to

    ../Fonts

    Sigil has a Find/Replace feature for this.

  6. Add links to your xhmtl file contents (you'll need to be in HTML editing mode for this):
      1. In your <head>, add this:
          
        
          <link href="../Styles/semantic.min.css" rel="stylesheet" type="text/css"/>
        
        ... links to any custom css
        
          
        
        
      2. Just before your closing </body> tag, add this:
        
        
        <!-- Scripts -->
        
        <script src="../Misc/jquery-3.3.1.slim.min.js"></script>
        
        <script src="../Misc/semantic.min.js"></script>
        
        
        
        

    Once you've done the above, your file should now use Semantic-UI and it's included icons from font-awesome.