How to reflect updates to CSS at runtime in Visual Studio 2012? - css

I am working on a Metro-app for Windows 8 and using MS Visual Studio 2012. Currently I'm using SASS and Compass to automatically convert SCSS to CSS when I save the SCSS-file.
What I want is to be able to change the CSS at runtime. That is; I want to have the SCSS-file open on my right screen and when I make changes to it the running application on the left screen shows the changes. Currently I have to refresh the app in visual studio, but that does not preserve state.
So to summerize:
I have successfully installed Compass and SASS. When I change a SCSS file the CSS file (which is included in the project) is re-generated correctly
My running app does not reflect the changes made in the CSS-file. I need to reload the app in order to show the changes.
I want to be able to see the changes at runtime.
Any suggestion or help is much appreciated! I am willing to convert to LESS if needed.

Web Workbench from Mindscape is another tool that automatically generates CSS based on your SCSS. I'm not sure if it solves your problem of reflecting changes at runtime, but it's worth a try.

Microsoft Visual Studio 11 comes with an application called Blend (previously Expression Blend). In Visual Studio you can open a project in blend by right-clicking it in the solutions explorer and choose "Open in Blend".
In Blend it is possible to use something called "interactive mode" to switch states in the application and then freeze them to do CSS-changes. The CSS-changes made in Blend will automatically be displayed, even though the state is freezed.
One may also want to activate the option of reloading files in blend on changes without prompting. This will make it possible to watch changes done using SASS on the fly inside Blend. One downside is that Blend needs to get focus in order to reload the CSS-files. Up-side is that it does not reset state-information, thus making it possible to style pop-ups and dialogs with ease.
One can also choose to use the built-in GUI to change CSS with ease. The problem of doing this is that Blend do not support SCSS, so you will have to copy the modified CSS generated by use of Blend into the appropriate SCSS-files.
More on Blend and VS11 here.

Related

Xamarin UWP Visual Asset Generator - Can I use it for any images I use within my application?

I'm using Xamarin forms and I'm wondering, does the UWP Visual Asset Generator work for any image you want to add to your apps XAML? The documentation found HERE is really confusing. It appears as though the asset generator is only for assets that the app needs by default. If you try to use it to add a general image to your app it tries to overwrite the icons your app needs for windows tiles and the application icon, etc.
I have seen others on SO say that all you need to do is manually add the image to your Assets/ folder and while I can easily do that, you don't get all the different sizes and scale factor images that the Visual Asset Generator creates.
I did try using the Visual Asset Generator to create a new image anyway using the "App Icon" option but I made sure to use a different name so it didn't overwrite my existing app icon. Well, even though it didn't overwrite my original app icon my app is now using the image I'm trying to use within my app as the app icon as well.
Anyway, I called this new image I added from my XAML but instead of xaml pulling the best looking image based on the size of my image property which was 300x300 it instead used one of the really small images and it was really blurry so I'm not sure this is worth using anyway but some clarification would help in case I'm missing something.
My question is regarding using it for other image within your app like for instance, lets say I want an image embedded in the 2nd page of my app
These images are not generated for use during app development.
Images generated by UWP Visual Assets Generator are used as the logos or icons of an app in different devices or scenes for different sizes needs. These images are generated for the process of publishing instead of developing the app.Therefore,making good use of these images is of great help for users to identify your app.
Explain with the generated pictures Square44x44Logo.png and Square150x150Logo.png:

CSS Grid Development Environment on Windows

I wish to upgrade my web site development environment. Currently using Adobe Dreamweaver (out of habit), but need to
Write HTML/CSS/PHP/MySQL code in an editor with syntax highlighting, code/tag completion, code hints.
have a browser window that reflects the code window results (on a save). So write HTML/CSS code, save it, and the browser window is updated
support for major browsers (choose the browser to be used in the display window)
allow adjust of browser window width to see responsiveness of my code
supports latest CSS, including CSS Grid and Flexbox
Windows 10 environment; not interested in adding Linux (WSL)
will consider an XAMP/WAMP environment for testing of PHP/MySQLi code locally
free or low-cost programs are preferred (I'm on a limited budget, but will spend the $ for what is needed)
An important part is things running in Windows 10 environment, and the side-by-side display of a code and browser windows in the editor.
I realize this might be an 'opinion' question (and will probably get some downvotes), but need to get some directions to look at. The googles haven't been helpful yet.
If I understand correctly you need a text editor that can help you to indent your code and highlight your errors ?
Try to take a look at https://code.visualstudio.com/. Vs Code Editor
You can find a lot of extension to help you write code and find errors

Change Foundation Options in Meteor Application

I need to change where the breakpoints are for screen widths in terms of showing and hiding elements if the user's screen is in a particular size.
The project I'm working in is a Meteor project with the foundation CSS library.
I'm used to doing everything with PHP/JS with the occasional bootstrap, so what I would do normally is find the "_settings.scss" file and edit it like the doc says and multiple forums, but where is this file? No where in me entire project file can I locate this file (or anything related to foundation, actually)
So, how do I edit the foundation settings when modifying a Meteor application?
which Foundation package do you use?
Take a look at this package: https://atmospherejs.com/juliancwirko/zf5
Then ask me anything you need :)

Is there a way to stop Visual Studio 2010 from auto-generating CSS

I am using Visual Studio and anytime I touch a cell in a table it generates CSS. I have the style-application mode set to manual. Is there any other way to turn this off?
It will add styles if you do things like, resizing tables and things like that. If you don't do it, it should not add styles. Editing in code mode and not design mode will also help.

Realtime creation of csssprites in .NET

Has anyone created a 'realtime' csssprite generator for .NET ?
I want one or more directories of images that get loaded at runtime and the css is automatically generated.
Yes, there is. You'll find it at
http://www.codeproject.com/KB/aspnet/cssspritegenerator.aspx
Unlike Microsoft's attempt at sprites, with this package you don't have to change the way your images are stored and how they are shown. You simply add the .dll and configure the package in your web.config with a few lines.
This package also lets you resize images on the fly, compress them and other good things.
Is this what you are looking for?
It's the closest I found to a baked solution.
Ok finally something official...
Not clear yet if it'll make it into the core ASP.NET framework but here's a Microsoft codeplex project for csssprites :
http://aspnet.codeplex.com/releases/view/50869
if you like it - use it - or just like the idea then add a comment. I think this would be a great thing to have in the ASP.NET framework. Have not personally used it (I had to invent the wheel myself) but its got good reviews.
It includes the following components:
API for automatically generating sprites and inline images
Controls and helpers which provide a convenient way of calling into the API
Features Added in Second Release:
A CSS linking control for Web Forms (selects the proper CSS file for the user's browser, but does not display an image)
Using custom folder paths other than App_Sprites
Changing the tiling direction of sprite images
Merging the generated CSS with a user's own CSS
Features under consideration for future releases:
Automatically selecting the most efficient sprite background colour
Automatically minifying the rendered CSS
Compiling against .NET 3.5

Resources