Want to use a combination of elements from different frameworks


#1

I’m somewhat confused between framework and library elements . . . I want to use Foundation with multiple non-Foundation UI elements . . .

What’s the best way . . .

PLEASE type slow, I’m a total dummy at all this. :wink:


#2

It’s sounds like you’re basically asking how to build a website, which kinda goes beyond the scope of “forum advice.”

A framework is basically just a big library of CSS rules and javascript, and you reference it to create the “frame” of your website, like you’d build out the frame of a house. Just as you would have doors, staircases and windows in a house, your website built with a framework that will have a grid, button styles, and various elements. The framework sort of limits you so that everything will look and work the same way throughout the website. Just as you don’t want contemporary, double-hung windows on one side of a house, and vintage casement windows on the other side, you don’t want red buttons with drop shadows on one page of your website, and blue, beveled buttons on another page. The framework ensures everything is consistent.

If you want to add non-Foundations elements, the simplest (and correct) way would be to simply create custom styles in a separate stylesheet, and reference them in your HTML. You don’t want to start modifying the base Foundation styles because then things get messy.

If things like “CSS” and “HTML” don’t make sense to you, you might need to rethink your ambitions at this time.


#3

Printninja – I like to expand your answer to get more info…if I understand what you’ve written, there is a method to use one (or a few) components for example from Materialize and place it (or them) in a Bootstrap or Foundation site (or visa versa) as long as you attach the component(s) dependency CSS or JS files into the HTML page (i.e. in the ‘head-tag’ for CSS, and just above the closing ‘body-tag’ for JS)? And if you wish to change the CSS, then use a ‘custom.css’ sheet for making style changes and attached that as well to the HTML?


#4

That is totally correct. Pinegrow creates a custom CSS style sheet for you when you create a project (custom.css) which is where you would put all your changes to override default Framework classes, or create your own.

I question your proposed method of trying to “mix” Frameworks. The whole point of using a Framework is to have consistency throughout the site. If you want features that aren’t present in a chosen Framework, it would probably make more sense to just add them manually, rather than to try and “extract” them from another Framework. If it’s just styling changes, those can be handled by editing the SASS and LESS stylesheets. If you’re looking to add components that aren’t present, most popular Frameworks have large online libraries of things like sliders, galleries, menus, etc…


#5

Thanks! I discovered the Pinegrow custom.css file when using the Materialize Framework, but it took a bit of snooping around as Materialize provides a custom style sheet too, called: ‘starter-template.css’ which has the following comment at the top of the sheet:

"/ Custom Stylesheet /
** * Use this file to override Materialize files so you can update**
** * the core Materialize files in the future**
** * Made By MaterializeCSS.com**
** /*

After trial an error (and watching again the Pinegrow custom css video) i made the correction in which style sheet to use.

And, thank you also for the guidance on my mixing framework components “proposed method”, as I’m sure there is deep intelligence and understanding in your questioning.

Simply stated, my method is motivated by a single goal: to use a nice Tab component two times on a single page site. I’ve been able to rename the id tags so that the triggers work for both instances so far…whew, that was good learning!

Due to my nearly complete inexperience with coding, and after looking at the 3 frameworks provided within PInegrow, I prefer the Materialize Tab version the best, and so began a new site with the Materialize template, but am more familiar with Bootstrap (though admittedly barely familiar with it as well) and so began to wonder if I could mix framework components in a very limited way to get the final appearance I hope to achieve. Perhaps a knuckleheaded effort reflecting my learning curve… :slight_smile:

What I’m after is recreating my current one and only Muse site in Pinegrow, which you can see here if you care to take a look: www.danielfactor.com.

It’s pretty simple really, but it does have several Muse 3rd party widgets (Tabs, Panels, SQlight blog) which I want to get as close to recreating as my limited knowledge can achieve.

In any case, I appreciate you honest voice in the Forum and contribution to us newbies. :+1:


#6

Your site looks very nice Daniel. As far as which Framework to choose, as you are trying to recreate your existing site as closely as possible, you’re probably going to have to end up modifying some of the standard elements no matter which Framework you go with, but there’s nothing earth-shattering in this regard. Personally, I’d probably go with Bootstrap, but only because I’m most familiar with it.

From what I can see, the buttons are mostly styled with outlines that change color on hover, or text that changes color. Both are easy to customize in any Framework. There are some small images that I’d probably try and replace with icons from Font Awesome or similar. The accordion widget on your F.A.Q. has comparables in Bootstrap like this…
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse&stacked=h

Because your site layout is pretty linear (meaning you don’t have multiple columns that have to reflow on viewport changes, you can pretty much build this site easily with any Framework, but copying the look and feel of your old site closely will probably necessitate adding some custom CSS rules to, for example, change the color of the links on hover, thing like that. It’s nothing complicated, but you do need to have a grasp on CSS.

The Blog is a little more complicated, because Pinegrow doesn’t have any sort of built-in blog feature. I believe Foundation might (not sure.) Most blogs require a grasp of how to set up a MySQL database on the web server, but another simple option is to use a free blogging platform like Blogger.com, and them embed it as an iframe in your site, or just style your blogger page to look like your site, and incorporate it into the navigation as if it’s a page on your site. I’ve used that technique for a few clients.


#7

Here is another Framework that you might like. It seems to have some of the look and feel of your Muse site.

https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/jquery/tutorials/bootstrap/tutorial-2/10/index.html


#8

Much gratitude for your time and direction! Thanks you once again…


#9

I’ll check out Material Design, thanks!

I also have come across Bulma [https://bulma.io] which has a really nice look and functionality.

In regards to loading any of these frameworks into Pinegrow, is it correct to follow the same steps as the plug-in procedure?


#10

In regards to loading any of these frameworks into Pinegrow, is it correct to follow the same steps as the plug-in procedure?

No, you load it as a component library. When you download the Framework, you should have a single folder with all the assets needed for the Framework in subfolders inside it, like CSS files, fonts, images, javascript and anything else.


#11

And the Framework subfolder then goes within in the Project directory I’m using it in. Got it! Thank you once again for your generosity.


#12

Thanks to both of you for typing slow for me!

Yes, I want to mix and match components for the drag and drop functionality. This is not so much about style as the components themselves. It assumed replicating the impacting style will be easier than building the component from scratch, then replicating style.


#13

Thanks to both of you . . . think that answers and instructs for what I’m trying to do.