README

Master template to be the default for most sites. Packed full of flexible components.

Frontend Package Manager

This template uses Composer to manager a few key frontend packages, suck as jQuery and Bootstrap.

However, you must specify the vendor folder where sass files are installed when compiling, like this: sass -I ./vendor/npm-asset content/styles/main.scss:assets/main.css

Customization

This template takes advantage of customizing bootstrap 4 through the use of variables. You can see what kind of variables are available to be overridden under assets/styles/vars.

Icons

Icons are provided by Fontawesome by default.

Lightbox

The lightbox is powered by Lightbox for Bootstrap. By default, simply add [data-toggle="lightbox"] to trigger the lightbox on a linked element.

Layout / Grid

A convenient grid class system is available for easy grids. Similar to Bootstrap convention, simply add a class of grid to a container, and the children will be displayed in a grid. To modify the number of columns and a which breakpoint, add a modifier class, like this grid--md-4. This will display the grid with 4 columns on the md breakpoint.

Navigation

To scroll to a part of the page, add the data-scroll-to="#sectionID" attribute to your links. This is useful for one page templates and can be found in use on layouts/onepager.blade.php

Javascript Functions

data-toggle-class="element:class" this will target the element and toggle a class on it.
- Eg) Use it to toggle the sidekick menu with a button: <button data-toggle-class="body:sidebar-active">Show Sidekick</button>

Gallery

The gallery component comes with some cool filters.

Call it like this:

@component("components.gallery-filter", ['site' => $site, 'filters' => ['country', 'city'] ])
	<input class="search" placeholder="Search"/>
	<button class="sort" data-sort="country">Sort by Country</button>
	<button class="sort" data-sort="city">Sort by City</button>
	<button data-filter="country">Canada</button>
	<button data-filter="city">Montreal</button>
	<button data-filter="reset">All</button>

	<ul class="list">
		<li data-id="1">
			<div class="card-body">
				<h4 class="card-title country">Canada</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</li>
		...
	</ul>
@endcomponent

ubiweb / template-bedrock

Maintainers

Details