I am using shopify and the template (I believe) is baseline.
In the assets folder there is a theme.css and a theme.min.css. I am finding that the only new styles or over rides I can make are in the min.css file?
There doesnt seem to be a SCSS file. How does theme.css become minified because currently it isn't happening automatically.
Sometimes developers add two versions of the stylesheet (.css and min.css), this is just a good practice, but most of the time the minified version (min.css) is connected to theme.liquid. Same happens with .js files.
If you want to add custom styles I recommend to add a new file in the assets folder named "custom.css", for example, and connect it to theme.liquid using the liquid stylesheet tag, something like this:
{{ 'custom.css' | asset_url | stylesheet_tag }}
is important to place this tag right under 'theme.min.css' stylesheet tag in the theme.liquid. This way it will override most of the theme.min.css styles.
I don't recommend to use SCSS in Shopify since it is deprecated.
I'm not exactly sure I understand what you're using or trying to do, but here's two bits of information that might help:
The style being used will be specified in the HTML; so look for tags like
<link rel="stylesheet" type="text/css"
On the page you're working with, you'll see that it probably points to a 'min' version of the css. Change that to change what stylesheet is loaded.
If you want to minify your css, there are a bunch of options, including standalone tools, websites, and packages. Here's a good resource for explaining what the process is, and for picking out a way to minify your css:
https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript
Edit:
Shopify is deprecating Sass, and this article explains what to use instead
https://www.shopify.com/partners/blog/deprecating-sass
"As part of our ongoing initiatives, we've decided to deprecate Sass, with the aim of improving the user experience of storefronts, and paving the way for future advancements. In the short term, Sass will continue to work on Shopify themes, but we are actively migrating our themes to use only CSS stylesheets.
In this article we'll look at why we've decided to transition away from using Sass in themes and how developers can adjust their custom themes to adopt native CSS features and maintain functionality. We'll also look at what alternatives are available for developers who wish to continue using Sass in their development workflow. "
Related
I'm a web developer, not an CSS expert. We recently started using Angular and I'm wondering what is the best practice applying styles in Angular templates.
Discussion we have at work is whether to use external CSS files or internal style tags. We do not have too many templates and each template mostly has its own unique styles. We are debating between external CSS files and/or internal styles.
Couls someone provide an expert opinion on this subject.
Internal styles are only applicable to the page that includes them. As such, if you want to update common styling (such as a menu) on multiple pages, you'll need to update each page individually.
Considering you'll almost definitely have certain styles apply to elements on more common to more than than one page, you'll definitely want to opt for external stylesheets. This allows pages A and B to both inherit styles from a single style.css or similar file.
This way, you can load all the relevant styles with a single line of code in the <head> of each page:
<link href="style.css" rel="stylesheet">
And you only have to update style.css when you want to update multiple page's styling.
Angular brings scoped CSS from v1.5 up (when components were introduced - I believe). It's a good concept but, in small to medium apps, the difference is hardly noticeable. You should only consider using scoped CSS in conjunction with a tool that knows how to make the best of it (i.e. Webpack).
If you're not using Webpack, just stick to the classic model: one big style-sheet.
Note that technically, regardless of stack, if you want to provide the best possible experience (fastest loading times without FOUC) you want to put all the above-the-fold and general layout-ing styles inline, preferably in a head <style> tag and everything else inside a stylesheet loaded asynchronously.
Read this article about loading CSS async.
I'm new to web development and am developing a website using bootstrap. I've got quite a few .css files that involve bootstrap, an open source bootstrap theme, some style sheets for the plugins I'm using and etc. Thing is, I feel like I'm doing the same thing over and over again, putting a lot of overhead on things.
For example, this is how the styles on the web page I'm developing currently operate:
Bootstrap default theme is loaded
Bootstrap custom theme is loaded, overrides the majority of the default bootstrap css configurations
My own custom css file is loaded, overrides the majority of the custom theme css configurations
I guess it's worth mentioning that my custom css file only overrides colours and borders.
I'm thinking if the theme is open source, should I just edit the theme itself? Or should I still be editing everything within my own custom css file?
Again, I'm very new to web development so apologies if this is quite a silly question. Optimisation is key for me, though. After the development stage I will combine the CSS files using bundles provided by the Microsoft.NET optimization package.
Never modify a library directly (css, js, php etc.). What if a new version come out, fixing some bugs. You can not download it, because it will override all your fabulous work.
You get the right process right now. Import your libraries, then override them with you own file and lines of codes.
In your case, it does not matter at all the number of files you are importing, because you will combine and minify them.
If you really care about performances, I suggest you to look at the "CDN" systeme, for Bootstrap or jQuery it could be interesting and provide some good benefits.
Look at this question and the answers, they will give you some good hints : Single huge .css file vs. multiple smaller specific .css files?
I am trying to build a new design on an old system that is using DOJO, eventually we are going to move to AJAX to handle the data calls. Is there a default or minified CSS file so I don't have to use their themes? (i.e. Claro, which is the theme that was and still is applied)
It says you can make custom themes, but there has to be a bare bones version out there somewhere.
Thanks for your time.
The bare minium CSS is available in dijit.css
(you can see the file on the CDN: https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/dijit.css)
As dojo team says about this file :
Essential styles that themes can inherit.
In other words, works but doesn't look great.
So be aware it will be ugly!
But you can build your own theme starting from that.
dojo comes with out of the box the following themes:
Claro
Tundra
Soria
Nihilo
There is no really a default CSS a part of the CSS which is included in on of the listed theme. But as ben point out in his answer, there is a dijit.css which is a very essential base of CSS which other themes can in-heritage from.
You can apply them adding the following in your HTML file:
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" />
<body class="claro">
Or you can use a CDN, example for claro (just change the name for css file in order to get a different theme):
https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css
The CDN version is an unique file and easy to include in your app but it is not minified.
If you need to have a minified version, you could use the dojo build to compact all your project files and included CSS for your theme minified.
More info here:
https://dojotoolkit.org/reference-guide/1.10/dijit/themes.html#id10
I am making a static website with Flask and using the flask-bootstrap extension to simplify the front-end development. I concurrently have been learning Rails and so I understand that there are a few of these languages that compile down to CSS (LESS/SASS/SCSS). As I understand it, Bootstrap by default uses LESS, and in my Rails app I had to convert LESS variables (with an # symbol at the beginning) into SCSS variables (with a $). This wasn't too difficult, no problem.
I noticed that in Miguel Grinberg's tutorial (Flask Web Development, O'Reilly) Bootstrap is used (Flask-Bootstrap extension), and there is the brief mention of {% block styles %} used to include stylesheets that way, I am confused about how I can go about modifying the existing LESS variables that come by default with Bootstrap so that I can modify the grid structure and not mess things up with my own custom stylesheets. I want to be able to do, for example, is modify the #body-bg LESS variable, or any of the ones here: http://getbootstrap.com/customize
It is very interesting question. I also was interesting in creating styles dynamically. You need follow another ways. It is not possible by the way you have described above.
You mentioned you used Flask-Bootstrap. This extension adopts the Flask project to use the Twitter Bootstrap styles. I have not fond any SASS/LESS functionality.
http://pythonhosted.org/Flask-Bootstrap/#
https://github.com/mbr/flask-bootstrap
If you look at the static folder of the extension you will not find any tracks of SASS/LESS.
As I know Twitter Bootstrap is generated by LESS. There is also a SASS fork. You regenerate styles and replace them in the static folder of the Flask-Bootstrap project.
If you want to do it dynamically you need create your own solution. I do not know a ready extension. It is the very challenging task.
I have this Joomla! site and I have set up a yoo theme template but my site is very slow because the template has 30 external CSS files and approximately 20 script files.
I have managed to combine all JavaScript files into one with component ScriptMerge, but for CSS, the component doesn't work as it should because it messes up my site when I combine all of the CSS files into one.
I have also tried other components like jch optimizer and jbetolo but without success!
Does anyone know a component or a plugin that can do this job for me? Or something else maybe, I also tried some script for combining in .htaccess, but also without success.
I know that this Q is posted way way back but since I once had this kind of problem, I thought I can share a link to these two task manager I frequently use when creating templates for Joomla, namely:
Grunt
Gulp
A simple grunt task can combine your CSS in an instant (see below example)
...
cssmin: {
target: {
files: {
'css/output.css': [
'style1.css',
'style2.css'
]
}
}
}
...
Cheers!
You can use #import url'file' to include each css file into one then just include the one file in your main page.
e.g. in my site
#import url("nav.css");
#import url("popup.css");
#import url("latestPosts.css");
#import url("home.css");
This code is placed at the top of common.css and then common.css is just included into index.php
Might want to take a look here:
http://www.w3.org/TR/CSS21/cascade.html#at-import
Maybe Factor CSS can help you out? Run your combined file through it and see if that makes a difference. But don't disregard the disclaimer, which states that it might not work well when the stylesheet depends on the order of the rules. Such is the nature of Cascading StyleSheets.
A quote on stylesheets from About.com
A stylesheet is intended to cascade through a series of styles, like a
river over a waterfall. The water in the river hits all the rocks in
the waterfall, but only the ones at the bottom affect exactly where
the water will flow.
When you say it messes up your site when you combine the stylesheets. Have a think about the order in which the files are added. An automated stylesheet combining script can never know how you want the end result to look, all it can do is take what you have and combine it based on a pre-defined set of instructions, not based on how good it will look in the end. So make sure the input is right and the files are combined in the right order.
Here's an interesting link on the cascading order and inheritance in stylesheets, which might be of help.
This is a common problem with template driven CMS's that allow for the loading of various extensions.
The Joomla! extensions directory has an entire section for enhancing "Site Performance" there are a range of popular extensions for combining CSS and Javascript files.
RokBooster is fairly popular.
If you like getting into coding ...here's a solution.
You can bundle your css files into one, dynamically, by creating a php file with something like that:
<?php
# File combcss.php
readfile("stylesheet1.css");
readfile("stylesheet2.css");
?>
Then you may call your stylesheet like that :
<link rel="stylesheet" type="text/css" href="/combcss.php" />