felipefialho / css-components

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

Hi there! 😁

My name is Felipe Fialho from Brazil (🇧🇷). I've been working as Front-End Developer since 2009 and currently I'm Tech Lead at Juntos Somos Mais. I'm passionate about open source projects, so I've created some projects as Front-end BR and I've always loved to produce a lot of content during my career

In my free time I like to play (and watch) football (⚽️), bodybuilding and fitness life (🏋️), to watch movies (🎞️) and series (📺), to read books (📚), to listen to music (🎵) and eventually I like to philosophize about life with a beer (🍺)

Would you like to find me?

📽️ Some videos on YouTube 🇧🇷

• OPEN SOURCE - Como CONTRIBUIR e como FUNCIONA
• SEM JAVASCRIPT - Collapse com HTML e CSS em 5min!
• O que Front-end Developers precisam saber

📓 Some Blog Posts 🇧🇷

• Prática x Teoria - Quando aprendemos e quando entendemos?
• Variáveis CSS: Os superpoderes das variáveis nativas do CSS
• CSS Grid e Flexbox - Quando utilizar?

---

css-components's Issues

Add overlay to close Modal

Add WAI-ARIA in components

Register project in Bower

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/

Create a page "thanks for downloading"

Inspired in @bernarddeluna issue for the SennaJs

Create '.stylus' version for CSS

#15

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)
  

Adjust instructions in Collapse

input and label have the same class

Modal not centering on mobile view

The modal appears off screen on Android.

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

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.

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 {

Create link to tooltip in the readme

Smooth Scroll behavior

add in project new attribute css scroll-behavior and scroll-margin-top. the behavior of the anchors will be nicer

Update core of project

With Kratos Boilerplate

Create a README

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

Improve organization files

Add improvements in the organization of folders and files.

Add auto-play in Carousel

Component - Carousel

Create a Carousel component.

Add support for tab key navigation

Add browsers information

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.