I'm new to Cakephp and I have been developing a website for my client. I'm not satisfied with the look of the website and I've been trying to figure out how to use Bootstrap with Cakephp. I have been introduced to Sass and it seems like this is a great way to write css. So I want to use Bootstrap-sass. But after seraching a lot I still cannot find a good tutorial on how to approach this matter. Most of the tutorials are for Ruby on Rails with Bootstrap even the official Bootstrap-sass Github page https://github.com/twbs/bootstrap-sass
I would be gratful if someone could guide me through this or if this is not the way to go, which Bootstrap should I use If I want to have the sass functionality as well.
Also there is another doubt that I have:
Is it possible to overwrite Bootstrap css without using LESS or SASS?
That is more than one question.
SASS and CakePHP, easy. First of all, understand there are 2 SASS dialects. Original SASS tries to use the minimum of characters and is indent-sensitieve like Python. SASS 3 brought SCSS, which is more like CSS on steroids and easier to use. Then - outside of Ruby - you need a SASS compiler. SCOUT for SASS - Windows and Mac - is dead simple and does the job. You indicate your source SCSS folder, sits in webroot in my CakePHP, a target folder, the CakePHP CSS folder and a temp folder sitting in CakePHP/tmp for me. That is all it takes, save a SCSS file and Scout watches this and generates the CSS.
Bootstrap. Not easy to integrate in CakePHP templates. Additionally it uses some questionable JavaScript. Take a look at Compass, the same thing integrated in Scout.
If you want Bootstrap for a responsive grid, use SimpleGrid instead. As the name says simple and CSS only. Drupal is based on it.
Remember SCSS is a CSS superset; copy your CSS to your SCSS folder and start adding to it.
Good luck, André Hartman, Belgium.
Related
I am creating a website using Drupal 8 and I found a free theme online which I have installed on my site. The theme consists of multiple folders of CSS files. I would like to use SASS to extend and modify this theme. If I want to do this, is it as simple as renaming all the files to SCSS files and compile using Gulp or Compass? Or is there a better practice to follow? Any guidance would be appreciated. Thanks!
There's no need to make any kind of conversion.
You can just change the file extension if you need to.
The SCSS syntax uses the file extension .scss. With a few small
exceptions, it’s a superset of CSS, which means essentially all valid
CSS is valid SCSS as well. Because of its similarity to CSS, it’s the
easiest syntax to get used to and the most popular.
From https://sass-lang.com/documentation/syntax
I recently requested a project based on Rails and engaged a freelancer for the job. Basically backend was good but on the frontside - was advised by the freelancer to convert all HTML to Haml and Sass.
It was difficult -as it was hard to find another expert to convert these. In the end manage to find a guy for it
However now i needed updates to the webpage and I realized most people use the Erb and Css instead. Can Erb work together with Haml? Go back to Css as well?
Using Bootstrap as framework
ERB can work with Haml, just don't mix them in the same file. You can use .scss file extension instead of .sass: SCSS is superset of CSS, i.e. any valid CSS is valid SCSS.
I know how to use bootstrap with symfony without any bundles: download bootstrap, put compiled css and js files under web directory and its ready to use, working fine.
However I would like to use LESS or SASS mixins, in order not to use bootstrap classes like "row" or "column-X-Y", but my own, and include bootstrap CSS inside it. Some time ago I tried it with LESS and it was nightmare - every LESS change was compiling very long time. Also I had to compile it manually in console.
I tried MOPA bootstrap bundle, but it wasn't working well (I'm using symfony3).
Any suggestion on how to do that best way ?
I think what you are looking for is the asset manager Assetic. This is not included by default in symfony3, but check out this page for more information:
http://symfony.com/doc/current/assetic/php.html.
Assetic enables you to compile and minify resources. The documentation page linked to even uses the bootstrap library as an example.
I am making a static website with Flask and using the flask-bootstrap extension to simplify the front-end development. I concurrently have been learning Rails and so I understand that there are a few of these languages that compile down to CSS (LESS/SASS/SCSS). As I understand it, Bootstrap by default uses LESS, and in my Rails app I had to convert LESS variables (with an # symbol at the beginning) into SCSS variables (with a $). This wasn't too difficult, no problem.
I noticed that in Miguel Grinberg's tutorial (Flask Web Development, O'Reilly) Bootstrap is used (Flask-Bootstrap extension), and there is the brief mention of {% block styles %} used to include stylesheets that way, I am confused about how I can go about modifying the existing LESS variables that come by default with Bootstrap so that I can modify the grid structure and not mess things up with my own custom stylesheets. I want to be able to do, for example, is modify the #body-bg LESS variable, or any of the ones here: http://getbootstrap.com/customize
It is very interesting question. I also was interesting in creating styles dynamically. You need follow another ways. It is not possible by the way you have described above.
You mentioned you used Flask-Bootstrap. This extension adopts the Flask project to use the Twitter Bootstrap styles. I have not fond any SASS/LESS functionality.
http://pythonhosted.org/Flask-Bootstrap/#
https://github.com/mbr/flask-bootstrap
If you look at the static folder of the extension you will not find any tracks of SASS/LESS.
As I know Twitter Bootstrap is generated by LESS. There is also a SASS fork. You regenerate styles and replace them in the static folder of the Flask-Bootstrap project.
If you want to do it dynamically you need create your own solution. I do not know a ready extension. It is the very challenging task.
I want to set up bootstrap like that Twitter Bootstrap Customization Best Practices
I want though the responsive version. I found this thread Twitter Bootstrap responsive css is not generated form the less files
but it's not clear to me how can I set up bootstrap files so I can customized it using the responsive version ?
If you are wondering how to use less to customise the bootstrap css and then use this in your project, then there are basic approaches.
You can combine your customisation into the base bootstrap css files and import this into your project, or you can leave the bootstrap files untouched, create a second css file for your customisation and import this into your project as well, after the bootstrap css.
Overwrite vs override.
From the first link you give, you can see that both approaches have their supporters.
I've usually used the first method, and this is what I've done.
Download a copy of the less files, here is one source, and add to your project files
Open the bootstrap.less file. You'll see that it orchestrates everything and imports the individual less files
Create theme-variables.less and theme-css.less files and save to this less folder
You need to import these files in the right sequence. Adding the variables file at the end of the Core variables and mixins block with #import "theme-variables.less"; and the theme file at the end of the Base CSS block with #import "theme-css.less"; works for me. Depending on what you are customising, you may need to play with this a bit
That's basically it. Edit your custom files, compile bootstrap.less, and import the resulting bootstrap css file(s) into your project.
Naturally at the start you want to keep good backups incase something goes wrong, and likewise when you upgrade Bootstrap.
Good luck!
First download form https://github.com/twbs/bootstrap less version
How to use Less and less compilers
http://lesscss.org/
http://winless.org/
Bootstrap tutorial
http://www.w3resource.com/twitter-bootstrap/tutorial.php