Search code examples
htmlcssgoogle-apps-scriptweb-applications

Use bootstrap, css in appscript HTML

I am trying to build a webapps. However I can't create a css and folders in appscript.

Is there anyway for me to add css?

heres my simple code :

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form>
      <input type="text" id="login" class="fadeIn second" name="login" placeholder="login">
      <input type="text" id="password" class="fadeIn third" name="login" placeholder="password">
      <input type="submit" class="fadeIn fourth" value="Log In">
    </form>
  </body>
</html>

I need help.

I would like to use css in appscript since I cannot create .css file

Solution

  • Using doget() and inline stylesheet

    function doGet() {
  template = HtmlService.createTemplateFromFile('index');
  return template.evaluate();
}

    Add this in the head tag. Edit this code since this is for example only:

    <style>
    /* BASIC */

    html {
      background-color: #56baed;
    }

    body {
      font-family: "Poppins", sans-serif;
      height: 100vh;
    }

    a {
      color: #92badd;
      display: inline-block;
      text-decoration: none;
      font-weight: 400;
    }

    h2 {
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      text-transform: uppercase;
      display: inline-block;
      margin: 40px 8px 10px 8px;
      color: #cccccc;
    }
</style>

    Then add this link rel to use bootstrap or any custom CSS framework online since there's no way for you to add .css file.

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    Reference: