Skip to content

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

@ianchanning

Description

@ianchanning

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;
      }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions