Hand-tweaking is an option too! - HOW?


Registered User
31 posts

Foundation Framer is a visual app, but any code-connoisseurs who want the ability to dive into the backend have that option too. Export to any code editor to manually edit the crisp and clean markup. Sweet: linked in custom stylesheets, will not get overwritten when re-exporting!


From Page: http://www.coffeecup.com/foundation-framer/
Any suggestion, how this could work? When I export it, it is either an *.rff file, but then I can't edit the CSS with an external editor or it is exported as htm/css, then I can edit the CSS but then I can't re-import it into Foundation Framer. These changes in CSS are not visible in my project in Foundation Framer.
Made in Germany


Registered User
1,370 posts
Online Now

Madmix wrote:
Foundation Framer is a visual app, but any code-connoisseurs who want the ability to dive into the backend have that option too. Export to any code editor to manually edit the crisp and clean markup. Sweet: linked in custom stylesheets, will not get overwritten when re-exporting!


From Page: http://www.coffeecup.com/foundation-framer/
Any suggestion, how this could work? When I export it, it is either an *.rff file, but then I can't edit the CSS with an external editor or it is exported as htm/css, then I can edit the CSS but then I can't re-import it into Foundation Framer. These changes in CSS are not visible in my project in Foundation Framer.


I for one can't imagine why you would want to do anything to the CSS outside of RFF then bring it back in,, I cannot think of any instance where editing outside of RFF can't be done from within RFF by tweeking the design. (unless it's to create an effect or something that RFF doesn't have,, in which case one would do that after exporting to html editor and then publishing to hosting server not bringing it back in.
The Sky Is A big Empty Space : But There Is No Room For Error
https://foundation-framer-tutorials.com


Registered User
31 posts

Dear Wayan Jaya,
that is not my question "Why"
my question is "How".

However, I will answer your question "why". You can't setup the reset.css. So you also can't set the general color of links, the "hover" behavior. You can't set the general font-family in body. not scroll-y: overflow in html tag, etc. These are only a few examples, but there are more.
Made in Germany


Registered User
1,370 posts
Online Now

Madmix wrote:
Dear Wayan Jaya,
that is not my question "Why"
my question is "How".

However, I will answer your question "why". You can't setup the reset.css. So you also can't set the general color of links, the "hover" behavior. You can't set the general font-family in body. not scroll-y: overflow in html tag, etc. These are only a few examples, but there are more.


But you can set the style for any element by first creating a blank page to be a template for styling the rest of your pages style sheet inset elements you wish to have the style for throughout your site on all elements set the style section and the "apply" to =type choose you styling (for example for a text-link set to whatever colour you want on both regular and hover, set the font to whatever you want and the size to whatever you want) for normal text the same, headers, paragraphs etc etc, row widths columns with or without padding. Thereafter any element placed in your other pages will have that styling you made in your "style sheet" If at any time you wish to apply a different style to any element the simply give it a class name (up to you what) make sure the apply to type is set to "class" and make your styling changes.

If you still go outside to tweek the css (for eample) then you can bring that css file back into RFF (RSD or whichever) as a "custom-css folder into your resources,, and make sure that in the header section you insert a href to that "custom" css file or place the css that you have custom made direct into the header section of the page you want it on. And as it says in the article the custom css will not be overwritten when you finally export the finished pages.

However I am with you on some things like we should be able to define some of the things for the styling by having the options to choose before the project gets underway (like being able to choose the default font for text etc which will save some time and messing about in the beginning) maybe one day that will happen
The Sky Is A big Empty Space : But There Is No Room For Error
https://foundation-framer-tutorials.com


Ambassador
281 posts

When I've needed custom css I've done it like Wayan suggested. I will just import the css into my resources and then link to in in the header section. You can do the same thing with any js files you may need to link to or import into your project as well.

Also, you can set up attributes for different 'types' of elements as well that would apply to all of those elements. This could be a first step before going in and adjusting different class settings. For example setting up base typeface choices or base colors, etc
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)


Registered User
502 posts

If I've understood correctly, two matters are in mind.

1. Making CSS adjustments not available within the program, as suggested in the previous posts.
I do this by creating a custom css file outside the program, putting it in the Project Resources box in the program. For the page or pages using the custom css file I go to the Page Settings panel, and in the Head box click on Add Resource. That takes me to the Project Resources where I can choose that CSS file and click on Select, which adds the relevant header to the page. One can edit that CSS file outside the program and update the program regarding it by going to the Project Resources box, selecting the CSS file that is there, and using the Replace File button to put the updated CSS file there - the Header box won't, of course, need updating in the Page Settings.
I have used this particularly for print.css files, which I don't think can be set up by the program itself.

2. Making adjustments to the HTML code output by the program.
That can, of course, be done by an external HTML editor, but it can't be imported back into the program. There is a work-around that I have used which allows such changes within the program. I do it as follows.
(a) Within the program I select the element I wish to tweak.
(b) I use the 'Preview on ...' button, and in the browser I view the page source and select and copy to my HTML editor the coding for that element.
(c) I tweak that coding as required, and copy it to an HTML element within the program.
(d) I then (and not before then) delete the original element.

Frank


Registered User
31 posts

Wayan, yes, but this is redundantly. E.g. this code in foundation.css

h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-style: normal; font-weight: normal; color: inherit; text-rendering: optimizeLegibility; }


These values are set and they are wrong for me, so I must override them. In visual mode, I have to insert each of these html tags and tweak several buttons (etc.). In CSS, this is only one line.

The most failing part is, that you can't set a font-family for body (.grid). and no font-size. Further no option to write the pseudo classes ::after ::before and so on. And you have no access to the html tag in visual mode.

@Jeff.
Yes, this was my initial question (see first post) HOW to do this. When I start a new project, I have no saved location. So If first must save the project and put the custom.css to the same folder or as sub folder and link (href rel=...) to it? And the settings of the custom.css will be shown in the project? This remains redundantly, but it is much better then to tweak all visually. Does the quote (see first post pls.) means exactly this workflow?
Made in Germany


Registered User
31 posts

@Frank

Yeah. :) Thanks for the explanations. That's cool for CSS, although .... but I will write this later.
HTML: I don't remember what exactly it was, but you can't do all with these HTML element within the program.

For my very first website made with RSD (Foundation), I wanted a shadow around the complete content including header and footer. I used also the flex component and therefore I could not use nested elements in deep. I think, the problem was, components don't work in sub-rows. So I needed a container around all. My solution was, after all work was done with the website I exported it, I inserted an opening div directyl after body tag and an closing div directly after footer in the *.html file. Of course I had to do this for all pages..

BUT.. the foundation.css had this code body > row. And all the rows inside the new container were no more addressed throught the body > row code. I had to search body > row through the complete css and replaced it with body row.
Made in Germany


Ambassador
281 posts

How I usually go about it for a new project is this:

Create a new directory for my entire project.
Create a new image folder for any of my images
Create a new css folder for any custom css code
Create a new js folder for any custom js code

Then you could put in any of the custom code you needed into the appropriate folders.
Create a new RFF file and save it in the main directory.
Go to resources > make sure the project folder is selected and then 'add a folder' and select the css folder and repeat for the js folder (if you need one)
Then you could add any temp elements to set up the base defaults such as a paragraph element and a H1 element. Change the attributes for that type.

The custom css elements won't show in the program preview but if you preview in a browser you will see these custom attributes or settings. I probably wouldn't use custom css files for changing elements you can set in RFF because they won't show in the program and might make things pretty confusing.

Hope that all makes sense! And hope I was explaining what you were asking. :)

Jeff

ps
For example, I used custom CSS and js code for my universe site (in my signature). I couldn't see any of the animation or scroll effects until I previewed in a browser.
Honestly I don't really preview in app too often anyway as I really want to be sure how it will look in a browser.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://goo.gl/KJCsjA
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)


Registered User
1,370 posts
Online Now

Madmix wrote:


These values are set and they are wrong for me, so I must override them. In visual mode, I have to insert each of these html tags and tweak several buttons (etc.). In CSS, this is only one line.


Nobody said it was easy ; Just they didn't say it was so hard :D

Once you get into it it hardly takes any time at all to do
The Sky Is A big Empty Space : But There Is No Room For Error
https://foundation-framer-tutorials.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.