Orchard Core theme that contains a layout, zones and Bootstrap CSS base for your stylesheets. Set it as your theme's BaseTheme.
Do you want to quickly try out this project and see it in action? Check it out in our Open-Source Orchard Core Extensions full Orchard Core solution and also see our other useful Orchard Core-related open-source projects!
This project includes JavaScript code that observes the document's width and applies several indicator classes to the <body> element as needed. At any point it will have one of these classes, using Bootstrap's breakpoint sizes and identifiers:
- breakpoint-xs
- breakpoint-sm
- breakpoint-md
- breakpoint-lg
- breakpoint-xl
- breakpoint-xxl
Additionally, range classes are added too. For example breakpoint-xs-sm and breakpoint-md-xxl. These are helpful if you only want to differentiate between phone and desktop styles. For convenience, these two specific ranges are also available as breakpoint-small and breakpoint-big to improve readability and reduce the risk of accidental typos.
The Lombiq.BaseTheme.Core project defines some breakpoint-based variables for margins and gutters on the page. You should use that for layout spacing whenever possible, for example --gutter-x-small or --page-margin-large. To make it easier, this project also defines the --gutter and --page-margin variables that fit . These are defined inside the matching breakpoint class on <body> (e.g. .breakpoint-sm) instead of the :root pseudo-class, but that won't matter as long as you are trying to style something inside the <body>. This way, instead of
.my-class {
.breakpoint-xs & { margin-bottom: var(--gutter-x-small); }
.breakpoint-sm & { margin-bottom: var(--gutter-small); }
.breakpoint-md & { margin-bottom: var(--gutter-medium); }
.breakpoint-lg & { margin-bottom: var(--gutter-large); }
.breakpoint-xl & { margin-bottom: var(--gutter-x-large); }
.breakpoint-xxl & { margin-bottom: var(--gutter-xx-large); }
}you can simply write
.my-class {
margin-bottom: var(--gutter);
}Bug reports, feature requests, comments, questions, code contributions and love letters are warmly welcome. You can send them to us via GitHub issues and pull requests. Please adhere to our open-source guidelines while doing so.
This project is developed by Lombiq Technologies. Commercial-grade support is available through Lombiq.