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
Publish bootstrap components
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.scss
orresources/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 purge-safelist.cjs
to whitelist
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.
Editor styles
By default the editor styles are not loaded when running yarn dev
, to increase build size. The styles will be loaded after building. You can temporarily copy the contents of editor.scss
to editor-basic.scss
when you need to make changes to the file.
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
.
⚠️ After adding scss-files, bud needs to be restarted
Custom blocks
Custom blocks can be added using Log1x/acf-composer e.g.:
Views for custom blocks should be wrapped in an <x-block>
component. E.g:
See also ACF Builder Cheatsheet
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.js
and 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.js
will listen to click events on a.menu-item--has-submenu
element, and toggle themenu-item--open
class on this element. It will also remove themenu-item--open
class from every other element
Mobile nav
resources/scripts/components/header.js
will listen to click events on a.navbar-toggler
element, and toggle theprimary-nav-open
class 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/icons/logoname.svg