Comments (26)
Personally I'm a huge fan of scss, as I use it at work daily. I've also wrote a complete compiler within our theme we use at work, making use of scssphp. The amount of code necessary isn't that big to write the compiler, but I don't have experience with it in a child theme.
And if we're going to do this, maybe it's an idea to do something with different scss files and the order they're loaded, so people can also use the mixins of Bootstrap? That way people can do stuff like @include media-breakpoint-down(md) {}
.
I think it's a good idea to give users the option to use scss. But do we want to add this to the theme, or should we create a plugin for this, so the users can choose themselves and keep the theme lightweight? We could then load the scss files from the theme using the plugin, and then compile the css file. This way we can also make updates using this: https://github.com/YahnisElsts/plugin-update-checker
from bootscore.
Compiler has been made, checking if files have been updated in order to recompile.
If you use the child theme, it will add the main theme as an import path, so the Bootstrap files aren't needed in the child theme.
Code can be seen here: bootScore | bootScore child
@crftwrk Can you check this out, if it's up to standards and if any errors happen on your side?
from bootscore.
Summary of this changes are to make existing sites updates smooth as possible. Changes would not break child themes for now. _bscore_style.scss and _fontawesome.scss are empty files. We can move style.css and fontawesome.min.css to this files later in 5.2.0 when users updated their child-themes.
- Setted compiler output to compressed
- Moved all SCSS files to folder /css/scss/
- Compiled CSS files are in folder /css/lib/
- Renamed main.scss to bootstrap.min.scss
- Pushed _bscore_style.scss back to style.css
Theme is already live on bootscore.me and works fine.
@justinkruit if you agree with that, we can delete scss-2 branch?
from bootscore.
Did the same with bootCommerce child and tested. Also new parent update with non-updated child. Seems to work fine.
We should deliver compiled css in parent theme on this release, because most of users doesn't enqueued their own bootstrap.min.css in child yet. If this file is not there, then there is something missing on their pages. Think in next release we can exclude. In child-themes I agree to exclude that.
Did the docs page and added media-breakpoint-down(md)
and media-breakpoint-up(md)
mixin example. Do you want to see there a button-variant(#EF4444, ##EF4444)
example there too? If yes, can you make an example snippet?
Do now an update guide. Think we should merge and release tomorrow π. Agree?
from bootscore.
Committed to each branch to remove the compiled scss now, as it will always recompile.
from bootscore.
I can also check if the lib folder exists, and otherwise make it, using php?
Sounds good!
from bootscore.
The update-checker plugin is already included in the bs-swiper and bs-grid plugin. It's planned to include it in theme as well if it's absolutely sure that there are no breaking changes anymore. I think with arriving Bootstrap 5.2 that could be done, because this version ships new color options in the navbar and delete some classes what will affect the header.php.
Think we should include Sass direct in the theme. I'm already on the point that I've included fontawesome and theme CSS files in compiled Bootstrap. So, only one single CSS file is loaded now. I think we can do the whole CSS as Sass and provide a _custom.scss file. If some users want to use CSS instead, they can use the (empty) style.css.
If you are familiar with a custom compiler, that would be great. For child themes https://picostrap.com. They did id in a nice way. Just install theme and child, do something in child/sass/_custom.scss. On save it recompile and reload page on the fly. I did not exactly understand how that works yet, but it seems to be a good way.
from bootscore.
Picostrap has some quite interesting code. I don't think the live reloading is a smart idea, pressing f5 once should be fine. Otherwise it could create some strain on light webservers, because the code is constantly doing an ajax request to check if there are file changes.
Is there any way we can chat on for example Telegram? That way we could communicate a bit easier imo, and then later write a summary here for the public.
from bootscore.
You have a message in your mailbox.
from bootscore.
Enqueued main.css in child, checked and works fine! Thank you!
Let me do some more testing and maybe rename/reorder some files for smoother updating existing sites over the weekend. Think we are on a good way.
from bootscore.
Ah yes, forgot the enqueue in the child, thanks!
In terms of renaming, I think that's indeed best if you do it, as you know the best file rearrangement for the project.
Btw, in _bscore_custom.scss I've referred to a documentation page you could add on the bootScore site, for some useful Bootstrap mixins.
from bootscore.
Hahaha, too bad you starting using a second branch, that way my commits don't make it into the repo :-P
from bootscore.
Sorry, my bad. Pushed it to scss branch. Can you have a look to it?
from bootscore.
All looks good to me!
from bootscore.
Since scss-2 branch got merged in the scss branch, it is fine to be deleted.
Version 5.2.0 is gonna be quite the update, with reformatted code and a complete scss compiler π
from bootscore.
@justinkruit Merged the scss-2 branch to scss in child-theme too. May you have a quick view if something messed up? And maybe there is a smarter way to enqueue files https://github.com/bootscore/bootscore-child/blob/scss/functions.php ?
I'm doing the docs page now. Is there a good example of mixins you'd like to see there?
from bootscore.
Looks like the merge went fine. I've modified the enqueue, because you can just reuse the enqueue handle and it will automatically override.
Do we want to add the compiled css to the repo too? Or should we exclude them, as they get compiled anyway the first time that someone loads the theme (because the get_theme_mod is empty). I would personally go for excluding the compiled files.
Some of my personal favorite mixins are media-breakpoint-between(sm, lg)
, media-breakpoint-up(md)
, media-breakpoint-down(md)
and media-breakpoint-only(xl)
(not exclusively those variables, just examples) to make it easy to create responsive layouts. Another one I like to use is button-variant(#EF4444, ##EF4444)
to create custom colored buttons. And one that I started to appreciate a lot recently is font-size(2rem)
, as that will create the responsive font sizes Bootstrap uses on headings. They also made mixins for all the paddings and margins, and you can create your own using rfs(100px, height)
.
from bootscore.
Ah yeah, forgot about bootCommerce child. Got many repos to maintain :-P
But if they update the parent theme and not the child theme, it should still automatically compile a new css file when they load the theme, so I think it's still fine to not include the compiled version in the parent repo. I will at least remove the compiled version from the child theme this afternoon.
Sure, here is an example:
.btn-red {
@include button-variant(#EF4444, #EF4444);
}
When point 2 is clear, about the compiled css, I think it's fine to merge and ready for release!
from bootscore.
Did you tested updating parent with excluded file by an active old child without an enqueued Bootstrap? If yes, I agree.
from bootscore.
The code always checks if a combined last modified of all the scss files (not counting Bootstrap 5 scss files), is more than the value stored in the get_theme_mod. Since that value hasn't been set yet for people who update, it will default to 0, making the combined scss files value higher, resulting in a recompile.
I did however make some fixes for when a child theme without scss files is running, because that made it that it couldn't find the scss file to compile. Now it checks if bootstrap.min.scss exists in the child theme, and if not, default back to only using the parent theme files (11e3ecb).
from bootscore.
Perfect.
from bootscore.
There is just a tiny problem. It's not possible to store an empty folder at GitHub. If we exclude the compiled file, we must store something other in folder lib
to prevent that this folder is removed. Maybe a readme.txt?
from bootscore.
I can also check if the lib folder exists, and otherwise make it, using php? As a readme indicates there is some information, while it's just to make the folder keep existing.
from bootscore.
Done!
from bootscore.
Works like a charmπ
from bootscore.
Closed by https://github.com/bootscore/bootscore/releases/tag/5.1.1.1
from bootscore.
Related Issues (20)
- [Feature Request] Remove limitation wpsites_query HOT 3
- [BUG] Not able to scroll page using Divi page editor on Tab and Mobile view HOT 7
- Overwrite SCSS variables
- [BUG] Woocommerce Products Shortcode HOT 3
- Unable to style an active navbar item
- Unable to close a photo from the media gallery when enlarged or go back HOT 9
- Create assets folder HOT 4
- [BUG] Potential Woocommerce Bug in the Slide out Basket HOT 2
- [BUG/Help Wanted] Pagination for Post HOT 3
- [BUG] Double eye in account offcanvas HOT 1
- Reason of using fixed-top HOT 1
- <header><footer> inside <main>
- [BUG] Dark Mode Plugin HOT 3
- [BUG] Edit single product page
- Wrong Isotope usage HOT 5
- Please reopen Issue 759 as it is not resolved HOT 1
- [Feature Request] A solution for a "Drill Down Menu" HOT 4
- Translation HOT 1
- Translate HOT 4
- my-account/edit-address/
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bootscore.