Create new component from...

User 131545 Photo


Registered User
687 posts

Hi all,

How can I make a cc component in SD3 from pure html5/css3/js code of the foundation framework.
I would like to make all the components from the foundation Building Blocks of the Zurb Foundation website as well as all the components of the bootstrap website
Can someone explain the steps how I thus a component from only html5/css3/js code?
Once I know how the steps are what I need to do I have plans to complete sections and templates to create and make available to this free Coffeecup
Best regards

Example: ZURB Foundation Blocks


STEPHANE
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 131545 Photo


Registered User
687 posts

Subject is:

Create new component from plain HTML5/CSS3/JS code (Bootstrap/Foundation)
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Stefke, I don't think you realize the scope of what you are asking! There are heaps of building blocks in both Bootstrap and Foundation, and there is no 'one track' of steps to follow to create them. Also, in order to make them for RSD or SDv3, you need to know about which bits of code are not (yet) possible in those CC apps, and which workarounds you need to take to achieve the same result. I have over 30 of those building blocks in my sharing library, and not even one of them represents just half an hour's work. You can look at the files I have on display there and compare them to what they are on the Bootrap and Foundation sites, then you can try to find the differences and why I have had to make those differences. If you check them out thoroughly, you may perhaps learn something from that.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2846109 Photo


Ambassador
341 posts

This video that CC put up on their YT channel might help you get started. They walk you through step by step how to build a bootstrap carousel using the bootstrap docs as reference. This could be used as a guide to build other bootstrap items as well. I would start with this and then see if you have questions on other projects.

Inger was right in that the scope of what you were initially asking is really huge.

https://www.youtube.com/watch?v=xRt09ncSxbw&t=5s
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.