importing pre built foundation...

User 1789302 Photo


Registered User
24 posts

I asked once, and got no answer. How do I import pre-built components from the Foundation 6 website into the RSD v2 component library? I searched the board and the site here and got no hits.
Thanks
User 244626 Photo


Registered User
811 posts

Coffeecup RSD 2.0 with Foundation already has those components in one of the blank themes named blank with components or if you load a blank project they may be listed in the new library. To my knowledge, Foundation does not provide a location you can go get the pre-built components.
Bootstrap 5 CSS Grid.
User 2706435 Photo


Ambassador
444 posts

I read your post. The Equalizer is a js plugin that comes with Foundation. Its used by setting the attributes of an element, and another element.

You can nest container in RSD 2. If you want to nest columns or rows in anything, you will need to insert a subgrid and change its default os two rows of one column and two columns to whatever you like. But that would be, in my opinion too much for just two pictures. Use a container, and use flex properties. In RSD, there is now a new component from Coffeecup pre-built with a tab, and a picture, I was able to ad a picture beside it, by changing the float properties. If you need to place a container in it (or any element)- find it in the inspector pane and readjust where it goes, and add elements to it - its a little tricky and a UI think that CC will improve someday I hope, but it can be done if you use the inspector pane.
User 1789302 Photo


Registered User
24 posts

Thanks Bill,

I used that tab component, but it took all kinds of gyrations to get the images to manually center reasonably at my various breakpoints. Using inline-block I ended up manually having to change maxsize, set 50% width on both pics, and manual l/r margins to do it. Auto did not work.
The question still stands. How do I add pre-built components from the foundation site into the rsd component library. There is no add in folder, or file button like there is for images in the resource library. I found the folder for foundation components in the program file folder. There are two files for each component, a png and a ccomp file. How do I generate them from the code on the foundation site? After conversion can I just copy them manually into that library file and they will appear in the component section of RSD?

Thanks,

Bob
Attachments:
User 2706435 Photo


Ambassador
444 posts

There are not standard components. You'll need to build them yourself.
User 2706435 Photo


Ambassador
444 posts

I suggest doing this. Go to the tab you want to edit, below the lowest breakpoint (Foundation is a mobile-up framework, changes cascade up, until you give it new styles at breakpoints. show its contents in the inspector pane, and hide the other tabs.

Now - you can do whatever you want in this tab. RSD is always tricky about moving content to a container or a column. Usually its best to temporarily give the container or subgrid some larger dimensions, or moving things in the inspector panel.

Under the tab - there is a container - it had an id - as required for the javascript to target it. Its probably best to put container in this container for content, or a subgrid. I deleted everything except for the tab's main container. and added a container. To the container, I added two pictures. They stacked on top of each other. The container I added, I changed its position to flex, and the direction to row (if it was not already row), and changed the justify to center. The two pictures are now centered in that tab for all breakpoints. That is all you have to do.

Now - there does seem to be an issue with containers when using justify space-around or space-between. But those justifications will work in a column though. So if you want that justification, add a subgrid, and delete the second row. I created for myself a subgid single column component to save the trouble whenever I want just a column.
User 2706435 Photo


Ambassador
444 posts

Here is a demo.
I took some liberty for the picture element styling, and placed the pictures in a subgrid column. You will see the display properties of that subgrid column. The pictures are center screen at all breakpoints. You will have to download the project file from this dropbox account.

TAB-DEMO.rsd
User 2440486 Photo


Registered User
11 posts

I am frustrated. Very few components are available in RSD and the one I really want is the drop down menu. I am using the primitive BUTTON>page with menu>items architecture and while it is easy and flexible, I would prefer the more professional item menu to be drop down. I purchased Bootstrap, I purchased Foundation and have no use for yet another web program. RSD is up to date and is just fine for now.
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Could you be a bit more precise, then we might be able to help. RSD has a few drop-down menus, and some of us are creating further menus that we share from our own website.
Ha en riktig god dag!
Inger, Norway

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



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.