#Flipclock js examples series

I just pushed a massive series of updates to the dev branch. I'll let you know when I have something to look at! I think I'll still beĪble to do that with the existing markup. One face isĪ rolling number instead of a flipping number. The markup before I finalize if anything need to be changed. I've got a couple different clock face ideas that I'll be testing with IĪm going to add the scaffolding for the styles and get some elementsĪdded either tonight or if not, over the weekend. I have meetings in San Francisco today all day. Thanks for taking the time to read my long post. Once I begin, I can post updates and ongoing discussion of the work can take place here as well. And we can make this thread the go-to for discussion on the topic for the next week or two before I start. I'd love some feedback on this if anyone else has any. I'll put something together and throw it on Codepen to illustrate this when I'm ready to move forward. With a couple minor updates to the markup, this could be fixed. Right now both of the above are a bit tricky and require a lot of browser specific stuff going on to accomplish.

Dynamic centering labels above clock face sections.

The main reasons I see the need for this: I will build an initial, static example of what I feel this markup should be with the base.scss components to illustrate this point. I am fairly certain that the project will need some updates on markup for a couple reasons. This would allow people the option to switch out themes easily with the refactored SASS and also provide examples of what is possible with the themes if someone else wants to create their own. I'd like to put together maybe 2-3 themes initially. This is the scaffolding for clock face themes to be built on. If browser normalizing is needed, it is done here. The base structure for the project is here. The project should compile without any external library dependencies. Anything used from external libraries should be added here. This file will include all mixins for the project. All variables in this file will be the defaults to give base.scss it's bare-bones structure. These variables will all be declared as !default values, so they can be overridden in default.scss files if needed. This file will include all variables for the project. This file will include all project SASS files for compiling. But for now, I feel like the above outline makes sense for the project. If it gets crazy, I may include those separately in another file.

#Flipclock js examples how to

In addition to the default face flipping, I have some ideas on how to make a glowing clock face and one that fades in.

I have considered adding in an animations.scss file, but for the time being, those can exist as mixins in the mixins.scss. Any mixins used from external libraries like Bourbon should be included in their own file so anyone compiling CSS for the project or making changes will be able to do so standalone. Additionally, the variables should be set in their own file as well. I would like the structure of the files allow for easy inclusion of different clock face themes. I know some previous discussion has taken place on the subject, but I think a consolidated thread for discussion of the topic would make sense. I wanted to outline my plans and thoughts here and get some preliminary feedback before I got too deep. I am officially putting on my calendar to start in the next couple weeks on building out FlipClock into a proper SASS structure.