FlipClock
FlipClock copied to clipboard
objectivehtml
Approaching 1.0: SASS & Markup
I am officially putting on my calendar to start in the next couple weeks on building out FlipClock into a proper SASS structure. I wanted to outline my plans and thoughts here and get some preliminary feedback before I got too deep. 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.
SASS Structure
I would like the structure of the files allow for easy inclusion of different clock face themes. Additionally, the variables should be set in their own file as well. 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.
- flipclock.scss
- core
- _variables.scss
- _mixins.scss
- _base.scss
- themes
- _default.scss
- core
I have considered adding in an animations.scss file, but for the time being, those can exist as mixins in the mixins.scss. In addition to the default face flipping, I have some ideas on how to make a glowing clock face and one that fades in. If it gets crazy, I may include those separately in another file. But for now, I feel like the above outline makes sense for the project.
flipclock.scss
This file will include all project SASS files for compiling.
_variables.scss
This file will include all variables for the project. These variables will all be declared as !default values, so they can be overridden in default.scss files if needed. All variables in this file will be the defaults to give base.scss it's bare-bones structure.
_mixins.scss
This file will include all mixins for the project. Anything used from external libraries should be added here. The project should compile without any external library dependencies.
_base.scss
The base structure for the project is here. If browser normalizing is needed, it is done here. This is the scaffolding for clock face themes to be built on.
_default.scss
Themes will extend the base.scss styles. I'd like to put together maybe 2-3 themes initially. 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.
Project Markup
I am fairly certain that the project will need some updates on markup for a couple reasons. I will build an initial, static example of what I feel this markup should be with the base.scss components to illustrate this point.
The main reasons I see the need for this:
- True responsive clock
- Dynamic centering labels above clock face sections
Right now both of the above are a bit tricky and require a lot of browser specific stuff going on to accomplish. With a couple minor updates to the markup, this could be fixed. I'll put something together and throw it on Codepen to illustrate this when I'm ready to move forward.
Feedback
I'd love some feedback on this if anyone else has any. And we can make this thread the go-to for discussion on the topic for the next week or two before I start. Once I begin, I can post updates and ongoing discussion of the work can take place here as well.
Thanks for taking the time to read my long post.
This is pretty awesome. Can't wait to see what you come up with. I can handle the markup changes.
In addition to the other things that have been discussed, one of the things I would love to change about the library is removing its dependency on numbers. I could see having alpha-numeric clocks with the same flip effect. Not sure what the real application would be, but a few people have asked for the functionality and from a technical perspective, I fail to see how a letter is an any different than a number and the API should be able to handle it.
The letter vs number topic as far as clock faces will be independent of the styles themselves, which is good news. You'll be able to continue developing the API to allow whatever characters people want to apply to the clock face.
I'll look over the markup when I do proof of concept. From a semantic standpoint, it may make sense to change class names on the clock face if they are not numbers, but I could be wrong. I'd like to try to keep the markup from changing dramatically if we can. But from what I have seen, in order to get some of the responsive styles and dynamic placement going on, there may be no way around it.
@objectivehtml You can assign this issue to me if you would like, too.
One of the key components to the markup and the flip effect that I don't think we can change is the list structure. Or unless you can craft another (better) way to get the flip effect. It also seems that other themes would work better with different markup, but this markup was taken from that codepen example a long time ago.
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
Thoughts? Will this cause a problem?
How do I assign this issue to you? I just accidentally assigned it to myself.
@objectivehtml Not sure. You may have to assign me as a contributor to the project?
Regarding that markup for the flipping of the face, I do not think I will need to change it. But if I do, I will definitely have a different CSS face transition in place for whatever I come up with. That structure makes sense to leave there and should probably not cause any issues with creating other clock face styles like glowing numbers, etc.
All of these changes seem like good next steps for FlipClock and I'm looking forward to seeing them be implemented. As you get closer to the point in time where you are going to be implementing this and start breaking out what the work is going to be I'm very open to helping out with some of the changes if you would like to distribute the work load.
@KyleMcNutt that sounds great. What I can do is loop you in on the process as soon as I get the default theme in place. And if you want to contribute another theme, that would be fantastic. The more examples of themes for people to pick from, the easier it should be for them to create their own.
Another note for the project since it just popped into my head because of themes... we should probably have an example page to test each clock face theme. Or possibly have an option on the main flipclock.js page to switch between the different clock face options. Maybe both?
I like the idea of changing the flipclock.js site to reflect the selected theme. I also like example of each.
Here is an example of another theme I like. For some reason the flip effect only works on the first tick, but you can see my point. I really love this flip effect (when it's working properly)... It use to work, not sure what happened.
http://codepen.io/rikschennink/details/lyuaf
I'm going to say both. I think if people find the project via the GitHub repo will want to be able to show off different clock face themes in the examples folder, but if they find the project via the flipclock.js page then there going to want to be able to play around with different themes there as well.
Maybe having like a "Kitchen Sink" playground example which includes options to switch between all the different themes and you could see what the clock looks like at different resolutions, etc, might be a good idea? Then having the same code on the flipclock.js page?
@objectivehtml Hmm. Yes, I like that idea as another theme as well. And the fact that the overall aesthetic is a lot more flat. Should be easy enough to achieve.
It's possible that we may want to allow the transition to be controlled as a setting in the js. This way someone could use that same simple clock face but still use the folding flip transition, the rotating one like you see in your example, or perhaps a number of other css3 animation options.
@KyleMcNutt Exactly what I was thinking, too. Have a theme examples folder that has a static html page that fires an example instance of the js to show how the clock face looks for each theme. And having examples in both flavors allows people to integrate the project however they feel comfortable.
I just made a new "dev-1.0.0" branch for us to work and get this new version going. I am thinking about a series of changes on my end and refactoring the API's to be more coherent and easier to use/extend. Likely going to be some breaking API's changes, but will be for the better.
Looking forward to seeing what you do so I can make further improvements.
Thanks, Justin:
I'll actually dive into this a bit probably sometime this evening and start getting things set up. I think I might actually make a static test.html for doing the styling on just to make things easier. And this way if I have to make any markup changes in 1.0, you'll have a guide for that.
Regards, Brian -- BRIAN ESPINOSA UI/UX Designer, Font-End Developer 1105 Carey Dr. | Unit 201 | Concord, CA 94520 direct: 925.360.0035 office: 415.964.0444
Justin Kimbrell wrote:
I just made a new "dev-1.0.0" branch for us to work and get this new version going. I am thinking about a series of changes on my end and refactoring the API's to be more coherent and easier to use/extend. Likely going to be some breaking API's changes, but will be for the better.
Looking forward to seeing what you do so I can make further improvements.
—Reply to this email directly or view it on GitHub.
I just pushed a massive series of updates to the dev branch. This is a great start to the new v1. The individual components are each more simple. I really focussed on proper abstractions and reusable/extendible components.
I also added the ability to have alphabetical clocks, so numbers aren't even a requirement anymore. This will definitely pave the way for the edit you make and then making all the responsive stuff work properly.
This is exciting. I'll pull these in tonight. I have meetings in San Francisco today all day. I am going to add the scaffolding for the styles and get some elements added either tonight or if not, over the weekend.
I've got a couple different clock face ideas that I'll be testing with the markup before I finalize if anything need to be changed. One face is a rolling number instead of a flipping number. I think I'll still be able to do that with the existing markup.
I'll let you know when I have something to look at!
Regards, Brian -- BRIAN ESPINOSA UI/UX Designer, Font-End Developer 1105 Carey Dr. | Unit 201 | Concord, CA 94520 direct: 925.360.0035 office: 415.964.0444
Justin Kimbrell wrote:
I just pushed a massive series of updates to the dev branch. This is a great start to the new v1. The individual components are each more simple. I really focussed on proper abstractions and reusable/extendible components.
I also added the ability to have alphabetical clocks, so numbers aren't even a requirement anymore. This will definitely pave the way for the edit you make and then making all the responsive stuff work properly.
—Reply to this email directly or view it on GitHub.
As I am laying out the files for this, rather than having people include and compile their themes based on the scss files, I think I am going to keep the reset/base styles as one style sheet and then have each theme be its own style sheet. So you'll include the flipclock.css and then a default.css (theme) directly after. What are the thoughts on this? I could also set it up to where the theme imports the reset and base styles as well and then there is only a single include. The pros to this would be a single file call and it would also allow you to override any scss variables inside the reset and base scss... which would allow for others to make more complex themes if they wanted.
Hmm.... I wish there were some more people that specialize in that sort of thing that would comment on this. As previously states, I don't use sass personally, so it's hard for me to comment beyond my experience with other libraries in relation to the design patterns they use. I think it's more common to see the former approach with a base file and theme file. A very popular date picker library does the same thing, http://amsul.ca/pickadate.js/. But I also see your point of leveraging the real power of the scss variables and having a truly extendible themes API. As a programmer and engineer, I tend to always opt for decoupling components when necessary so if I had to vote either way with my limited knowledge of sass, I would have to opt to go with a base file and theme file.
Thinking of strict OOP design, is it possible to have a base theme file which the default theme would extend? I am not sure how scss works on a technical level, but this seems like it should be possible. So in theory on the front-end the user would only include "default.css", which extends "flipclock.css" base styles. Again, not even sure if this solves the problem but just a thought.
There are definitely pros and cons to each. Personally I am leaning a bit more towards a base CSS file and then a theme CSS file to include afterwards. This will make implementation easier for less experienced users I think. And anyone who wants to do more, they could always take the separate SCSS files and compile/minify them as they see fit with minimal effort. In my own projects I'll definitely be compiling one minified file. But I am leaning towards separate files for an open source project like this for ease of implementation. Sounds like we both feel the same way on this.
Getting eager to see what you are cooking up over there! :)
I am ready to implement your new markup changes whenever. I literally abstracted every component of FlipClock. The new dev branch is really shaping up and pretty much finished with my changes until you have the new responsive stuff finished (no rush btw).
I also have the new docs written to cover the new change with some new examples, better explanations, and I moved the legacy docs to a new page for people still reference (since the dev branch is a breaking change). I could give you access to the flipclockjs.com repo if you are interested in working on the docs. It's on Bitbucket (it's private) because it uses a commercial CMS so I can't expose the code without permission. It's a flat file CMS, so it's really easy to setup locally.
I keep getting pulled away on other projects, unfortunately... but I think I should have a huge chunk of time in the next few days to get something pushed to the dev repo to check out. I keep refactoring as I push things around and separate the logical items for framework versus actual theme.
Go ahead and send me access to that repo. My username on there is the same as here.
Is the CMS you are using Craft?
No worries, I know how it goes. I am actually using Statamic for this site. I have considered switching it to Craft CMS (which I love) but I am not sure we need a dashboard/publishing UI, admin logins, or a database. Right now it's built as a file driven CMS, so only PHP is needed (no db required).
Ok so I mistaken. Bitbucket is not where I am hosting the repo for the docs. It's actually on Beanstalk for automatic deployments. What email should I send the Beanstalk invite to?
What ever happened to this enhancement? It would be REALLY helpful right now.
I'm also wondering what happened to this? I've just used the clock in quite a fun project however I had to do some hackery due to inflexible nature of the current theme.
