Download the PHP package tombroucke/sage without Composer
On this page you can find all versions of the php package tombroucke/sage. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download tombroucke/sage
More information about tombroucke/sage
Files in tombroucke/sage
Package sage
Short Description WordPress starter theme with a modern development workflow
License MIT
Homepage https://roots.io/sage/
Informations about the package sage
This is a starter theme, based on the roots/sage starter theme
Installation
Install composer packages in Bedrock or Sage root directory
Add facades to composer.json
Find & Replace
- %devurl% (without https://)
- %client_name%
- %themename%
- %mu-plugin-namespace%
Features
Bootstrap
- Bootstrap is loaded by default. You should comment out components & helpers in resources/styles/config/bootstrap to decrease build time / filesize.
- Custom pagination (
@include('partials.pagination')) - Breadcrumb (
@include('partials.breadcrumb')) - Some components might not be rendered correctly (missing styles), this could be fixed by
- uncommenting the component in
resources/styles/config/bootstrap/components.scssorresources/styles/config/bootstrap/helpers.scss. - enqueuing the modal styles by uncommenting
bundle('modal')->enqueue()inapp/setup.php
- uncommenting the component in
PurgeCSS
Add css classes to purgecss-safelist.js to whitelist
Add css classes to purgecss-blocklist.js to block
WPML
Add @include('partials.language-switcher') to have a WPML language switcher appear
Built-in support for headroom.js
All you need to do is add styling for the headroom classes (banner--not-top, banner--unpinned, ...)
Custom block styles
In resources/scripts/editor.js, we add a 'Lead' style to the core/paragraph block.
Custom directives
@ray(mixed $variable)
Outputs a variable to your Ray console
@background(string $image)
You can pass an image url, which will be added as an inline style background-image.
@shortcode('[shortcode]')
@year
Will render the current year
@preview($block)
Content of this block will only be rendered in the admin interface
@echoWhen(bool $condition, string $markup)
Customization
Blocks
Default blocks from Otomaties sage helper
Default blocks (accordion, cards, gallery, hero, ...) can be easily added from Otomaties sage helper e.g.:
- .js files in resources/scripts/blocks will be dynamically imported if there is a block matching the name. E.g.
resources/views/blocks/image-content.blade.php>resources/scripts/blocks/image-content.js - .scss files in resources/styles/blocks will be automatically enqueued in case there is a block with the same name (without namespace). If you want to enqueue a block style for
core/paragraph, you should createresources/styles/blocks/paragraph.scss.
Custom blocks
Custom blocks can be added using Log1x/acf-composer e.g.:
You can add styles for your block in resources/styles/blocks/my-block.scss. These will automatically be enqueue by our theme. Restart bud after adding the style. If you need bootstrap variables, mixins etc.:
Google Fonts
- Install Laravel Webfonts
- Run
wp acorn webfonts:add, follow the wizard - Add
'fonts': ["@styles/fonts"],tobud.config.jsand enqueue this asset inapp/setup.php
Theme.json
Container
There are 2 widths for containers: contentSize (768px) and wideSize (1320px). These can be changed from the theme.json
Colors
Colors defined in resources/styles/config/_variables.scss should be copied over to theme.json (settings.color.pallette). There is a ThemeJson facade to extract the colors.
Get a <key, value> list of all theme colors in PHP:
Navigation
- This starter theme uses Log1x/navi. The navigation is built in
app/View/Composers/Navigation.php. - You can add bootstrap button classes to menu items (e.g.
btn btn-primary) to style them as buttons - You can add fontawesome classes to add icons (e.g.
fas-envelope) resources/scripts/components/header.jswill listen to click events on a.menu-item--has-submenuelement, and toggle themenu-item--openclass on this element. It will also remove themenu-item--openclass from every other element
Mobile nav
resources/scripts/components/header.jswill listen to click events on a.navbar-togglerelement, and toggle theprimary-nav-openclass on the body element.
Google maps
If you're using Google Maps, you can add the GOOGLE_MAPS_KEY variable to your .env file
Snippets
SVG logo
File should be in resources/svg/logoname.svg