manrajgrover / singledivproject Goto Github PK

View Code? Open in Web Editor NEW

1.6K 35.0 105.0 3.93 MB

☝️One <div>. Many possibilities.

License: MIT License

HTML 100.00%

css html single-div div drawing

singledivproject's Introduction

SingleDivProject

☝️ 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?

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

How to contribute?

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

Reddit threads

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
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

singledivproject's People

Contributors

Stargazers

Watchers

Forkers

silky charlesponti petertonoli joskid diego-codes adavis46 isword alexdriaguine us1415 karuna suyogrk skeevey mtacchino arunkant aallfredo death259 joshmweinstein shahinism tarekcodes josevill fresnik jcalado carabina module17 ferrx dreamsql liudou sandeepl337 a314s jamiewilbraham mteeney01 netham91 thewebartist kendratang 1forh mschweichler jocanas jamcgrath miickiie fionacodes prabhat112 jerluc quinntynebrown pi0 ezhangle e- guoshuang vovkkk fadilf bradparks mohits10 naman1901 napoleon101392 jkirchartz seekwe nullgorithm esganzerla chapel-of-bools rossonero bdvx obaidashraf anubratads dimidd fosron sjmarve domspad archer-christ richardj amowu gnclmorais zjc081608 dcrousso bjliwei azurebyte tahir-shahzad4 coder698 vatsalsura vasiljevs nitinreddy3 ericjiang2017 ntwigs abmantha tauhidul0821 yaokaiqd taranvohra kamito98 saba9-al-khir kgriffiths skatersezo kelimuttu defianceblack bjpandey suryarajsingh vipinkhushu jra0299 mejtfk sankshitpandoh karthik-nayak98 disat sandip0149

singledivproject's Issues

Create Pull Request Template for the project

Create Pull Request Template for the project and add it to /.github folder. Discuss here.

Play Loader code not working properly

I tried running the Play Loader code on windows 8.1 on the browsers Firefox 47.0 and IE 11 and the results were quite weird :-

On Firefox 47.0 :-

On IE11 :-

Re-use `css-flags`

Awesome project,

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

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?

Create Issue Template for the project

Create Issue Template for the project and add it to /.github folder. Discuss here.

Suggestion

An option to be able to remove the yellow lines.

Share more ideas/fields that can be explored in this project

Let's discuss here

Update README.md with Demos

Add Demos(GIFs or Screenshot) for every element provided here along with how to use it.

Suggestion: jsfiddle

Might be nice to include a jsfiddle or something similar in the readme.

Example: https://jsfiddle.net/xk48313a/

Host on gh-pages

Move branch to gh-pages branch and host it all there using iframes.

Any thoughts on this?

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 .

Iran flag

Dear,

Please add iran flag.

Thanks in advance.

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?

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.