I couldn't find anywhere which less files are required for a minimum Bootstrap website design.
I just want to download the LESS files from github, modify to get my own theme and compile the CSS.
The website should be responsive of course and have only navigation, grid system, typography and buttons.
What are the minimum required LESS files to compile the right CSS? No fuss such as panels, wells, tables etc is needed!
Many thanks for any recommendations.
As you have it in its sources as well, they are the following:
// Core variables and mixins
#import "variables.lessimport";
#import "mixins.lessimport";
// Reset
#import "normalize.lessimport";
#import "print.lessimport";
// Core CSS
#import "scaffolding.lessimport";
#import "type.lessimport";
#import "code.lessimport";
#import "grid.lessimport";
#import "tables.lessimport";
#import "forms.lessimport";
#import "buttons.lessimport";
So you'd only have to comment out the rest of the file and recompile the whole thing. And you should get the desired results
Related
Is there a way to avoid the same code in all css files to keep the app as fast as possible? For example, the heading in every page comes from a headings.scss file and that means that the code for the heading is in every css file. And if the css files are going into a one page, that code will be duplicated multiple times if I´m not manually deleting the lines one by one.
Is there a way to avoid this?
Update:
I have one css file for every html file and that css is mapped from a sass file. The sass files use global styling like headings.scss, buttons.scss etc. When the css files are created, every file has those five lines of styling for a button, which means that if I have a button in every page (say 20), there will be 20 blocks of the exact same code in a project.
Now a developer is using my code and he created a onepage for html and one for css. When he imports the css files into one, the button code will be 100 lines (20 duplicates). Is this just the way it has to be without spending time to manually delete 19 blocks or is it a better/standard/smart way to do this? Without changing everything I´ve done so far and keep the organized file structure?
i just can show you what i generally do and how i do structure it
1 - I have all my scss file being imported once in to a main scss file
src -> scss -> bundle.scss
// 1.1 - base
#import "./base/vars";
#import "./base/reset";
#import "./base/structure";
#import "./base/header";
#import "./base/footer";
// 1.2 - navs
#import './components/primary_nav_header';
#import './components/primary_nav_sidebar';
// 1.3 - templates
#import "./templates/home";
#import "./templates/products";
#import "./templates/products-single";
#import "./templates/search-results";
#import "./templates/contact";
// 1.4 - components
#import "./components/buttons";
#import "./components/hamburgers";
#import "./components/hero";
#import "./components/cards";
#import "./components/breadcrumb";
2 - And then all this will be compiled into a tyni single main css minified file in
dist -> css -> bundle.css
3 - then just import it
<link rel='stylesheet' href='./dist/css/bundle.css' type='text/css' media='all' />
I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
I'm following M Hartl's Rails Tutorial, and trying to add a bootswatch theme.
I have succeeded by using the boostrap-sass gem as defined in the tutorial, and twitter-bootswatch-rails gem from the net.
However, in Hartl's tutorial, all the CSS that we write in addition to default bootstrap is in a separate custom.css.scss file.
My application.css.scss file (Renamed from Rails default .css) contains
#import "bootstrap-sprockets";
// Import cerulean variables
#import "bootswatch/cerulean/variables";
// Then bootstrap itself
#import "bootstrap";
// And finally bootswatch style itself
#import "bootswatch/cerulean/bootswatch";
#import "custom";
Which works, however the custom.css.scss file has a reference to $gray-light, a variable set in bootstrap. The server will return an error at the variable reference in the css file, unless I add
#import "boostrap-sprockets";
#import "bootstrap";
to custom.css.
End result though, is I now have two gigantic CSS files being used, for what I would think is no reason.
I thought the idea of
#import "custom";
was to include my custom.css.scss file into the application.css.scss file so that it would all be in one place, and variables would work nicely.
The other method that works is to dump my entire custom.css.scss contents into application.css.scss but that defeats the point of having separate files.
Am I doing something wrong?
Edit: To add more fuel to the fire, I deleted the two lines from custom.css, and instead `#import bootswatch/cerulean/variables"; and it works. However, the resulting CSS that's on the website itself has NOTHING from that file.
This could well be wrong, but I post an answer to my own question as follows:
It appears that the sprockets lines //= require_self and //= require_tree, even when listed inside the comment section of the manifest as they are by default, are actually running.
This then causes each of the files "required" to be compiled separately. As a result, instead of getting a single application-FINGERPRINT.css file, I was getting an application, a custom, and a static_pages one. I assume this is the "require_tree" line.
After removing these lines, the #import "custom"; line works as I expected it to. The files are all combined into an application-FINGERPRINT.css file and I no longer need to #import anything at the top of custom.scss.
I am developing a new template for joomla and decided to use the Gantry framework. The mai problem of using it, is that i don't really understand the css/less structure. I need to understand it so i can make it more dry and easy to maintain. I find different overrides in difeerent css/less files. I don't really understand the logic. Can someone explain me how the css/less is structured?
Here is the global less file:(hope this gives an ideea about the structure)
#import "jui/less/mixins.less";
// Core variables and mixins
#import "variables.less";
#import "mixins/index.less";
// Core and Grid
#import "gantry-core.less";
#import "joomla-core.less";
// Template core styling and layout
#import "template.less";
#import "style.less";
#import "header-#{headerstyle}.less";
#import "jui/less/font-awesome/font-awesome.less";
#import "utilities.less";
#import "prettify.less";
#import "offline.less";
#import "error.less";
#import "jui/less/bootstrap-overrides.less";
Thanks.
It's a mess, I agree. It's clearly not been authored with end-users in mind, and it certainly isn't DRY. In my experience Gantry's LESS is very badly written, demonstrating a fundamental lack of understanding about how to use pre-processors responsibly or efficiently and creating some horrible outputs in the process.
If you want lightweight and maintainable LESS you'd be better writing it yourself, from scratch.
Last template I built with Gantry I disabled their LESS compiler, removed their LESS files and dropped in my own Sass framework instead.
The line #import "header-#{headerstyle}.less"; gives us a clue that from global.less you are able to load different themes depending on user selection in backend.
Basically you can follow the files inheritance by seeing what is being imported by each file.
I'm looking for ways to optimize my WordPress instance. The theme has about 8-10 CSS files that are rendered in the functions.php. Consequently, I do not want to change any file names because that would mean that I have to hack the theme and I want to keep that to a bare minimum.
I want to use SCSS to combine these CSS files into one CSS file and include the new file in the theme instead. When I try...
#import "style.css";
#import "reset.css";
#import "shortcodes-styles.css";
It renders as
#import url(style.css);
#import url(reset.css);
#import url(shortcodes-styles.css);
How can I get SCSS to import the CSS as partials without changing the file names? I'm also using CodeKit if that makes a difference.
Not possible. Sass only compiles Sass files: https://github.com/nex3/sass/issues/556