MDriven Turnkey theming
No edit summary
No edit summary
Line 31: Line 31:
[[File:2019-06-16 10h37 49.png|none|thumb|1001x1001px]]
[[File:2019-06-16 10h37 49.png|none|thumb|1001x1001px]]
When you save a changed scss as it is being watched by the sass compiler, it will compile into a new css. This new css is found here /Content/scss/app.css.
When you save a changed scss as it is being watched by the sass compiler, it will compile into a new css. This new css is found here /Content/scss/app.css.
[[File:2019-06-16 10h50 10.png|none|thumb|359x359px]]


The turnkey application will recognise that there now is a /Content/scss/app.css and will use that instead of the standard /Content/site.css.
The turnkey application will recognise that there now is a /Content/scss/app.css and will use that instead of the standard /Content/site.css.
Line 36: Line 37:
When you refresh your page you will see the new style applied:
When you refresh your page you will see the new style applied:
[[File:2019-06-16 10h39 00.png|alt=x|none|thumb|1048x1048px]]
[[File:2019-06-16 10h39 00.png|alt=x|none|thumb|1048x1048px]]
There are many possible changes that you may want to experiment with. Maybe font size?
[[File:2019-06-16 10h48 13.png|none|thumb|1049x1049px]]


You may want to copy the updated scss repository and keep it safe - it will be overwritten with default styles the next time you get the latest version of turnkey core.
You may want to copy the updated scss repository and keep it safe - it will be overwritten with default styles the next time you get the latest version of turnkey core.
[[File:2019-06-16 10h51 36.png|none|thumb|380x380px]]


Now that we have managed to change the local site we want to apply the same changes to a server side site in azure. This is done by simply copying the resulting content/scss/app.css to your AssetsTK folder for the model - add the same folder levels so that you get xxxx_AssetsTK/Content/scss/app.css.  
Now that we have managed to change the local site we want to apply the same changes to a server side site in azure. This is done by simply copying the resulting content/scss/app.css to your AssetsTK folder for the model - add the same folder levels so that you get xxxx_AssetsTK/Content/scss/app.css.  

Revision as of 08:53, 16 June 2019

SCSS or SASS, as it sometimes is called, is a text format that compiles into css.

Using scss can greatly simplify the source code for styling a site since it introduces variables and other logic that is missing from standard css.

As you can imagine things like text font size may be needed in many places across the site and we usually want such a thing consistent - but if there is no variable to reuse we would be forced to have a copy of the desired value in many css rules. A Variable definition greatly simplifies this and allows us to maintain it in only one place.

This is the reason for us shifting to scss-format on the source code for styling a turnkey web app based on material design styles.

This switch also benefits you when you want to give your turnkey site a personal touch.

How does this differ from tkusercss?

As we have described before you may add your own styles to Content/tkusercss.css - this article describes how you change the existing styles in a consistent scss supported way that build the very fabric of every aspect of the turnkey site.

Where to start

Scss and css are web de facto standards - and you may use any tool that does the job. This article describes one of many possible ways to tweak the styles of a turnkey site.

Use the prototype run - LocalTurnkeyPrototyper option to get your site running locally. You can choose any free port.

2019-06-16 10h02 23.png
2019-06-16 10h09 54.png

By doing this you have access the original scss files that control all the styling of the web app. They are located in application-root/content/scss.

2019-06-16 10h12 22.png

You can use the Visual Studio Code editor to get context sensitive help in updating the scss files to your liking.

2019-06-16 10h16 53.png

You can install the liveSassCompile plugin that can track your changes and turn the updated source code (scss) into css that the the webserver actually use.

2019-06-16 10h33 40.png

By refreshing your local prototyping site you get instant feedback on what the style change looks like.

2019-06-16 10h37 49.png

When you save a changed scss as it is being watched by the sass compiler, it will compile into a new css. This new css is found here /Content/scss/app.css.

2019-06-16 10h50 10.png

The turnkey application will recognise that there now is a /Content/scss/app.css and will use that instead of the standard /Content/site.css.

When you refresh your page you will see the new style applied:

x

There are many possible changes that you may want to experiment with. Maybe font size?

2019-06-16 10h48 13.png

You may want to copy the updated scss repository and keep it safe - it will be overwritten with default styles the next time you get the latest version of turnkey core.

2019-06-16 10h51 36.png

Now that we have managed to change the local site we want to apply the same changes to a server side site in azure. This is done by simply copying the resulting content/scss/app.css to your AssetsTK folder for the model - add the same folder levels so that you get xxxx_AssetsTK/Content/scss/app.css.

IMAGE

Upload your model and what the result on the server application

IMAGE

This page was edited 3 days ago on 03/26/2024. What links here