pdsite icon indicating copy to clipboard operation
pdsite copied to clipboard

Allow fallback styles to external bootstrap CDN libraries in the default theme

Open ianchanning opened this issue 4 years ago • 0 comments

Hi there, I love the project and how simple it is.

One article I read recently talks about the importance of making sure that websites are designed to last. One main point of failure is referencing external javascript and css stylesheets. Perhaps it might be worth having a simplified stylesheet as a fall back if the external ones fail.

I think most people that look at this project will be fairly technical and so interested in this option. Effectively I think if they choose to not use bootstrap there should be a bare bones fall back.

Specifically I think you should have an extra case in this section of template.html where neither bootstrap or bootswatch is specified:

$if(bootswatch)$
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/$bootswatch$/bootstrap.min.css">
$else$
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
$endif$

I do love bootswatch as well and I have done some work on creating a bare-bones bootstrap style CSS that you could use as a fallback. My rather crudely named mofoforms experiment (based on BMFW) might be enough for most pages on your site. Possibly not the navbar, but that should be easy enough to extend for.

This is the complete CSS that I use:

      body {
        color: #444;
        font-size: 18px;
        margin: 40px auto;
        max-width: 720px;
        line-height: 1.4;
        font-family: sans-serif;
        padding: 10px 16px;
      }
      h1,h2,h3 {
        line-height: 1.2
      }
      a {
        text-decoration: none;
      }
      h1,h2,h3,h4,h5,h6 {
        font-weight: normal;
      }
      table {
        border-spacing: 0;
        border-collapse: collapse;
      }
      th, td {
        border-top: 1px solid #444;
        padding: 10px 16px;
      }
      input, textarea, select, button {
        font-family: sans-serif;
        font-size: 18px;
        color: #666;
        padding: 10px 2%;
        line-height: 1.4;
      }
      label, button {
        margin-top: 10px;
      }
      label {
        display: block;
      }
      fieldset {
        padding: 10px 16px;
        border: none;
      }
      input, textarea {
        width: 96%;
      }
      select {
        width: 100%;
      }
      label input {
        width: auto;
      }

ianchanning avatar Dec 23 '19 13:12 ianchanning