dohliam / dropin-minimal-css Goto Github PK
View Code? Open in Web Editor NEWDrop-in switcher for previewing minimal CSS frameworks
Home Page: https://dohliam.github.io/dropin-minimal-css
License: MIT License
Drop-in switcher for previewing minimal CSS frameworks
Home Page: https://dohliam.github.io/dropin-minimal-css
License: MIT License
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.
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:
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.
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'm the author of Tent CSS and I think it would be a perfect fit for your project. Thanks for your consideration!
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
sanitize-zdroid
should be renamed to codify
sanitize-10up
should be renamed to sanitize
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
.
IVORY (https://github.com/IVORY-UI/ivory) also one of the good framework, and you can consider to add in the list.
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).
Awsm.css now has multiple different themes, which should be added as a collection:
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! 💯
Hey there! :)
I'd like to see YAMB css included.
Thanks in advance!
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.
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:
src
folder to allow for inspection of code and easier diffing between versionsmin
folder for use by ghpages siteHi 👋
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:
Hi, MVP.css has been updated: https://unpkg.com/mvp.css
Don't have some spare time at this point to fork and PR, but in future you may want to add:
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.
Revert to previous format (i.e., [link to project] by @author ([preview link] · [license link]
). For example:
Instead of:
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.
Steps to reproduce:
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.
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!
Please update missing to 1.0.3. Thanks!
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?
Hi, I'd like to recommend Bamboo CSS, a classless CSS library.
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.
Please allow me to switch through the options just by pressing up and down on the arrow keys
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.