This forum has moved, please join us on github discussions. We will keep these old posts available for reference. Thank you!

Using Bootstrap

#1

What is the best way to use Bootstrap (or Foundation) with Apostrophe? (I am brand new to Apostrophe.)

Ideally, I want to install bootstrap via npm, then use Grunt (specifically the grunt-bootstrap-customizer module) to compile Boostrap from LESS, and save the resulting bootstrap.less file to the apostrophe-assets public folder. That is not working do to file path issues with the resulting bootstrap.less file.

That is my ideal solution because I have no idea how to include an asset that lives outside of the apostrophe-assets folder, as is the case when you are using modules installed via npm.

I also have no idea how to create my own template, as no where in the tutorials does it discuss extending apostrophe-templates. Tutorials discuss apostrophe-pages, but not apostrophe-templates. If I could create my own template, I could rearrange the contents of my site’s HEAD by including bootstrap?

Where can i learn more about using 3rd party libraries with Apostrophe?

1 Like
#2

Hi Jeff,

I answered your question about Bootstrap here:

The bootstrap LESS file should only contain relative paths, you should be able to copy all of the assets it’s expecting to the right relative paths within lib/modules/apostrophe-assets/public/css. If that were not the case bootstrap would not work at all when installed in a subdirectory of a website running, say, Apache, and I’m sure that works.

As for bypassing this and adding your own script and link tags, apostrophe page templates extend layout.html, which extends apostrophe-templates/views/outerLayout.html (except when doing an AJAX refresh, a situation in which you already have your assets). This is all covered in the editing page templates tutorial. If you look at outerLayout.html you will see that it already contains nunjucks blocks you can override to put more assets in the head tag. But, be aware you’re not benefiting from Apostrophe’s minification of assets at that point.

For further how-to questions please ask on stack overflow. This forum is meant for announcements and more general discussion about Apostrophe. Thanks!

#3

I reckon it would help me to have a more general discussion about Apostrophe because I don’t understand why I have to use outerLayout.html. And do I have to limit my template development to the node_modules/apostrophe? Or can I place those enhancements in the lib folder

#4

Hi Jeff,

As the tutorials explain you should never touch node_modules/apostrophe. Any template you see in node_modules/apostrophe/lib/modules/... can be overridden by a template at the same path within lib/modules/… in your project.

That is if you want to override outerLayout.html completely (not that you have to, it contains lots of handy nunjucks blocks already, you should read up on nunjucks and how to override blocks):

It lives here…

node_modules/apostrophe/lib/modules/apostrophe-templates/views/outerLayout.html

So in your project you copy it here…

lib/modules/apostrophe-templates/views/outerLayout.html

And make any changes you need.

You never, ever modify anything in node_modules (unless you’re actually intending to contribute back, which is a whole 'nother conversation).

Make sense?

1 Like