felipefialho / css-components Goto Github PK

View Code? Open in Web Editor NEW

682.0 28.0 126.0 967 KB

:coffee: A set of common UI Components using just the power of CSS and without JavaScript.

Home Page: https://css-components.felipefialho.com/

License: MIT License

JavaScript 14.18% HTML 45.03% Stylus 40.80%

pure-css purecss css-components carousel collapse tooltip modal css no-javascript components

css-components's Introduction

⚠️ Disclaimer

This is an old project, when I made it in 2014 I was tried use some possibilities about HTML/CSS and I loved the result. So I know a lot of people that used these components in production projects (I've used a lot of times).

But the things changed in the nexts years and there are better choices to made these components.

So I just maintain this project as an experimental thing and I probability won't make changes anymore.

But you is free to use it as you want 😁❤️

A set of common UI Components using the power of CSS and without Javascript

View the project

Install

Install via Bower or download the zip

bower install css-components

Components

Browser Support

	Chrome	Firefox	Edge	Safari
Android	Yes	Yes	Yes	Yes
iOS	Yes	Yes	Yes	Yes
Mac OS X	Yes	Yes	Yes	Yes
Windows	Yes	Yes	Yes.	Yes

* CSS3 transitions are not supported in IE8 and below. ** Janky z-index. See tooltip on right example.

Notes:

Most tests performed with Browserstack.
Components that perform action on hover may not work on touchscreens eg. dropdown with hover. Oddly tooltip does work. Bootstrap mentions this, “Sticky :hover/:focus on mobile. Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make :hover ‘sticky’. In other words, :hover styles start applying after tapping an element and only stop applying after the user taps some other element.”
Probably the main reason why the components fail in earlier versions of IE is because they use advanced CSS selectors which aren’t supported. It may be possible to patch this with the use of something like selectivizr. This may defeat the purpose of using these javascript free components but on the other hand it may be acceptable for older IE.
The components do not fail gracefully. In most cases some elements are visible but interaction will not have any effect. The carousel component won't show anything.
Some layout issues with tab when wrapping on smaller screen sizes.
Weird flash when carousel loops around to first slide.

Contributing

Please read this Coding Style for Issues, pull requests and coding standards.

All changes must be made in /dev folder. The CSS should be modified using the Stylus preprocessor.

Getting Started

# 1. Fork this repository and clone it into the current directory
git clone https://github.com/<your-username>/css-components.git

# 2. Navigate to the newly cloned directory
cd css-components

# 3. Install the dependencies
npm install

Development

# For start the server, watching your .styl files changes and compile CSS
grunt w

Pull Requests

# Compress zip files
grunt build

# Build the project for deploy
grunt dist

# View your project release in GhPages
https://<your-username>.github.io/css-components/

# Open your Pull Request

License

MIT License © Felipe Fialho

css-components's People

Stargazers

Watchers

Forkers

viniciuspalma thelovatine sudok mateusocana raphaelfabeni mendesgabriel mirkovnemanja daireof rafaelkowal lanamilley czegarram jjsanbra anima-t3d jslayer vitorbritto thulioph paulahfaria colin-johnston suissa lupel31 juniorth6 quanganhcnt50 morav hisawo viniciusdacal mangemannen66 prescindivel james22214 jachi-didz deividmarques renanveroneze williansabiao nikmagas praveen-innocent fredguimaraes esaky fredericodietz fredericksilva beingsane loremipsum31 zer00ne fdaciuk pablodarocha lesleyandrez afonsopacifer danvitoriano shelsonjava creative-srijon user-hejun eddyeantunes privatemousse csscode mosoc icaro-snts dukenst2006 furabio joaoguibune rifal89 webmansa gustavoquinalha kvnol cechinel leonardosouzafaria eyecandy91 abwas academy-codex jquimera narasimhadvnr angelilton joncancode lucasfdorea denysonsoares viro24 loyolakain wumeilian prime417 dreecarvalho schirrel evilloop thepembeweb adrianolupossa danielvieira7 vrsarmento princevasconcelos sparrowzoo brendacosta danielsidev pissulin alexaugustobr eduardotrandafilov eduhique mallickhruday rosalesnikho luizcostaa gabrielroodriz bsrahma loycestunna arismag jwebdev14 valchanoficial

css-components's Issues

Improve organization files

Add improvements in the organization of folders and files.

Add overlay to close Modal

Collapse: Suggest moving checkbox to allow increased styling possibilities

Would it be ok to move the checkbox .collapse-open in front of .collapse-btn? By doing this it is possible to style .collapse-btn based on the open/closed state. For example background color, font weight or an icon as in the following example:

https://jsfiddle.net/mrgiao/2xfuwaLq/

Browser tests: Android 4.0

I used Sauce Labs to did this tests.

Carrousel works fine, but without animation
Collapse does not work.
Dropdown does not work.
Dropdown with hover works fine (using tap)
Modal does not work
Tab does not work
Tooltip woks fine (using tap)

Change CSS of '.less' for '.stylus'

Include some components in Picnic CSS

I am the creator of Picnic CSS and I've found out about CSS Components recently... and I love it! (:

After investigating each of them, I find the components Tab and Tooltip specially useful for including them in Picnic CSS as plugins. I already have a modal plugin in my library, otherwise I'd include it too.

From your MIT license I will adapt them for my library needs (not so many classes, SASS), however I wanted to let you know that I'll base these plugins in your great set of Pure CSS components as ir shares a lot in common with Picnic CSS ideas.

Create a README

Component - Carousel

Create a Carousel component.

Tab.css/.zip issues

It seems to me that the following should not be in the build/tab.css file:

@media (max-width: $screen-xs-max) {
}
@media (min-width: $screen-sm) {
}
@media (min-width: $screen-sm) {
}

There might be a typo as well here: "painel" > "panel"?

.tab-painel {
display: inline-block;
min-height: 150px;
}
.tab-painel .tab-open {

Modal not centering on mobile view

The modal appears off screen on Android.

Add auto-play in Carousel

Documentation regarding browser support needed

Would appreciate a quick summary of browser support for each component in the Readme. A bit like what you did in this pen: http://codepen.io/LFeh/pen/oEula

Adjust instructions in Collapse

input and label have the same class

Add WAI-ARIA in components

Create link to tooltip in the readme

Create a page "thanks for downloading"

Inspired in @bernarddeluna issue for the SennaJs

Testes de suportes em navegadores

Testei principalmente o collapse e consegui fazer rodar do IE9, obviamente precisei usar um fallback JS para o IE entender o :ckecked, mas fora isso o outro problema é que o IE9 não entende o atributo hidden, por isso o input radio (ou check) fica aparecendo.

A solução foi adicionar:

.collapse-open {
  display: none;
}

E também o http://selectivizr.com/ como fallback caso o navegador seja IE9 ou inferior.

Eu sei que a idéia é fazer Pure CSS, porém o fallback é apenas para forçar ao navegador entender alguns seletores CSS3 como o :checked. Acredito que com isso possamos extender o suporte dos componentes.