Forums

How to use the bootstrap version provided by concrete5?

Permalink 1 user found helpful
Hello,

I've build my theme by cloning the elemental theme. Now I want to remove the bootstrap-modified.css file from my theme and use the bootstrap version provided by concrete5.

I've removed the line
<link rel="stylesheet" type="text/css" href="<?php echo $view->getThemePath()?>/css/bootstrap-modified.css">

from header_top.php, and added the line
$this->requireAsset('css', 'bootstrap');
in the same file

I've also removed the line
$this->providesAsset('css', 'bootstrap/*');

from my page_theme.php

The file
/updates/concrete5.7.5.7/concrete/css/app.css
is now loaded in my pages but it seems to contain only bootstrap rule for the concrete5 user interface.

My questions are:
1) How to use the bootstrap version provided by concrete5 in my theme without relying on bootstrap-modified.css
2)Do I need to reload the theme after modifying page_theme.php and how to do it?
3)Is it normal to rely on the updates/ directory?
4)Where can I find the source code of the urbanic theme, or the source code of other well written theme in order to understand the right way of doing things?

Thank you in advance.
 
siton replied on at Permalink Reply
siton
1) How to use the bootstrap version provided by concrete5 in my theme without relying on bootstrap-modified.css
-----------------------------
"without relying" its to general. Depend on the design you want. In elemental this will change some design aspects.

In general: you can use the core less/sass bootstrap version and do the tweaks only by vars and so on (Also better for future updates). This is more PRO practice so you most know Less or Sass well (In foundation this is the advice by the core docs).

The idea is "core less" folder and "lazy loading" vars in "theme less" folder (also in other frameworks).
// LESS core
@color = red;
p{
color: @color;
}
// LESS Theme
@color = yellow;
--------------------------------------
////Output CSS (also if you will seperate this code to files and use @import)
p{
  color: yellow;
}

Example of UI KITS without changing the core bootstrap ("rely on")
http://designmodo.github.io/Flat-UI/...
http://bootstrap-live-customizer.com/...

2) Do I need to reload the theme after modifying page_theme.php and how to do it?
-- No. Only refresh the page (Inspect element and see the change of loading assets)

3)Is it normal to rely on the updates/ directory?
-- This is modular (provide/require) so depend. Its normal and this is why C5 give you this great ASSETS library (Jquery, font-aswome, and more)

4).....understand the right way of doing things?
"elemental" is great bootstrap reference by the core. Why you need more examples?
If you want you can find more free themes in the market.
Urbanic theme its only small example in some tutorial (This is not theme).

Use this "clone" elemental version:
http://www.concrete5.org/marketplace/themes/cloneamental...

Also learn about less.js:
http://lesscss.org/features/
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi VonUniGE,

The core Bootstrap CSS asset (inside app.css) cannot be used in a theme. It is scoped to the .ccm-ui class. Theme pages will be scoped to the .ccm-page class. You will need to provide your own copy of Bootstrap CSS with your theme.
VonUniGE replied on at Permalink Reply
Hi Siton,
Hi MrKDilkington,

Thank you for your answers.

I've replaced bootstrap-modified.css by bootstrap-3.3.6.css and everything works well.

There is still two things not really clear for me:

1) If 
$this->requireAsset('css', 'bootstrap');
gives a file app.css used only for the concrete5 interface. Which name do I have to use for providing the bootstrap library to other blocks?

2)When I modify a provideAsset statement in the page_theme.php, what do I need to do in order to make sure that this change is taken into account?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@VonUniGE

If you are providing the asset with your theme, you can tell concrete5 this by using providesAsset().
$this->providesAsset('css', 'bootstrap/*');

I believe the changes made to an existing page_theme.php should update immediately. If caching is enabled, you may need to clear the cache. While developing your site, it is recommended to disable caching.