list of css framworks and such that I have found

CSS Frameworks.markdown

css tools

stylesheet
	rules	
1 = css style rule
4 = media rule
	cssRules
	cssText
5 = css font face rule


Array.from(document.styleSheets[1].rules)
	.map((x=>{{
		1: x.cssText,
		4: x.cssText,
		5: x.cssText
	}[x.type]} ));
http://utg.ezralafleur.com

• CSS Comb – sortcs css properties

• http://beautifytools.com (converters)

• https://www.jitbit.com/unusedcss/ scan site for unused css

• https://www.purgecss.com/ remove unused css

• https://github.com/joereynolds/mort detect and highlight dead css

• https://github.com/geuis/helium-css scan for unused css crawler

• https://github.com/css/csso/ structural optimisation: Merge blocks with same selectors and properties, remove overidden - properites, remove duplicate selectors, partially merge blocks, remove empty rulesets, minimize margin and padding

• http://csslint.net/ point out problems with your css

• http://extractcss.com/ extract inline styles from html to create an external stylesheet

• dependents-sass-thematic - npm

• sass-stylesheet - npm - extract reusable sass

• GitHub - lightningtgc/sublime-cssorder: A CSS style auto formatter for Tencent Alloyteam coding style— sublime plugin

• cssbrush- csscomb with a few improvements

• polish-css - comprehensive css style enforcer with plugins - npm

• css-lint/docs/rules at f1bd5314aed82ae3cadfc39a0d183428cfb98d94 · gajus/css-lint · GitHub

• nukecss - npm

• GitHub - purifycss/purifycss: Remove unused CSS. Also works with single-page apps. this one looks pretty good

• scss-analyzer - npm

• A Complete Guide to Dark Mode on the Web | CSS-Tricks

css parsers

• GitHub - reworkcss/css: CSS parser / stringifier for Node.js
• GitHub - tonyganch/gonzales-pe: CSS parser with support of preprocessors
• GitHub - CSSLint/parser-lib: Collection of parsers written in JavaScript
• GitHub - css/gonzales: Fast CSS parser

[[]]

css Frameworks

The Cognitive Complexity of CSS - Ginseng – Blog ridge.css

Saving the Day with Scoped CSS | CSS-Tricks

http://styleguide.pageuppeople.com

Diagnostic.css – Super quick web accessibility testing | KarlGroves.com GitHub - yegor256/tacit: CSS Framework for Dummies, Without Classes https://github.com/dohliam/dropin-minimal-css

Tailwind CSS v1.3.0 Released | Hacker News

os simulators 98.css - A design system for building faithful recreations of old UIs

Tufte CSS

fill patterns GitHub - bansal-io/pattern.css: CSS only library to fill empty background with beautiful patterns.

CSS framework https://tachyons.io A Modern Baseline.CSS 🎾 GitHub - Pixelmouse/symbiosis-css: Removes the annoying elements when developing a web compatible with browsers. Milligram - A minimalist CSS framework.

Semantic UI Semantic UI

Show HN: MVP.css – Minimalist stylesheet for HTML elements | Hacker News

Also for reference, behold W3C Core Styles (since 1997): https://www.w3.org/StyleSheets/Core/

https://www.w3.org/StyleSheets/Core/Oldstyle.css
https://www.w3.org/StyleSheets/Core/Modernist.css
https://www.w3.org/StyleSheets/Core/Midnight.css
https://www.w3.org/StyleSheets/Core/Ultramarine.css
https://www.w3.org/StyleSheets/Core/Swiss.css
https://www.w3.org/StyleSheets/Core/Chocolate.css
https://www.w3.org/StyleSheets/Core/Traditional.css
https://www.w3.org/StyleSheets/Core/Steely.css

Little snippet that inserts buttons at the top of the page so you can toggle the stylesheet there between these w3.org sheets:

  (function() {
    const sheets = [
      ‘https://www.w3.org/StyleSheets/Core/Oldstyle.css’,
      ‘https://www.w3.org/StyleSheets/Core/Modernist.css’,
      ‘https://www.w3.org/StyleSheets/Core/Midnight.css’,
      ‘https://www.w3.org/StyleSheets/Core/Ultramarine.css’,
      ‘https://www.w3.org/StyleSheets/Core/Swiss.css’,
      ‘https://www.w3.org/StyleSheets/Core/Chocolate.css’,
      ‘https://www.w3.org/StyleSheets/Core/Traditional.css’,
      ‘https://www.w3.org/StyleSheets/Core/Steely.css’,
      ‘./mvp.css’,
    ];

    const div = document.createElement(‘div’);
    const head = document.querySelector(‘head’);
    sheets.forEach(url => {
      let button = document.createElement(‘button’);
      button.onclick = () => {
        // Remove all stylesheets
        let stylesheets = document.querySelectorAll(‘link[rel=“stylesheet”]’);
        stylesheets.forEach(el => el.parentNode.removeChild(el));

        // Insert our new sheet (<link rel=“stylesheet” href=“file.css”>)
        let link = document.createElement(‘link’);
        link.setAttribute(‘rel’, ‘stylesheet’);
        link.setAttribute(‘href’, url);
        head.appendChild(link);
      };

      button.innerText =
        url === ‘./mvp.css’
          ? ‘Original MVP.css’
          : url.replace(‘https://www.w3.org/StyleSheets/Core/', '’);
      button.setAttribute(‘style’, ‘cursor: pointer’);
      div.appendChild(button);
      div.appendChild(document.createTextNode(‘ ‘));
    });

    // Insert buttons into DOM
    document.body.insertAdjacentElement(‘afterbegin’, div);
  })();