For my latest project here at work, I was told to develop custom (Stencil) themes for BigCommerce so we can distribute them via the BigCommerce theme marketplace. I come from a Wordpress background, so making this leap is making my head spin a little bit, but I think I understand how their platform is put together for the most part. There are components which are called by Handlebars expressions, and these may be rearranged in the template files while any default styles can be applied through config.json and the client can make basic changes through the theme editor GUI.
Here's where I'm still lost, though. Some of the design requirements call for heavy CSS changes, not just a JSON variable. I have a fully developed HTML/CSS theme I would like to use by converting it into a format that BigCommerce will accept, but I can't find any documentation on how to go about doing this. I could tediously modify each of the existing SCSS files, or I could override them as if I was developing a child theme. I'm tempted to scrap the SCSS altogether and start over, but then I would need to recreate the SASS functions used to pull in the JSON where needed.
I work much better when I begin with a blank canvas (or at most a rough sketch) and build upon it, rather than morphing a complete product into what I need. Is there any way to do this with BigCommerce?
It's been a little while since I posted this question, and since then I have learned a bit more about Stencil development.
The short answer here is, add on, don't delete. BigCommerce's Cornerstone theme is not a blank theme like _underscores for wordpress. It's a fully developed, yet very basic theme. It's best to avoid editing its default files where possible, because it may be updated in the future and could potentially overwrite your changes. Instead, add folders with your custom theme's name within it. For example, you would normally see:
/scss/layouts/body/_body.scss
So you could add your own styles while leaving the above structure intact:
/scss/layouts/customtheme/body/_body.scss
We do not have to override the styles defined in the former _body.scss, because we'll also need to import your newly created styles into
/scss/layouts/_layouts.scss
In this file, you'll see this snippet at the top:
// =============================================================================
// LAYOUTS
// =============================================================================
// Global layouts
// -----------------------------------------------------------------------------
// Header
#import "header/header";
// Page
#import "body/body";
Since an underscore defines an SCSS partial, we know that just creating _body.scss doesn't do anything. We have to find the main SCSS file and add #import "body", or in this case, we must add it to another partial which gets imported into the main file. So simply delete or comment out the default
//#import "body/body";
and replace it with
#import "customtheme/body/body";
And there you go. You are not overriding or competing with any existing styles, and you've customized the look of the body. You can also add your own components, but that's another topic for another time. Suffice to say, there are more SCSS files in
/scss/components/
and they follow the same principles.
Did you try using the stencil resources provided by BigCommerce youtube channel?
Also, the forums would be a great place to start having a chat for best practice questions.
Related
I'm having trouble finding an answer to why it's better to enqueue Google fonts in the functions.php file vs adding #import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,800,900'); directly to the style sheet.
I read on one site that if you use the style sheet method the CSS file loads twice? That's bogus, right? Why is the functions method superior?
Enqueuing the style sheet in your functions.php is better just in case there might be another plugin that wants to use the same font. If it's properly enqueued using the wp_register_style() and wp_enqueue_style() functions then WP will only include the link once, no matter how many plugins want it. However, #import it yourself (or add the link manually to your header.php) and WP can't know about those, so it will get loaded more than once.
Of course, if you know exactly what resources your theme and plugins are using, and know that nothing else will want to load the same font, it doesn't really matter if you link to or import it manually!
WordPress has a large and strong developer community. Thousands of people all around the world design themes and plugins for WordPress. To ensure that everything works properly and that one plugin or theme doesn’t break another, WordPress has an enqueue script function. This particular function provides a systematic way of loading Javascript along with styles.
With the help of the wp_enqueue_script() function, you can easily inform WordPress the best time to load a script long with dependencies if any. Such a feature allows everybody to utilize the built-in Javascript libraries that come in a bundled form. It also helps in reducing the load time of page along with avoiding easy conflicts with themes and plug-ins.
Enqueuing scripts in WordPress also ensures that duplicates with the same handle are not loaded twice.
New to sass I stuck with the problem how to enable the dynamic change of a website theme - lets say a dark and a light theme - through user interaction. The template I use as a base (coreui) has a _custom.scss file in which various variables are defined
...
$navbar-bg: #fff;
...
The values of these variables would need to be set dynamically depending on the user choice of the theme and I have no clue how to get this done. Any pointer how to implement this would be highly appreciated.
SASS is a preprocessor which means essentially it gets compiled down into regular CSS and then shipped to the client. If you want to change themes you'll have to dynamically load different stylesheets using javascript.
Case 1
In the case that you want the user to pick between multiple prepackaged themes. This can easily be done with multiple "theme" style sheets which import the various parts of your style. First import the different colors, then import the main bodies of your sass. For example:
theme1.sass:
#import 'theme1';
#import 'base';
#import 'other';
theme2.sass:
#import 'theme2';
#import 'base';
#import 'other';
Then in javascript you could remove the old stylesheet and add the new one when the user does whatever is needed to change the theme. For example inside the onclick of a button you could put:
document.getElementById('cssTheme').setAttribute("href", "/path/to/theme");
It's probably best to take a bit of care and put the element in the head of the document, but this is a good starting point. That could be made to look a lot nicer with Jquery, but I didn't want to assume you'd have that.
Case 2
In the case that you want the user to dynamically change colors of individual element colors it might be worth looking into CSS Variables. Current support in IE/Edge is crumby but it is pretty interesting. Then as the user changes the fields you could just be changing the css variable in a <style> tag somewhere on the page and it should propagate through the document.
If you want more browser support then I think really the best way would be with OK sure's answer. This one gives you the benefit of just changing a variable and not having to reset each element style that uses that variable.
You have 2 options I think.
Option 1) Recompile the styles whenever a change is made by running a command serverside to generate a new CSS file for the user. This will be potentially very resource hungry and probably not recommended.
Option 2) Take the variables you want to be accessible, find where they are mentioned in the bootstrap source and either generate a file or just inline these styles after the stylesheet is included in the template.
So for your example here, depending what language you're coding in, or templating (this is a twig example) you're using, you could inline the following in the head of your template:
<style>
.navbar {
background-color: {{ user_theme.navbar-bg | default('#eeeeee') }}
}
</style>
It's tough to tell you exactly how to do this without knowing what frameworks/languages/infrastructure you're using.
If you were using Twig & PHP for example, you could send a user_theme object to the template, and have an include file which contains all the styles that need modifying with default values as above.
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've been having trouble implementing templates bought in themeforest in a meteor app.
I'm wondering, what would the best way to implement a template into a meteor app.
Two ways that I think of right now are:
(Tedious way)
Place javascript in Compatibility folder and try to name them in specific alphabetic order in order to get them to work properly.
Place css in client/lib folder and try to name them in specific alphabetic order in order to get them to work properly.
Place fonts and images in the public folder.
The second way (I haven't tested it yet) is to place the template files in the public folder and just link them manually (the old/non-meteor way) in the index.html file.
Now I'm not sure if these are the correct ways to do this and I would like some information regarding this issue.
Thanks!
I've done this myself with a themeforest theme.
Put the theme's css file under /client - it doesn't need to be in /public
Use the class names your theme uses in your templates. Typically a theme will have 3x what you really need so this ends up being much less work than it might seem. If your theme is built on bootstrap then it's even easier.
My theme used fontello a lot for icons, I had to recreate the folder hierarchy under client/fonts and then make sure the cross-references were correct.
Typically themeforest themes don't use js that much, I completely ignored all the js that came with my theme and created what I really needed in Meteor.
I'd been reading up on themes in my ASP.NET book and thought that it could be a very handy solution, then I met some problems.
The theme picks up every single CSS file in the folder
If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
How do you specify print stylesheets without having all styles in a single stylesheet?
I'm wondering as to whether they're actually worth using at all. Is there any benefit? Are there any major sites using them?
EDIT
Just to clarify slolife's last point. If I had two stylesheets, one called print.css and one called main.css and I used ASP.NET themes, how would it know that print.css was a print stylesheet? In regular HTML you use the media type in the tag itself (i.e. <link rel= ...>) but the themes wouldn't know this, so it would just get included as a regular stylesheet.
I like using themes, but as Raj pointed out in his answer, URL rewriting can cause problems. My search for some solutions to that is what led me to your question. But I'll add my opinions in anyway.
I'll address some of your bullets from above as to why I think themes are good:
- The theme picks up every single CSS file in the folder
I guess you are looking to apply only certain stylesheet files to certain pages. Yes, themes takes the shotgun approach here, so that's a problem. But you don't have to put all stylesheets in the the theme folder. Put your specialized ones outside of it and they won't be included automatically. But I think it is nice feature to have the common/site wide ones included automagically.
- If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
I think you can guarantee the order by the way you name the files, so they are numerically and alphabetically ordered. Maybe not an elegant solution, but not horrible.
Personally, I have a build step that combines and compresses all of the *.css files in my theme folder into one single style.css file, and since I control that build step and the order that the files are combined, that doesn't affect me.
- Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
You can change the theme via code and in the <%#Page directive
- Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
I agree that applying style attributes to controls via the theme doesn't seem to be a best practice. But I love the fact that I can define image skins in the theme's skin files and don't have to cut and paste Width,Height,AlternativeText,Align attributes for common images that I use lots of places throughout the site. And if I ever change one of those images, I can fix the attributes in one place, rather than all over. I also can created skinned controls with a certain list of css classes applied, which seems handy to me.
- How do you specify print stylesheets without having all styles in a single stylesheet?
I have a Print.css file that starts with #media print and that defines print styles for my site. Why do you need to put them in one stylesheet?
IMHO, asp.net themes are absolutely USELESS
try implementing url rewriting with an app which uses themes and see them break straight away
basically, you can achieve the same thing writing few lines of code in asp.net and multiple css folders. i am yet to come across any developer / company who has been using themes
when asp.net 2.0 was launched, there was a big hype around themes but my personal opinion is its simply not worth it :-)
Use themes to change control attributes ONLY.
They were bad designed for working with css.