Posted on 15-03-22 by Peter

Bootstrap SASS

So I'm not a frontender but as a freelancer you have to learn how to handle all fields so obviously I also have to be able to handle CSS. Since I do work a lot with Drupal where I prefer to use the Zen theme as base, and via this I learned how to compile and use sass.
So when I began this project I was simply thinking that I would just create the "theme" from scratch, compiling it into a css file located in web folder. So I didn't know where to put the src so just as a test I created a folder called theme and put it at root. Added some of the default sass files (i.e normalize) and then my own sass file to give the site my design. Fairly quickly since this isn't really a rocketscience behind this design.

Ok so I began to think a little, even if the above do work I want to learn more and new stuff. So I know a lot of peopple like the Bootstrap theme so I figure that this could be a nice time to learn using it. Reading on the website and began to download the framework I kind of got this thought, hey I can't be the first one to wanna use Bootstrap in symfony, perhaps there is a package for it, and yes after a simple search I found BraincraftedBootstrapBundle. After some reading I found that it would also work with Sass.

So the instructions on BraincraftedBootstrapBundle site is pretty clear and easy to follow. Add the bundle and the boostrap-sass to your composer.json file and if you like me want the jquery you need to add the repository for that and the package of course. This is quite good described on the site so nothing deeper here. After that I had to add where an assetic filter to tell where my sass compiler is located, the file suffix of the sass files

                       1
                    
php app/console assetic:dump
                    

The command above is really handy and is the way you compile and create your css file just like using "compass compile" but to get this working you need to add an assets in your configure file which tells the command which inputs files there are for css, jquery and js, and hence also the outputs where these should be placed. This is also well described on the site, just don't forget to add your own files that you want to be compiled. And whenever you have compiled and satisfied you have to remember to commit the changes to the repository. Where shall I put my sass files? After some thinking I decided that the best place would be in a directory named sass in the Resources directory of the bundle.
With compass you can set a watch on your sass directory and I think that should be possible with the assetic to but have not looked into it.

The current design isn't really using the Boostrap, that is something I need to read in about but also need to decide how I want my site structure should be. Before I begin to use it I'll have to do some changes on the backend though, first of all this is still a static page, but I need a simple form and database and obviously a login so I can skip this way of adding posts. I did some design changes already for this post but I need to do something about the presentation of a blog, making it easier to read an probably only present a snippet of a post on indexpage and linking to a full post with a meaningful url. Then it actually will be useful to add a RSS for this page.