CSS Bed is een collectie van 'classless' CSS-thema's die bedoeld zijn als startpunt voor webontwikkeling. In tegenstelling tot traditionele frameworks hoeven gebruikers geen specifieke klassen aan hun HTML-elementen toe te voegen; de thema's stylen de standaard HTML-tags direct.
De belangrijkste voordelen zijn:
- Geen leercurve: Men kan standaard HTML gebruiken zonder documentatie voor klassen te raadplegen.
- Lichtgewicht: De thema's zijn zeer klein (enkele KB's), wat zorgt voor snelle laadtijden.
- Responsiviteit: Ze zijn standaard geoptimaliseerd voor verschillende schermgroottes.
- Compatibiliteit: Er is een brede ondersteuning voor moderne browsers.
Het project bevat een uitgebreide lijst met beschikbare thema's (zoals pico.css, water.css en sakura) en biedt een uitgebreide demopagina om de weergave van formulieren, tabellen, typografie en diverse koppen te testen.
CSS Bed
Installatie en Bijdragen
Hoe krijg ik dit thema? Plak dit fragment in de <head> van je website.
Bugs en bijdragen Heb je een bug gevonden? Wil je een thema toevoegen aan de lijst? Bekijk de broncode van cssbed op GitHub.
Beschikbare Thema's
Bekijk deze pagina in een ander classless thema:
- HTML only
- awsm.css
- bahunya
- bamboo
- bootstrap
- evenbettermotherfucking
- holiday.css
- kacit
- marx
- meyer
- minicss
- mvp.css
- no-class
- pico.css
- sakura
- sakura-vader
- simple.css
- stylize.css
- tacit
- thebestmotherfucking
- tufte
- vanillacss
- w3c-chocolate
- w3c-traditional
- water.css-dark
- water.css-light
- writ
- yorha
Waarom classless thema's gebruiken?
- Responsief: Werkt direct goed op verschillende schermgroottes.
- Goede browserondersteuning: Compatibel met moderne browsers.
- Esthetiek: Een mooie standaarduitstraling.
- Kleine omvang: Minder dan een paar KB; je verspilt geen bytes aan elk denkbaar widget.
- Geen leercurve: Gebruik HTML zoals je dat normaal zou doen, in plaats van documentatie te raadplegen om te leren welke class wat doet en vervolgens tegen het framework te moeten vechten.
Referentie: [Originele Hacker News Thread]
Is het responsief?
Absoluut! Het bevat geen ingewikkelde stijlen, waardoor het eenvoudig mobiel responsief is. Voeg gewoon de bekende responsive viewport-tag toe en je kunt aan de slag. In feite kun je deze pagina zelf proberen te schalen; je zult zien dat alles zeer vloeiend verloopt.
Elementdemo's
Dit is een demopagina ter illustratie van de beschikbare elementen.
Formulierelementen
- Email
- Gebruikers-id (alleen lezen)
- Willekeurige uitgeschakelde invoer
- Over mij (tekstveld)
- Kies een radio-knop:
- John Doe
- Jane Doe
- Johnny Doe
- Selectievakjes:
- Niet aangevinkt
- Onthoud mij
Code
Hieronder staat wat code die je kunt kopiëren met Ctrl-C.
alert(1) kan een melding tonen in JavaScript!
// Dit logt een bericht naar de console
console.log('Hello, world!')
Overig
Hieronder volgen een horizontale lijn en een afbeelding.
- Knoppen: "Dit is een knop" of een formelere "OK"
- Een blockquote (citaat)
- Vooraf geformatteerde tekst (zonder code):
|\_/| **************************** (\_/)
/ @ @ \ * "Purrrfectly pleasant" * (='.'=)
( > º < ) * Poppy Prinz * (")_(")
`>>x<<´ * (pprinz@example.com) *
/ O \ ****************************
Tabelvoorbeeld:
| Naam | Aantal | Prijs |
|---|
| Godzilla | 2 | $299.99 |
| Mozilla | 10 | $100,000.00 |
| Quesadilla | 1 | $2.22 |
Typografie
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Dit is strong, dit is normaal, dit is bold, en dit is emphasized! En hier is een link.
"The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> cite element."
— MDN, "The Block Quotation element"
Ongeordende lijst:
Geordende lijst:
- Item 1
- Item 2
- Item 3
Links met mailto:, tel:, sms: adressen:
- john.doe@example.com
- 778-330-2389
- 666-666-6666
Koppen
Kop 1
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 2
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 3
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 4
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 5
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 6
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
CSS Bed
Installatie en Bijdragen
Hoe krijg ik dit thema? Plak dit fragment in de <head> van je website.
Bugs en bijdragen Heb je een bug gevonden? Wil je een thema toevoegen aan de lijst? Bekijk de broncode van cssbed op GitHub.
Beschikbare Thema's
Bekijk deze pagina in een ander classless thema:
- HTML only
- awsm.css
- bahunya
- bamboo
- bootstrap
- evenbettermotherfucking
- holiday.css
- kacit
- marx
- meyer
- minicss
- mvp.css
- no-class
- pico.css
- sakura
- sakura-vader
- simple.css
- stylize.css
- tacit
- thebestmotherfucking
- tufte
- vanillacss
- w3c-chocolate
- w3c-traditional
- water.css-dark
- water.css-light
- writ
- yorha
Waarom classless thema's gebruiken?
- Responsief: Werkt direct goed op verschillende schermgroottes.
- Goede browserondersteuning: Compatibel met moderne browsers.
- Esthetiek: Een mooie standaarduitstraling.
- Kleine omvang: Minder dan een paar KB; je verspilt geen bytes aan elk denkbaar widget.
- Geen leercurve: Gebruik HTML zoals je dat normaal zou doen, in plaats van documentatie te raadplegen om te leren welke class wat doet en vervolgens tegen het framework te moeten vechten.
Referentie: [Originele Hacker News Thread]
Is het responsief?
Absoluut! Het bevat geen ingewikkelde stijlen, waardoor het eenvoudig mobiel responsief is. Voeg gewoon de bekende responsive viewport-tag toe en je kunt aan de slag. In feite kun je deze pagina zelf proberen te schalen; je zult zien dat alles zeer vloeiend verloopt.
Elementdemo's
Dit is een demopagina ter illustratie van de beschikbare elementen.
Formulierelementen
- Email
- Gebruikers-id (alleen lezen)
- Willekeurige uitgeschakelde invoer
- Over mij (tekstveld)
- Kies een radio-knop:
- John Doe
- Jane Doe
- Johnny Doe
- Selectievakjes:
- Niet aangevinkt
- Onthoud mij
Code
Hieronder staat wat code die je kunt kopiëren met Ctrl-C.
alert(1) kan een melding tonen in JavaScript!
// Dit logt een bericht naar de console
console.log('Hello, world!')
Overig
Hieronder volgen een horizontale lijn en een afbeelding.
- Knoppen: "Dit is een knop" of een formelere "OK"
- Een blockquote (citaat)
- Vooraf geformatteerde tekst (zonder code):
|\_/| **************************** (\_/)
/ @ @ \ * "Purrrfectly pleasant" * (='.'=)
( > º < ) * Poppy Prinz * (")_(")
`>>x<<´ * (pprinz@example.com) *
/ O \ ****************************
Tabelvoorbeeld:
| Naam | Aantal | Prijs |
|---|
| Godzilla | 2 | $299.99 |
| Mozilla | 10 | $100,000.00 |
| Quesadilla | 1 | $2.22 |
Typografie
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Dit is strong, dit is normaal, dit is bold, en dit is emphasized! En hier is een link.
"The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> cite element."
— MDN, "The Block Quotation element"
Ongeordende lijst:
Geordende lijst:
- Item 1
- Item 2
- Item 3
Links met mailto:, tel:, sms: adressen:
- john.doe@example.com
- 778-330-2389
- 666-666-6666
Koppen
Kop 1
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 2
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 3
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 4
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 5
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Kop 6
Een paragraaf <p> met lorem ipsum na de kop. Cascading Style Sheets (CSS) is een stylesheet-taal die wordt gebruikt voor het beschrijven van de presentatie van een document dat is geschreven in een opmaaktaal zoals HTML. CSS is een hoeksteen-technologie van het World Wide Web, naast HTML en JavaScript.
Groetjes,