Git Product home page Git Product logo

classless-css's Introduction

Classless CSS

This is a list of classless CSS themes and frameworks. "Classless" means a style sheet does not define special classes you must add to your HTML elements to style these elements. As a result, you can style any plain-HTML page just by linking to the style sheet. This is useful, for example, in prototyping.

Contents

Classless

Almond.CSS

almond-css.png

attriCSS

attricss-0-brightlight-green.png attricss-1-midnight-green.png attricss-2-darkforest-green.png attricss-3-darkfairy-pink.png attricss-4-lightfairy-pink.png

awsm.css

awsm.css-0.png awsm.css-1-gondola.png awsm.css-2-mischka.png awsm.css-3-big-stone.png awsm.css-4-black.png awsm.css-5-tasman.png awsm.css-6-pastel-pink.png awsm.css-7-pearl-lusta.png

axist

axist.png

Bahunya

bahunya.png

Bamboo CSS

bamboo-css.png

BareCSS

barecss.png

Basic.css

basic.css.png

Bolt.css

bolt.css.png

ChimeraCSS

chimeracss-0.png chimeracss-1-dark.png chimeracss-2-autumn.png chimeracss-3-blues.png chimeracss-4-golden.png chimeracss-5-nightsky.png chimeracss-6-plain.png

Classless.css

classless.css.png

concrete.css

concrete.css.png

Downstyler

downstyler.png

holiday.css

holiday.css.png

LatexCSS

latex.png

magick.css

magick.css.png

Markdown CSS — Air

markdowncss-air.png

Markdown CSS — Modest

markdowncss-modest.png

Markdown CSS — Retro

markdowncss-retro.png

Markdown CSS — Splendor

markdowncss-splendor.png

Marx

marx.png

MercuryCSS

mercurycss.png

MVP.css

mvp.css.png

new.css

new.css.png

no-class.css

no-class.css.png

Pico.css

pico-css.png

ridge.css

ridge.css-light.png ridge.css-dark.png

sakura

sakura-normalize-0.png sakura-normalize-1-earthly.png sakura-normalize-2-vader.png sakura-normalize-3-dark.png sakura-normalize-4-dark-solarized.png

Simple.css

simple-css.png

SPCSS

spcss.png

style.css

style.css.png

Stylize.css

stylize.css.png

tacit

tacit.png

Tiny.css

tiny.css-0-light.png tiny.css-1-dark.png

tty.css

tty.css.png

Tufte CSS

tufte-css.png

W3C Core Styles

w3c-core-styles-0-oldstyle.png w3c-core-styles-1-modernist.png w3c-core-styles-2-midnight.png w3c-core-styles-3-ultramarine.png w3c-core-styles-4-swiss.png w3c-core-styles-5-chocolate.png w3c-core-styles-6-traditional.png w3c-core-styles-7-steely.png

water.css

water.css-0-dark.png water.css-1-light.png

Writ

writ.png

YoRHa

yorha.png

Class-light

These are frameworks that do not force you to apply their classes to many elements but require something like <div class="container"> or a bit of your own CSS for a page to look right. They may offer optional classes to style your content.

Barrel.css

barrel.css-0-barrel.png barrel.css-1-fugit.png barrel.css-2-banderole.png barrel.css-3-scrapbook-green.png barrel.css-4-nord.png barrel.css-5-blast.png barrel.css-6-lair.png barrel.css-7-steam.png

Chota

chota.png

Fylgja

Classless setup guide.

fylgja.png

Milligram

milligram.png

mini.css

minicss.png

Picnic CSS

Caution: Picnic CSS requires specific HTML structure to display certain elements. For example, it hides vanilla checkboxes and radio buttons. The structure serves as the effective class of the element. This means an existing project will have to modify its HTML markup for, e.g., every checkbox and radio button to start using Picnic.

picnic.png

SASS-ZERO (Breadboard)

A class-light variant of a CSS framework with classes. Made for Ruby on Rails.

sass-zero.png

Wing

wing.png

See also

License

CC0

To the extent possible under law, D. Bohdan has waived all copyright and related or neighboring rights to this work. By contributing, you agree to release your contribution under the same terms.

classless-css's People

Contributors

dbohdan avatar gaeulbyul avatar vzvu3k6k avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

classless-css's Issues

Suggestion: Downstyler

Downstyler is a pet project of mine, so I'm not sure it is notable enough, but I've been maintaining it for a few years now, and feel that it fits the spirit of this compilation. Would it make sense to add it to the list?

Barrel.css?

Working on a class-light CSS theme, would this be a good fit for inclusion? It can technically be used drop-in with OK results, but it does require a small number of simple classes for the best look.

Link:https://eternityforest.github.io/barrel.css/

image

Hacking together a quick test on the standard page looks OK if kind of dated, mostly becayse the framework expects that content goes in a .window class element for the nice background, as it's designed for apps, where you might have multiple separate windows within a main tag.

image

Add Bolt.css

  • Repo: https://github.com/tbolt/boltcss

  • Demo: https://boltcss.com/

  • Description:
    Basic styles for HTML Elements. Providing a mostly-reasonable set of styles without classes.

    Use it for simple static sites or as a starting point and add your own classes. This is not a complete solution with layout grids, components, utility classes, and the like.

cc @tbolt

Still maintained?

Is this project still maintained? I notice that there's a bunch of open issues and some PRs.

image

If it's not maintained, it might be helpful to mark it as "Archived" to signal to users (like me) that it's no longer an active project.

Classification of Classless.css probably incorrect

Hi,
currently Classless.css is listed under class-light. According to the definition, a CSS file is class-light if it does "require something like <div class="container"> or a bit of your own CSS for a page to look right." This is not true for Classless.css. It looks perfectly fine without any classes or additional CSS code. It just provides some classes in case you need extra features such as cards or a grid layout.

Besides that, thank you for this list :)

Warning: Picnic uses different HTML for checkboxes

I think there should be a warning in the Picnic) section that it's "difficult to drop in an already created project".

One would assume that all the stylesheets in this repo can be dropped in easily. However Picnic can't. For example, It needs special construction to display a checkbox. The vanilla checkboxes are simply hidden. There is a warning in Picnic repo, but it's easy to miss.

Suggestion: SimpleCSS

I've been using this for a few projects and it gives a great foundation to build upon. What I like most about it is the effort around form element styling, really making sure to keep things accessible and easy to use. Happy to provide more details.
https://github.com/kevquirk/simple.css

Add 98.css

This is not a fully classless stylesheet, but it's definitely class-light.

Suggestion: PicoCSS

URL: https://picocss.com

Quotes from the homepage (emphasis mine)

Graceful & Minimal CSS design system in pure semantic HTML

Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

Not sure if this repo is aimed at purely class-less stylesheets, or whether class-light ones are accepted too. Another quote from their homepage:

Class-light and semantic

We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.

That said, they do support a fully class-less mode: https://picocss.com/examples/classless/ (SCSS sources: pico.classless.scss and pico.fluid.classless.scss).

/cc @lucaslarroche.

Suggestion: ChimeraCSS

ChimeraCSS is a project by my friend, J0hans1! I'm not sure it is notable enough, but he started with it this summer and has good motivation to continue maintaining it. Would it make sense to add it to the list?

Why:

  • Classless CSS frameworks is great for building beautiful UI, without worrying about unresponsive and unacessible elements.
  • Chimera does the element styling for you, which only leaves the layout to you.
  • For building MVPs fast and building UI without a designsystem; Chimera is a great framework.

Can you add Milligram?

https://milligram.io/

not affiliated in any way, but I used it before, and I thought it would be nice to include it.

Really awesome to be able to see screenshots of the same page at a glance. Nice idea!

I think Marx also fits the criteria for this list

Here is the URL to the Marx repo: https://github.com/mblode/marx

Marx - The classless CSS reset (perfect for Communists).

Marx is a CSS stylesheet to be used in any projects (namely small ones). If you don't need the weight of heavy frameworks or you would just like to make an edible website quickly, Marx is perfect for you. It can be used out of the minified box but it can also be customised and styled through the use of HTML classes.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.