dohliam/dropin-minimal-css dohliam/dropin-minimal-css

  • Stars
    star
    1,540
  • Rank 29,276 (Top 0.6 %)
  • Language
    CSS
  • License
    MIT License
  • Created almost 8 years ago
  • Updated 11 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
dohliam/dropin-minimal-css
github

dohliam

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Drop-in switcher for previewing minimal CSS frameworks

Drop-in switcher for previewing minimal CSS frameworks

This is a quick drop-in CSS switcher to allow for previewing some of the many minimal CSS-only frameworks that are available. See the demo or drop the switcher into your own page to see how different frameworks would look together with your content.

This project only includes minimal frameworks, in other words, boilerplate / classless frameworks that require no adjustment of the corresponding HTML and can be simply dropped into the project to provide a starting point for further design. No additional javascript, compiling, pre-processors, or fiddling with classes should be required for these to look good and be responsive.

Usage

To use the CSS switcher, just add the following line anywhere within the body tag on your page:

<script src="https://dohliam.github.io/dropin-minimal-css/switcher.js" type="text/javascript"></script>

That's it! You should now be able to cycle through the different frameworks by choosing them from the dropdown at the top of the page.

Keyboard shortcut

You can quickly switch between frameworks by pressing the modifier key or keys on your keyboard + s to focus the switcher dropdown menu, followed by the up and down keys to move up and down the list.

Bookmarklet

The bookmarklet is a convenient way to preview how different CSS frameworks would look on any HTML page. Just paste the following code into your address bar to create a CSS switcher for any site:

javascript:(function()%7Bvar%20body%20%3D%20document.getElementsByTagName('body')%5B0%5D%3Bscript%20%3D%20document.createElement('script')%3Bscript.type%3D%20'text%2Fjavascript'%3Bscript.src%3D%20'https%3A%2F%2Fdohliam.github.io%2Fdropin-minimal-css%2Fswitcher.js'%3Bbody.appendChild(script)%7D)()

Or alternatively, drag the link at the top of the demo page to your browser's bookmark bar.

Boomarklet generated by the Bookmarklet Creator. Thanks to markdown-css for the idea!

API

There is a simple API available to allow linking directly to particular stylesheets on the demo page. For example:

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

The above links directly to the demo with Sakura CSS.

Frameworks

Adding frameworks

If you know of a minimal framework that hasn't been included here, please create an issue or pull request so that we can add it to the list!

List of frameworks

Theme collections

See also

  • workflow - Quick prototyping script for creating rich html and pdfs from markdown documents (based on dropin-minimal-css)
  • asciidoctor-skins - CSS stylesheets for asciidoctor (with a switcher based on dropin-minimal-css)

Other similar collections

Acknowledgements

License

MIT.

More Repositories

1

libreoffice-impress-templates

Freely-licensed LibreOffice Impress templates
Ruby
326
star
2

gdcl

Command-line interface for Goldendict dictionaries
Ruby
40
star
3

stream2chromecast

Chromecast media streamer for Linux (fork of the no-longer maintained stream2chromecast by @Pat-Carter)
Python
39
star
4

ecards

Open Ecard Generator - Serverless, non-expiring electronic greeting cards
JavaScript
25
star
5

xsampa

X-SAMPA to IPA converter
JavaScript
22
star
6

amharic-transliteration

A JavaScript-based converter for transliterating Amharic text into Latin characters
JavaScript
17
star
7

jekyll-offline

Jekyll Offline - Turn any Jekyll site into an offline application with relative links
Ruby
16
star
8

elegant-circles

Elegant Themes Circle Icons in SVG format
14
star
9

units

Units - a small portable unit converter
HTML
13
star
10

yub

yub.js - A command-line for the web
HTML
12
star
11

pingyam-js

Cantonese Romanization Converter
JavaScript
12
star
12

more-stoplists

stoplists for African languages generated from the ASP corpus
Ruby
11
star
13

video-averaging

Extract frames from videos and use them to create composite average images
Ruby
10
star
14

dsl-tools

Tools for creating DSL-format dictionaries
Ruby
10
star
15

tocdown

A table of contents generator for markdown
Ruby
10
star
16

hawaiian-corpus

Data from a corpus of written Hawaiian
10
star
17

rubify

Rubify - Generator for ruby text annotations
HTML
9
star
18

openjs1k

A collection of freely-licensed js1k entries
JavaScript
9
star
19

audio-recording-guidelines

Guidelines for audio recording text narration
9
star
20

ipa-lookup

Search for pronuncations in different languages
JavaScript
8
star
21

asciidoc-kate

AsciiDoc/AsciiDoctor syntax highlighting plugin for Kate editor/KatePart
6
star
22

cast-playlist

Cast local video playlists to a Chromecast
Ruby
6
star
23

workflow

Quick prototyping script for creating rich html and pdfs from markdown documents
Ruby
4
star
24

ccmixter-download

A tool for batch downloading and streaming songs from ccMixter
Ruby
4
star
25

markdoctor

A simple online Markdown to Asciidoctor converter
HTML
4
star
26

thematic-analysis

A simple data parser to aid in the process of Qualitative Data Analysis with multimodal data
HTML
4
star
27

ebook-corpus

Ebook Corpus - A parser and extractor for electronic books
Ruby
4
star
28

mattermost-user-guide

A customizable onboarding guide for organizations using Mattermost
HTML
4
star
29

tasks-for-teachers

A tagged, reusable, open-licensed collection of teaching tasks for all subject areas
4
star
30

console-image-browser

Console Image Browser (cib) - An interactive wrapper for viewing images in the terminal
Ruby
3
star
31

pingyam-rb

Cantonese romanization converter in Ruby
Ruby
3
star
32

html-table2text

HTML Table to Text - Extract and convert HTML tables to plain text formats
Ruby
3
star
33

ipa-transcriber

IPA Transcriber - Auto-transcribe arbitrary languages into phonemic IPA
Ruby
3
star
34

bookletizer

Bookletizer - Create foldable booklets from any PDF
Ruby
3
star
35

qc-ipa

Experimental conversion of French IPA to Qu茅b茅cois
Ruby
3
star
36

forvocl

Play, list, and save Forvo pronunciations from the command-line
Ruby
2
star
37

pinyin-rb

Mandarin Chinese transcription conversion in Ruby
Ruby
2
star
38

audio-cloze-tests

Audio cloze test generator using open data
Ruby
2
star
39

cree-transliteration

A JavaScript-based converter for transliterating Cree text between syllabics and roman orthography
JavaScript
2
star
40

imagebank-explorer

Lightweight tool to explore open-licensed images from the ASP Image Bank
HTML
2
star
41

compare-columns

Quickly compare data across separate columns
HTML
2
star
42

asciidoctor-workflow

Quick prototyping script for creating rich html and pdfs from Asciidoctor documents
Ruby
2
star
43

groovebasin-ssh

Bash script to stream music over SSH
Shell
2
star
44

cmu-ipa

Scripts for converting CMU Sphinx dictionaries to IPA
Ruby
2
star
45

qownnotes-scripting

QOwnNotes scripting (developtment)
JavaScript
2
star
46

compare-prices

Compare prices - Shopping helper
HTML
2
star
47

yylc-js

Cantonese Measure Word Database Lookup
JavaScript
1
star
48

civclicker-mobile

Mobile version of the classic incremental game CivClicker
JavaScript
1
star
49

corpus-tools

A collection of scripts for working with multilingual text corpora
Ruby
1
star
50

sort-columns

Sort, uniq, reverse, and randomize data
JavaScript
1
star
51

gasp-translator

A translation frontend for the Global African Storybook Project
JavaScript
1
star
52

elements-of-a-in-b

Find matching strings in two columns using regular expressions
JavaScript
1
star
53

dohliam.github.io

JavaScript
1
star
54

storybook-jukebox

A media player for multilingual storybooks
JavaScript
1
star
55

criticmarkup-kate

CriticMarkup syntax highlighting plugin for Kate editor/KatePart
1
star
56

germanipa

International Phonetic Alphabet transcriptions of German language texts
Python
1
star
57

portable-regex

A regular expression tool with live-updating search and replace
HTML
1
star
58

currency

Currency Conversion - Generate lists of common unit conversions in a variety of currencies
HTML
1
star