CSS frameoworks should be automatically updated at regular intervals. This should address issues like #14 as well as the many other frameworks that have outdated information listed. Related tasks:

• Basic information about each framework, including license links and author information etc should be stored in a YAML file that serves as the source of truth for the project. Updates to file locations, author names, project names etc should be made directly to the data file, and a script should use the file to check for updates, download CSS sources, and minify them.
• The js switcher and readme file should also be auto generated at the same time.
• Unminified source files should be stored in a src folder to allow for inspection of code and easier diffing between versions
• Minified files should be stored in min folder for use by ghpages site

• Basic.css
• Bonsai.css

I'm the author of Tent CSS and I think it would be a perfect fit for your project. Thanks for your consideration!

papier is listed with @baasdesign as the author. Unless I'm missing something obvious, I don't think that's correct. Think it should be @alexanderGugel.

Please included nested lists in the template.

  <li>Top level
    <ul>
      <li>Inside</li>
    </ul>
  </li>

Some frameworks are not handling that properly. So preview will help.

Steps to reproduce:

1. Go to https://evgenyorekhov.github.io/holiday.css/src/index.html
2. Click on the Drop-in bookmarklet
3. Select a different CSS framework from the Drop-in switcher

Expected result: selected framework's styles should be applied to the page

Actual result: styles are not applied, there is the following error in the browser console

Failed to find a valid digest in the 'integrity' attribute for resource
'https://dohliam.github.io/dropin-minimal-css/min/awsm.min.css'
with computed SHA-256 integrity
'giTWrXju6B1GUPSb1nHYBfCZzd73kLweWPjVOBzNxAA='.
The resource has been blocked.

There should be a simple API to allow for directly linking to a particular stylesheet. For example:

https://dohliam.github.io/dropin-minimal-css/?sakura

The above should link directly to the demo with Sakura CSS. This should also enable selecting a particular default CSS stylesheet for the bookmarklet.

Thanks for including Base! 👍

Could you please update to latest version (5.2.0) - you can reference https://unpkg.com/@getbase/base/index.css for the full framework or pluck out modules respectively:
https://github.com/getbase/base#htmlcss-references

Cheers man! 💯

Revert to previous format (i.e., [link to project] by @author ([preview link] · [license link]). For example:

• skeleton by @dhg (Preview · MIT)

Instead of:

• skeleton by @dhg (Source · MIT)

Hopefully this should be a bit clearer, since it seems natural to assume that the project name links to the project website rather than a preview.

It should be much easier to include new frameworks now, since all that is required is to add the relevant information to frameworks.yml and the repo will update itself automatically. Step-by-step instructions on how to do this probably be helpful for new contributors though. These should be included in a CONTRIBUTING.md file and linked from the main readme.

This should include information about adding new frameworks vs. adding new collections of frameworks (or expanding an existing collection).

After the latest updates, Bulma and Tachyons no longer seem to be usable as classless/minimal stylesheets, so they should probably be removed. Alternatively, we could link to older versions of the CSS, but that might be misleading for users wanting to use them in other projects.

Hi, I'd like to recommend Bamboo CSS, a classless CSS library.

Please allow me to switch through the options just by pressing up and down on the arrow keys

Awsm.css now has multiple different themes, which should be added as a collection:

• black
• big-stone
• gondola
• mischka
• pastel-pink
• pearl-lusta
• tasman
• white

Hi!

Cool project, it made me run into okcss — my current favorite — thanks for that!
I noticed the demo doesn't cover description lists — <dl>, <dt>, <dd> — are there plans to add that?

Thanks and best, Sebastian

I propose to add https://github.com/nicolas-cusan/destyle.css to the list. It is a reset stylesheet, but as normalize.css is also on the list I thought i give it a try 🤷‍♂️ . (Full disclosure, I am the author). Thank you!

The latest version of Shoelace has removed the compiled CSS and is no longer really usable as a minimal "dropin" stylesheet. The legacy version has been linked for now, but it should probably be removed eventually from the list.

Since ccMixter inexplicably does not yet support SSL, the demo page gives a warning about loading mixed content (this might even prevent loading on some strict browsers / configurations). The ccMixter link should therefore be replaced with a different freely-licensed audio sample.

http://tachyons.io/

Please update missing to 1.0.3. Thanks!

Hi 👋

I tough that the added dropdown (<select>) where too intrusive or out of place and not really that keyboard friendly.
the page was jumping a lot between switching teams and the dropdown select was changing a lot.

so i tried to go ahead and create a non intrusive selector in a new popup window using <select multiple> 😜
yea that old school dropdown! it have better keyboard navigation cuz it's inlined and you don't need to open up the dropdown every time. and you can move this popup around.

even created a tiny little auto switcher to change theme every x sec

const hybrid = 'bamboo basic bolt brutalist centigram concrete holiday missing-style mvp new neat ok pico simple spcss superstylin vanilla yamb'
.split(/\s+/).sort()
const solid = 'a11yana axist bahunya almond bare base bonsai bullframe caramel caiuss centurion chota cardinal classless clmaterial codify comet concise cutestrap flat-ui bulma fluidity furtive generic gd github-markdown gutenberg hack hello html-starterkit hyp kathamo koochak kraken kube lemon lit lotus hiq markdown marx cirrus mercury min milligram mini minimal minimal-stylesheet mobi motherplate mu mui no-class normalize oh-my-css pandoc-scholar paper papier pavilion picnic preface roble pure sakura sanitize materialize propeller material primer latex scooter semantic-ui shoelace siimple skeleton skeleton-framework skeleton-plus snack spectre style stylize tacit tent terminal tui vital water tachyons wing writ yorha thao ads-medium ads-notebook ads-tufte attri-bright-light-green attri-midnight-green attri-dark-forest-green attri-dark-fairy-pink attri-light-fairy-pink awsm-default awsm-black awsm-bigstone awsm-gondola awsm-mischka awsm-pastelpink awsm-pearllusta awsm-tasman awsm-white md-air md-modest md-retro md-splendor w3c-chocolate boot-readable boot-cosmo boot-cyborg boot-darkly boot-journal boot-paper w3c-midnight w3c-modernist w3c-oldstyle boot-cerulean boot-flatly boot-lumen boot-sandstone boot-slate boot-spacelab boot-superhero boot-yeti w3c-steely w3c-swiss w3c-traditional w3c-ultramarine ads-gazette'
.split(/\s+/).sort()
const responsive = []
// .split(/\s+/).sort()

const all = [...new Set([...hybrid, ...solid])].sort()

const $$ = (tag, attr) => Object.assign(document.createElement(tag), attr)
const $ = (tag, attr) => Object.assign(document.createElement(tag), attr)

// get window size / position from css-switcher
const pos = localStorage.getItem('css-switcher')
const [x, y, w, h] = pos?.split(',') || [0, 0, 200, 200]

const popup = open('about:blank', 'css-switcher', `left=${x},top=${y},width=${w},height=${h}`)

popup?.document.head.append($$('meta', {
  name: 'color-scheme',
  content: 'dark light'
}))

popup.document.title = 'css-switcher'

// this dummy template literal function like provide good IDE support with syntax highlighting
// in many cases, guess we have Lit.js to thanks for this. (?)
const html = x => x.join('')

popup.document.body.innerHTML = html`
  <style>
    /* set html & body to 100% width and height */
    /* and set the body to display items as grid */
    /* where the 2nd div is as tight as possible */
    html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui;
      box-sizing: border-box;
      display: grid;
      grid-template-rows: 1fr auto;
      grid-template-columns: 1fr;
      grid-template-areas: "select" "footer";
    }
    select {
      padding: 20px;
      margin: 0;
      border: 0;
      outline: 0;
      width: 100%;
      height: 100%;
    }
    p {
      text-align: center;
    }
  </style>
  <select autofocus multiple>
    <optgroup id="hybrid" label="Supports prefer-color"></optgroup>
    <optgroup id="responsive" label="Responsive -ness">
      <option value="TODO" disabled>(TODO)</option>
    </optgroup>
    <optgroup id="all" label="All styles"></optgroup>
  </select>
  <p>
    AutoSwitch every <input type="number" id="seconds" value="" placeholder="10s" min="0" max="999" step="1" autofocus>
  </p>
`

const select = popup.document.querySelector('select')
const sHybrid = select.querySelector('#hybrid')
const sResponsive = select.querySelector('#responsive')
const sAll = select.querySelector('#all')

// Disable all other stylesheets on the page
for (const style of Array.from(document.styleSheets)) {
  style.disabled = true
}

const link = document.createElement('link')
link.rel = 'stylesheet'
document.head.append(link)
function changeCSS (css) {
  link.href = `https://dohliam.github.io/dropin-minimal-css/min/${css}.min.css`
}

const capitalize = s => s.replace(/^(.)/, (_, l) => l.toUpperCase())

// Add all stylesheets to the first multiselect
for (const css of hybrid) {
  const option = $$('option', { value: css, label: capitalize(css) })
  sHybrid.append(option)
}

for (const css of responsive) {
  const option = $$('option', { value: css, label: capitalize(css) })
  sResponsive.append(option)
}

for (const css of all) {
  const option = $$('option', { value: css, label: capitalize(css) })
  sAll.append(option)
}

// select the first option
changeCSS(select.value = select.options[0].value)

// Store the windows position/size in local storage so it can be restored
// on subsequent visits when the popup is resized or moved
popup.onresize = 
popup.onunload = 
popup.onmove = () => {
  localStorage.setItem('css-switcher', [
    popup.screenX,
    popup.screenY,
    popup.outerWidth,
    popup.outerHeight
  ].join(','))
}

// Close the popup when either window or popup is closed or reloaded
popup?.addEventListener('unload', () => popup.close())
addEventListener('unload', () => popup.close())

select.onchange = () => {
  const css = Array.from(select.selectedOptions).map(o => o.value)
  // if only one option is selected, change the css
  if (css.length === 1) {
    changeCSS(css[0])
  }
}

// AutoSwitch every X seconds
const autoSwitch = popup.document.querySelector('#seconds')
let interval = 0

autoSwitch.oninput = () => {
  clearInterval(interval)
  if (!autoSwitch.value) return
  
  interval = setInterval(() => {
    select.selectedIndex += 1
    if (select.selectedIndex === -1) {
      select.selectedIndex = 0
    }
    select.onchange()
  }, autoSwitch.value * 1000)
}

(it's not the fanciest javascript code i have ever created, it was just something i quickly put togheter)

anyhow it's using strict syntax, and so there is no undefined variabels anywhere now in this so the bookmarklet script can be done easier: now you just need to have javascript:import('https://dohliam.github.io/dropin-minimal-css/switcher.jsl')

I wanted the css to be kind of categorized by those who support prefer color and can satisfy ppl like me who prefer dark mode

and then i also saw that someone asked for those who are response also ( #40 ) so i added a category for them two in the optgroup (but it's empty atm)

We currently include LatexCSS (69 stars). There is also a separate project called LaTeX.css (1.2k stars). Output is similar, with some differences, most notably the size of the headings. Both appear to be actively maintained. Options:

• Include both (but find some way to distinguish them -- is capitalization enough? e.g., Latex CSS vs. LaTeX CSS)
• Choose one of them to include (perhaps the more active/popular one?)

• sanitize-zdroid should be renamed to codify
• sanitize-10up should be renamed to sanitize

Don't have some spare time at this point to fork and PR, but in future you may want to add:

• Basscss
• Concise CSS
• Furtive

Hi, MVP.css has been updated: https://unpkg.com/mvp.css

This W3C Core Styles are a collection of CSS stylesheets that have been made available by the W3C for more than two decades:

The W3C Core Styles offer authors an easy way to start using style sheets without becoming designers. By adding a link in the head of your documents, a CSS browser will fetch the style sheet of your choice from W3C's server when it encounters your document. A non-CSS browser will display the HTML document like it always did.

Included styles:

• Oldstyle
• Modernist
• Midnight
• Ultramarine
• Swiss
• Chocolate
• Traditional
• Steely

Add the following new frameworks:

• centurion
• cirrus
• cutestrap
• gutenberg
• hello
• hiq
• koochak
• material
• minimal
• mustard-ui
• propeller
• roble
• scooter

IVORY (https://github.com/IVORY-UI/ivory) also one of the good framework, and you can consider to add in the list.

Hard-coded style="padding-left: 24px;" in <body> interferes with visual appearance of the page.

I propose adding https://github.com/kevquirk/simple.css. It is similar to a lot of others on this list. (I'm not the author.)

Here's a new one for you to consider adding to this list: https://github.com/xz/new.css

I might or might not have scrolled through the entirety of the list to check whether the stylesheets are responsive or not.
Foolishly, I only noted for a few of them the result of my check.

Is there any smarter way to add a mention of whether a stylesheet is responsive or not? Maybe add a (Responsive) next to the ones that are?

I don't know if this is the right place to ask, sorry if not.

Most frameworks present horizontal scroll on mobile, which is annoying from a responsiveness perspective, including some that claim to be responsive. Is it because of this particular demo implementation or they aren't really as responsive as they claim to be?

Hey there! :)

I'd like to see YAMB css included.
Thanks in advance!