☝️One
. Many possibilities.

Overview

SingleDivProject

Single Div CSS

☝️ One <div>. Many possibilities.

What is this?

This project focuses on exploring all the possibilities that can be done with a single <div> element using CSS only.

Why?

  1. Great way to explore CSS properties.
  2. Restrictions forces you to learn new properties and different ways to do particular styling.
  3. Because we can.

How to contribute?

Please go through the Contributions guidelines before sending a pull request.

Reddit threads

  1. What all can you do with a single <div> element using pure CSS? Check this out! on /r/programming/
  2. One <div>. Many possibilities. on /r/web_design/
  3. One <div>. Many possibilities. on /r/coolgithubprojects/

Demos

Designs

Project Name Your Name / Github Handle Demo/Gif
Battery manrajgrover
Hamburger Menu manrajgrover
Magnifying Glass kamito98
New Instagram Logo manrajgrover

Loaders

Project Name Your Name / Github Handle Demo/Gif
Awesome Dots manrajgrover
Bouncing Ball mtacchino
Box Loader AnubrataDS
Clock richardj
Dot Loader aaroniker
Fill up manrajgrover
Iron Factory NorthernTwig
Revolving Circles dcrousso
Revolving Dots dcrousso
Ripple Effect manrajgrover
Play Loader manrajgrover
Simple Spinner manrajgrover
Simple Text Loader manrajgrover
Melting Ice Cream Loader TaranVohra

Flags

Project Name Your Name / Github Handle Demo
Armenia manrajgrover
Austria manrajgrover
Bahamas manrajgrover
Bangladesh manrajgrover
Belgium AndyMathys
Brazil esganzerla
Bulgaria manrajgrover
Chile adavis46
Canada Scott Kaye
Cameroon 1forh
Colombia DHernandex
Czech Republic fadilf
Denmark jacksarick
England TheWebartist
Finland jacksarick
France manrajgrover
Germany manrajgrover
Greece jdhoek
Hungary jabbalaci
India fadilf
Indonesia karuna
Ireland skeevey
Israel hillai
Italy manrajgrover
Ivory Coast skeevey
Japan manrajgrover
Laos jamcgrath
Latvia vasiljevs
Lithuania fosron
Nigeria skeevey
Pakistan ObaidAshraf
Poland mschweichler
Puerto Rico aallfredo and jorluiseptor PuertoRico
Russia ad222kr
Senegal Death259
South Africa DHernandex
Sierra Leone ts96
Suriname adavis46
Sweden jacksarick
Switzerland thijswerrij
Syria iSWORD
Taiwan amowu
Texas domspad
Thailand jamcgrath
The Netherlands jdhoek
Turkey mehmetuken
United Kingdom jdhoek
United States of America jdhoek
Yemen Death259

Tools

Project Name Your Name / Github Handle Demo/Gif
Box Breathing gnclmorais

License

MIT © Manraj Singh

Comments
  • unify the dimension of the flags

    unify the dimension of the flags

    Currently the flag screenshots are all different. There should be a guideline about 1) the size of these images, and 2) the size of the margins around the flags.

    enhancement suggestion need more info 
    opened by jabbalaci 9
  • Suggestion : Update README

    Suggestion : Update README

    An introductory paragraph (even a few lines) in the readme would be awesome !

    I stumbled across this project while browsing interesting repositories , and at first was unable to understand what this was all about. After a few minutes I understood it , and i really like the concept .

    suggestion need more info 
    opened by AnubrataDS 8
  • Union Jack

    Union Jack

    Flag of the United Kingdom.

    It's a national holiday here in the Netherlands, and I kept wondering if there was another interesting flag to tackle. This one took a bit of trigonometry to solve. :gb:

    opened by jdhoek 5
  • Flag of the United States of America

    Flag of the United States of America

    I had to make it bigger in order for the stars to render properly, so you may want to classify this one as unconventional or experimental.

    Because of the use of a glyph (U+2605 BLACK STAR) this flag may not look right on every operating system. This is how it looks for me:

    usa

    opened by jdhoek 4
  • Singlediv/emoticon add

    Singlediv/emoticon add

    Description of new feature, or changes

    Added a new emoticon (smiley) created entirely using a single div and pure css

    Capture

    Checklist

    • [ ] Your branch is up-to-date with the base branch
    • [ ] You've read the Contributions guidelines.

    Related Issues and Discussions

    People to notify

    opened by sankshitpandoh 0
  • Support SVG assets

    Support SVG assets

    Prefer SVG over PNG; as it could be reused and controlled for consistency. Could we figure out how to get the SVG assets to display correctly in the README.md on Github. I tried to pull the SVG from "rawgithub" with no luck. This SVG support implementation seems to be changing constantly.

    Any thoughts?

    enhancement suggestion need more info 
    opened by module17 4
  • Re-use `css-flags`

    Re-use `css-flags`

    Awesome project,

    Maybe you would be interested in css-flags (repo) where I did 170 flags with one div :)

    image

    I'd be happy to contribute, but copy-pasting the code form one repo to another won't be the most effective way to maintain it. Maybe just a link between projects, or a git submodule?

    enhancement suggestion need more info 
    opened by pixelastic 2
Owner
Manraj Singh
Open Source Community Leader @duckduckgo and Contributor @tensorflow, mainly TensorFlow.js, @mozilla, @jquery and more!       Past: @practo
Manraj Singh
Material Design Based One Page HTML Template

Material Design One Page HTML Template MD One page template is fully responsive and free to use. This HTML template is based on Materialize, a CSS Fra

Joash 585 Aug 31, 2022
A simple, one page, Bootstrap HTML website template created by Start Bootstrap

Start Bootstrap - One Page Wonder One Page Wonder is a basic one page template for Bootstrap created by Start Bootstrap. Preview View Live Preview Sta

Start Bootstrap 317 Sep 19, 2022
Free responsive one page portfolio template

Portfolio one page template - ARCHIVED Flat and responsive website template, designed and coded by Maxim Orlov. Demo: http://website-templates.github.

Website templates 155 Sep 20, 2022
🖼️ ― Change profile picture on multiple platforms in one exec

??️ puro Change profile picture on multiple platforms in one exec $ puro -i ./image.png -c ./config.yaml ?? Usage Binary incoming For now, the instruc

Faye Keller 9 Feb 2, 2022
A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.

Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima

Richard Hung 38 Jun 4, 2022
A JavaScript library allowing the creation of manually resizable div elements.

Resizable.js A JavaScript library allowing the creation of resizable html divs. Try the live demo! Setup Link to both resizable.js and resizable-style

null 43 Aug 22, 2022
Download all Moodle files with one click. This is a Chrome extension built to save time and effort from downloading files manually one by one!

Moodle Downloader Extension Moodle downloader extension for Chrome. The extension is tested with both the TUM moodle and the official moodle demo. Not

Zhongpin Wang 7 Sep 10, 2022
Code Scanning/SAST/Static Analysis/Linting using many tools/Scanners with One Report - Scanmycode Community Edition (CE)

Star it If you like it, please give it a GitHub star/fork/contribute. This will ensure continous development ⭐ TLDR; To install it. Install docker and

Marcin Kozlowski 289 Sep 16, 2022
All in one YouTube App with downloader , background player and many more features.

YT PRO Download YT PRO Features Video Downloader Ads Blocker Picture in Picture Mode Shows Number of Dislikes Background Audio Player Auto Updation of

Prateek Chaubey 12 Sep 14, 2022
Execute one command (or mount one Node.js middleware) and get an instant high-performance GraphQL API for your PostgreSQL database!

PostGraphile Instant lightning-fast GraphQL API backed primarily by your PostgreSQL database. Highly customisable and extensible thanks to incredibly

Graphile 11.5k Sep 26, 2022
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

#One Page Scroll 1.3.1 by Pete R. Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by Pete R., Fou

Pete R. 9.6k Sep 15, 2022
Zenload - "Load couple loaders and apply transform one-by-one

Zenload Load couple loaders and apply transforms one-by-one. Install npm i zenload -g How to use? With env vairable ZENLOAD: NODE_OPTIONS='"--loader

coderaiser 1 Jan 25, 2022
video-chat-app Fully functional one-to-one video calling feature.

video-chat-app Fully functional one-to-one video calling feature.

suraj ✨ 5 Sep 5, 2022
A multipurpose bot, a clan bot, a all in one bot. The one bot u need for ur server originally made as Milrato discord Bot and by Tomato6966.

Public Bot and Support Server! Invite the Public Version of this Bot so you don't need to host it by yourself or join my Discord server to get a custo

Tomato6966 430 Sep 25, 2022
⛺️ Tipi is a homeserver for everyone! One command setup, one click installs for your favorites self-hosted apps. ✨

⛺️ Tipi — A personal homeserver for everyone ⚠️ Tipi is still at an early stage of development and issues are to be expected. Feel free to open an iss

Nicolas Meienberger 3.8k Sep 17, 2022
A real time Web-App for one to one chatting.

We-Vibe A real time web-app for one to one chatting. The project is broadly divided into two parts - Server and Public (client). The Socket.io module

Sushmita Kumari 5 Aug 19, 2022
Give your JavaScript the ability to speak many languages.

Polyglot.js Polyglot.js is a tiny I18n helper library written in JavaScript, made to work both in the browser and in CommonJS environments (Node). It

Airbnb 3.5k Sep 22, 2022
A jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

#jPanelMenu ###Version 1.4.1 jPanelMenu is a jQuery plugin for easily creating and managing off-canvas content. Check out the demo (and documentation)

Anthony Colangelo 928 Aug 16, 2022