So I've been using R markdown to make some reports and I decided to spruce it up a bit by using the Foundation 4 CSS framework with it.
I embedded the minimized Foundation css in the file and then applied the styles to the R markdown code and it works fine but the quality of the image that is coming out is much lower than what was coming out via just R markdown.
Inside the R code I have:
cat('<div class = "Row">')
cat('<div class = "Foundationy grid columns">')
Bunch of R plot code here
cat('</div>')
etc...
I guess Foundation is changing the image quality somehow?
Any ideas on what I can change in the CSS to fix this?
I switched to Toast which is a much more lightweight CSS framework and the problem disappeared.
I'm assuming Foundation has some style that effects images. I didn't locate the style but switching frameworks was a decent workaround.
Related
To get proper code completion, linting, and coloring of styled-components code using Visual Studio Code we've been using the css function as a template wrapper.
Here's an example. Notice the blue css functions.
import styled, { css } from 'styled-components/native';.
Without the css function all the css code is simply green text without any editor smarts.
Does this have a performance impact?
Are we be better off foregoing the code editor conveniences and using simple template literals?
Style definitions from styled-components are parsed and extracted as plain CSS at build time into tags in the head of your index.html file.
As a result, your html file may get larger, but for there to be a noticeable performance hit, you'd need an enormous amount of styles. At that point, you might just consider refactoring.
My two cents, if its working for you and the tool you chose doesn't introduce new bugs and/or performance issues that threaten your app's vitality, just stick with it until you see a need to change it.
Lately i've been working with tikz code to create diagrams. As you may know, this requires several lines of code so it is becoming hard to analyze my documents inside Lyx. is there any way to change LaTeX code font? or to change it size?
Thanks a lot
Lyx >Preferences >typography >fixed width
In our project we are using WIREFRAME( Base 16 columns) css framework, we want to change the framework to Bootstrap, IS there any easy way to change, or do we need to re write entire css again.
You shouldn't have to convert to Bootstrap unless there are particular styles that Bootstrap offers that Wirefy doesn't. Wirefy is meant to work as a foundation that you can build your entire app on. This means that you can include additional frameworks or stylized classes on top of it without having to convert.
If you still feel you need to convert then it really depends on the types of classes you've included into your wireframe and how they align with that of Bootstrap.
hope things are going well.
I'm currently building html/css prototype for a website using Zurb Foundation 4. I'm currently just using Sublime Text 3 and internet browsers to build this. I'm very interested in using the Zurb Foundation Icon sets, but I'm currently unable to get them to display. While I have Scout for sass installed, I'm hoping to just continue using the text editor and browser to build up this prototype. While I was able to download the icon package from the Zurb Foundation website, I'm not clear on how to structure these files into my current project. My project as the following folder/file structure:
css (contains foundation.css, foundation.min.css, normalize.css)
img (contains .gitkeep)
js (contains foundation and vendor js files)
index.html
the Zurb Foundation icons come with various file types including .css, .eot, .svg, .woff, and others, including a folder called "svgs" where these icon fonts seem to be housed. I've attempted to do the following:
Place contents of the zurb foundation icon font folder into css of my project
Linked foundation icon style sheet on the html page
In the html I typed "" to test an icon
While the panel housing icon did get slightly larger, the icon did not appear. Is it possible to use the icon fonts with running and compiling sass? Could i purely do it html/css or do I need gem and compass running? I'm comfortable with using icon fonts and implementing, but I'm just not sure how to set it up.
Could anyone please suggest a folder structure and simple instructions how do properly add the files included in the foundations-icon package to a basic zurb project (such the basic project that you receive when downloading zurb foundation from their site)?
Thank you in advance, your help is greatly appreciated.
I was able to get the icons to work. I placed the foundation icons package contents into a separate folder. I actually wasn't targeting the icons correctly. While the Zurb Foundation example referred to an example icon as general foundicon-settings, the SVG icons have names such as fi-clipboard-notes or fi-calendar. I added CSS classes to my custom style sheet so that I could quickly adjust the size of the icon by utilizing font-size of the element.
I am currently setting CSS class names in a quite large browser-based application. I started sketching out the HTML element layout (basically a large set of nested boxes) on paper, and writing down the CSS style name next to each box.
This is of course very tedious, and I started to realize that this would be very useful in the application documentation (the one we have now is just a long list of the classnames with a small description for each).
Is anyone aware of any software that would be suitable for this?
Well you could use MS Visio, But the best thing I find for doing this use just to have a well commented CSS file, I usually sort a bare-bones layout in HTML first, then use CSSEdit to style this layout into what I had originally sketched out, just making sure to add /* Comment Here */ under each class name.