How do you usually go about theming or customizing Bootstrap for your app from a Full Stack Developer perspective? Lets say the app I’m developing has typical features of a social login, dashboard and an interactive messaging forum (not as advanced as this one, but a basic one will do).
If I just use the standard Bootstrap, it is just too commonly found everywhere. Second option is to use an open source one available at bootswatch.com. Or finally, you design your own by writing less/scss code? How feasible is that approach, TBH? Do backend devs who are actually programmers in php, python, etc. able to learn scss/less in a short period of time (provided they already know basics of html/css/js/jquery)?
In short, is it a DIY approach, or do you fetch each individual css/js component from a library and then build a template?
1 Like
I’ve customized Bootstrap for some of the apps that I’ve developed. I use SASS which works differently than LESS when customizing Bootstrap. It’s not complicated, but you have to get the bootstrap source files, which you can get a variety of ways (ex. Bower, npm, etc).
In most of my projects, I have a source directory, which is where I keep all of my sass/less files. When I compile them, I save the resulting CSS file in the css folder in the wwwroot folder (or public_* folder). All of bootstrap’s main values are kept in its _variables.scss file. I usually create my own _variables.scss file and then create a main source file (usually something like site.scss) that I use to import all of the source files. With SASS, you have to declare the variable values before the bootstrap version due to the use of !DEFAULT in the bootstrap source files (means use “this value” as the default value if no value has already been given for this variable).
So my site.scss file will look something like this:
@import "variables"; // My custom variables file that overrides bootstrap values that I want to change...
@import "bootstrap/bootstrap/variables";
@import "bootstrap/bootstrap";
// Add my own custom scss files here...
Thanks, @kblock-dev. Were you a web designer before you started the fcc course, or you learnt all that sass and bootstrap customization here?
Most of my experience has been in building Windows desktop applications. I’ve been learning more about website and mobile development the last few years. I’d suggest having a strong understanding of CSS before tackling LESS or SASS. The more you know how CSS works, the easier it will be to convert over to the pre-processors and figure out how to make your styles modular so it’s easier to maintain.
I found FCC last summer and have been working on things here and there as time allows to improve my knowledge. I already do some full stack development at my current job using the .NET framework, Bootstrap, jQuery, and JavaScript (among other technologies), but I like to learn new things. This site looked interesting so I do some of the projects and try to help people with questions in the forum if I think my experience will help answer their questions or overcome an issue they may be having.
1 Like
I’ve ran into this the first link before that allows you to change things and download customized Bootstrap…
The second I’ve only recently discovered and played around with… it’s the more visual real time version of the first…
http://getbootstrap.com/customize/