Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ianchanning opened this issue Dec 23, 2019 · 0 comments

Comments

@ianchanning
Copy link

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;
      }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant