Giter VIP home page Giter VIP logo

blank-bootstrap-edition's Introduction

Light, powerful and free template for Joomla!™ for faster and easier web development.

Install

Install it like a normal template in Joomla!™ backend. Then install Node.js®. This template will be built with Gulp. If you haven't used Gulp before, you need to install gulp global.

npm install gulp-cli -g

Open a terminal and go to the template folder.

cd C:\xampp\htdocs\joomla\templates\frontend

Install Node.js® dependencies.

npm install

Open gulpfile.js and take a look at the serve function. The url should be match with your local Joomla!™ installation, e.g.

http://localhost/blank/

Run Gulp for build and minify.

gulp

The building files are stored in folder /build in template directory and a zip package will be created one directory above, the level of the template folders. See gulpfile.js to recognize automation.

Working files

  • index.php
  • js/script.js
  • scss/_custom.scss

Functions

  • Develop with bootstrap for responsive web design
  • Scalable and customizable vector icons
  • Customizable error, offline and print page

Addons

Tutorial

There is a Bootstrap tutorial for beginners and new Joomla!™ developers.

Update

To keep your packages up to date install npm-check-updates.

npm install -g npm-check-updates

Identify out of date packages and update all the versions in your package.json.

ncu -u

Install the new versions of your packages based on the updated package.json.

npm update

Licence

The BL4NK Template is opensource software released under the GPL.

BL4NK

Take a look at BL4NK (without Bootstrap) and the full documentation of it.

blank-bootstrap-edition's People

Contributors

brianteeman avatar dependabot[bot] avatar engholm avatar rdeutz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blank-bootstrap-edition's Issues

Fehler in Such - Funktion

Moin Moin,
ich bekomme beim Suchen folgenden Fehler angezeigt:
//<\/script>".replace("HOST", location.hostname)); //]]> Notice: Trying to get property 'alias' of non-object in C:\xampp\htdocs\dev\templates\bagalut\index.php on line 12 ">
Zeile 12 in der index.php ist diese:
<body class="<?php echo $active->alias . ' ' . $pageclass; ?>">

Die Variable sind alle korrekt eingebunden.
Vllt hat jemand eine Idee?


Good Morning,
I get the following error while searching:
//<\/script>".replace("HOST", location.hostname)); //]]> Notice: Trying to get property 'alias' of non-object in C: \ xampp \ htdocs \ dev \ templates \ bagalut \ index.php on line 12 ">
Line 12 in the index.php is this:
<body class =" <? php echo $ active-> alias. ''. $ pageclass;?> " `

The variables are all correctly incorporated.
Does anyone have an idea?

wbr,
deltapapa

jQuery Probleme

Moin Moin,
ich habe meine Seite fast fertig, aber noch mit jQuery Problemen zu kämpfen.
Ein Problem ist die Integration von JSN Uniform. Dieses bekomme ich nur zum laufen, wenn ich das Unset vom jquery.min.js entferne.
Was aber noch problematischer ist, sobald ich mich einlogge bekomme ich diverse Fehler.
Hat jemand eine Idee, wie ich das jQuery Problem lösen kann?
Ich möchte die Scripte natürlich auch nicht alle doppelt und dreifach laden, aber irgendwie komme ich im Moment überhaupt nicht weiter...

image

Error after launching the first task with gulp

Hello,
when launching my first gulp command to create proper buid folder, app.js and main.css files, I'm getting the following error:
`assert.js:265
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/Applications/MAMP/htdocs/puyb_2018_05_28/templates/puyb/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/Applications/MAMP/htdocs/puyb_2018_05_28/templates/puyb/node_modules/undertaker/lib/task.js:13:8)
at Object. (/Applications/MAMP/htdocs/puyb_2018_05_28/templates/puyb/gulpfile.js:38:6)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)`

My config:
MacOS 10.12, Node 10.2.1, gulp 3.9.1, Joomla! 3.8.8 with Bl4nk 5.3

Regards

Integrating FontAwesome 5 Pro?

Hi there,

I have a license for FA5 Pro. I see the latest version of Blank Bootstrap includes the free version, which is great.

The first (and only, so far) time I tried to use FA5 Pro with a previous version of Blank, I couldn't figure out how to only import the subset of icons I wanted to use, particularly in the context of wanting to use the svg option. I wound up using the entire library, which added a massive additional download to the project.

If you've got any tips on this front I'd greatly appreciate it!

Fehlende Variabel bei der Übernahme von Bootswatch Templates

Hi,
mir sind noch zwei Kleinigkeiten aufgefallen:
Wenn ich, wie [hier] (https://docs.blank.rocks/bootstrap-tutorial#theme) beschrieben, die Bootswatch Templates mit einbaue, kommt es beim compilieren zu SASS Fehlermeldungen. Das Bootswatch Template arbeitet mit Variabel, die das aktuelle Bootstrap nicht kennt. Ich habe diese dann per Hand in meine _variables.sass eingefügt, und schon klappte es mit dem Template:

$theme-colors:		();
$black:				#000;
$gray-900:			#212529;
$body-color:		$gray-900;
$table-hover-bg:	rgba($black, .075);
$table-active-bg:	$table-hover-bg;
$enable-gradients:	false;

Desweiteren ist in der eigenen _variables.php noch eine Schriftart drinnen, die die Bootswatch Schriftarten überschreibt:

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Ist nur eine Kleinigkeit, aber erst wenn man diese Zeile löscht, wird die Schriftart im Sketchy Template (im Body) richtig angezeigt.

Vielen Dank und viele Grüße,
Dirk

Integration von FontAwesome

Moin Moin,
ich hatte eine kurze Frage zu den Fonts. Ich hatte diese irgendwie noch gar nicht richtig in meine Umgebung integriert, was mir jetzt beim Update auf die Version 5.5.0 auffiel.
Also FontAwesome via NPM kurz nachinstalliert, alles prima.
Ich habe jetzt in meinem node_modules Ordner die entsprechenden Unterordner (node_modules@fortawesome\fontawesome-free, wie gesagt, waren vorher nicht da).
In meinem Template Root gibts ja nun auch den Webfonts Ordner, wo die Schriften lokal liegen. Welche Schriften aus welchem Ordner nimmt das Template den nun zum Anzeigen? Weil genau der gleiche Webfonts Ordner liegt ja auch unter node_modules@fortawesome\fontawesome-free. Oder wird beim kompilieren auch jedesmal der webfonts Ordner im Template Root mit eingebunden?
Dieser Zusammenhang ist mir irgendwie noch nicht ganz klar.
Und wenn ich Google Fonts mit einbinden will, mache ich das auch über den Ordner webfonts?

Vielen Dank,
deltapapa

An actual blank version?

Is there a version that is actually blank? what is with all this node and gulp stuff? Looking for a blank clean slate that i can use bootstrap on without all the side stuff.

Pagination mit Bootstrap formatieren

Moin Moin,
hast du noch einen Tipp für mich, wie ich die Pagination anpassen kann?
Ich möchte das gerne so wie bei dem Readmore Button, via jLayouts lösen.
Die Overrides dazu habe ich angelegt, nur sind dann unter \html\layouts\joomla\pagination drei Files:
link.php
links.php
list.php

Durch Testen mit den Dev-Tools habe ich herausgefunden, das ich der Liste die Klasse "pagination", und den einzelnen Listenelementen "page-link" hinzufügen muß. (siehe Bild)
Nur wo mach ich das? Ich finde noch nicht einmal die Stelle, wo die anderen beiden Klassen "pager" und pagenav" herkommen:

image

Ich würde das auch gerne mit den jLayouts machen, in den Foren habe ich noch die Möglichkeit mit der html/pagination.php gefunden, was jedoch nicht mehr verwendet werden sollt.

Vielen Dank,
und viele Grüße,
Dirk

Error when trying to install Blank

Hello Alexander,

I'm trying to install a new template based on Blank 5.5.0a.
After running npm install on the Blank folder I've got the following error:
Unhandled rejection Error: Command failed: /usr/bin/git checkout 4.0.4
error: pathspec '4.0' did not match any file(s) known to git.

at ChildProcess.exithandler (child_process.js:289:12)
at ChildProcess.emit (events.js:182:13)
at maybeClose (internal/child_process.js:962:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)

I've tried with 5.4.2, same error:
error: pathspec '4.0' did not match any file(s) known to git.

Could you please help me?
Best regards

Fehlender Viewport

Hi,
mir ist aufgefallen, das im Blank-Bootstrap der Viewport fehlt.
Ich habe den in der logic.php am Schluß mit folgender Zeile ergänzt:

// MetaTag für den Viewport definieren  
$this->setMetaData('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

Desweiteren habe ich noch den HTML5 Support aktivieren:

// Html5  
$this->setHtml5(true);

Viele Grüße,
deltapapa

Clear statement of requirement

Would be nice if there was a clear indication that this needs Joomla 3 or better (was looking for a template to upgrade my existing Joomla 2.5-installation. Installed OK, but I get error messages that are usually associated with 3.x-extensions in 2.5-installations)

Falsches Dropdownverhalten bei Menüeintrag-Alias ohne Unterpunkte

From @alex-schell on December 4, 2014 20:24

Wenn man einen Menüpunkt als "Menüeintrag-Alias" definiert wird aus dem Menüpunkt ein Bootstrap-Dropdown, sprich es wird ein [data-toggle="dropdown"] gesetzt, obwohl es gar keine Unterpunkte und somit kein Untermenü gibt.

Richtig wäre hier, das [data-toggle="dropdown"] nur zu triggern, wenn der Menüpunkt auch ein "Parent" ist, sprich Unterpunkte besitzt. Dazu muss man folgende Zeile anpassen:

Bootstrap-Template-3.3.0 ▸ html ▸ mod_menu ▸ default_url.php
Zeile 33 ersetzen durch:

if($item->parent) { ?>
  <a data-toggle="dropdown" <?php echo $class; ?>href="<?php echo $flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?> <i class="fa fa-caret-down"></i></a>
<?php } else { ?>
  <a <?php echo $class; ?>href="<?php echo $flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a>
<?php }

Copied from original issue: schmidt1024/Blank#64

Desperately looking for a good workflow

Hello Alexander,

I have a question not directly related to BBE.
If it is not the right place to ask it, please do not hesitate to close the issue ;)

Here is my question:
I'm searching for a methodology/workflow to update the templates of my sites (of course made with Bl4nk) after they were going live.
For the moment, when I'm asked to adjust the template:

  • I made a backup of the site
  • install it locally
  • adjust the parameters to make Node workin properly
  • apply changes
  • compile
  • test
  • make another backup
  • replace the live site with the new one
    pfiu!

Very tedious not to mention that I have to keep node modules and sass folders in the template folder.

I'm sure there is a more efficient way (involving github ?).

Thank you for your hints

Regards

I get a mixin error for box-shadow

I'm fairly new to nodejs/Gulp but find it awesome already. I get the idea and it's great, just like your template. However when I start to setup a test to get the hang of it I get an error, which I'm not able to solve.

`events.js:183
throw er; // Unhandled 'error' event
^
Error: scss\bootstrap_images.scss
Error: no mixin named box-shadow

   Backtrace:
    scss/bootstrap/_images.scss:19
    on line 19 of scss/bootstrap/_images.scss

@include box-shadow($thumbnail-box-shadow);
-----------^

at options.error (C:\wamp64\www\joomla\templates\frontend\node_modules\node-sass\lib\index.js:291:26)`

I tried updating BS "npm install [email protected]" but that did not solve the problem.

Any idea what's going wrong here? Rest works like a charm.

Sind flexbugsfixes and autoprefixer nötig?

Moin Moin,
ich schreibe jetzt mal in Deutsch, da mir das ein wenig einfacher fällt, kann das aber wenn gewünscht auch gerne nochmal in Englisch formulieren :-)
Ich bin jetzt soweit, das die Umgebung mit npm / gulp incl GitDesktop wunderbar funktioniert. Ich arbeite mich aber noch weiter am Tutorial entlang, also noch lange nicht fertig und eine Menge zu tun. Sorry also, wenn ich vielleicht sehr einfache oder doofe Fragen stelle, aber meine Template Programmierung - Kenntnisse sind noch ziemlich frisch.
Dazu lerne ich parallel noch mit Videos/Anleitungen von LinkedIn, und dort wird im Workflow Bootstrap 4 und Sass incl Gulp mit Autoprefixer und Flexbugsfixes gearbeitet. Du nutzt im Bootstrap-Blank diese Tools nicht, oder? Werden diese in Joomla nicht benötigt oder hat das noch einen anderen Grund?
Vielen Dank für eine mögliche Antwort,
deltapapa


Good Morning,
I write now in German, because I find it a bit easier, but if you want to express it again in English :-)
I am now ready that the environment with npm / gulp incl GitDesktop works wonderfully. But I'm still working on the tutorial, so far not finished and a lot to do. So sorry, if I ask very simple or stupid questions, but my template programming skills are still pretty fresh.
At the same time I am still learning videos / tutorials from LinkedIn, and here they are working in the workflow Bootstrap 4 and Sass incl Gulp with autoprefixer and Flexbugsfixes. You do not use these tools in bootstrap blank, right? Are these not needed in Joomla or is there another reason?
Thank you for a possible answer,
deltapapa

can't include script.js

Hello!
Thank you for updating this very usefull template!
I'm not an expert but I can't manage to use the js/script.js file
It looks like its never loaded ...

Thank you for your answer
Regards
BEN

How to insert Font Awesome icon using css pseudo element

Hello,

I would like to know how I can access to Font Awesome resources already installed in Bl4nk template.

In other word I would like to avoid to make a new online request while files are already installed in Bl4nk template.

I see that it is easy to insert a FA icon with , , tags (in Joomla! articles for example).

But how can insert an icon with css pseudo element ?

I've tried something than:
.nav-link-search {
&::before {
content: '\f002';
font-family: 'Font Awesome 5 Free';
}
}

But it seems that doesn't work.

Best regards

<style> code in head.php

Hello,
Could you explain, please, what is the purpose of the following css code in inc/head.php file?

<style type="text/stylesheet"> @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @Viewport { width: device-width; } </style>

Thank you
Simon

Blanckscreen and no configuration

Hi,
I just install the new 3.8.0 BS version with a joomla 3.4.1. I don't have any configuration in the styles pages and I only get a blanck screen on the frond end. What I miss ?

Update fontawesome free

How can I update (automatically) to latest version of fontawesome free.
Would be nice because of some new icons.

Dropdown Menu Ausrichtung

Moin Moin,
ich habe nochmal ein Problem: Ich habe wie beschrieben die Dropdown Funktion eingebaut. Nur leider wird das Dropdown Menu nicht unter dem Parent Menü angezeigt, sondern im Container ganz links.
Ich habe zZt noch keinen Style von Bootswatch eingebaut, jedoch müsste das doch eigentlich automatisch unter dem Parent Menü Punkt zentriert werden, oder?

Vielen Dank, mit besten Grüßen
anmerkung


Good Morning,
I have another problem: I have the dropdown function as described. Unfortunately, the dropdown menu is not displayed under the parent menu, but in the container on the far left.
I have not yet installed style of Bootswatch, but that would actually be automatically centered under the parent menu item, right?

Thank you, best regards

Auto compiling of app.js fails to include gulp file .js

Hi there,

I realise this is almost certainly something to do with my understanding of how to work with NPM and the node_modules folder.

That said - I've added additional js files both manually in the /js folder and via npm.

I've had no luck understanding how I should then include those files in node_modules.

But what I have noticed is that if I manually add a js file from /js into the gulp template-js task, any auto-recompile of app.js (like adding new js files, saving script.js, etc) won't include this files in the compile.

If I manually run 'gulp template-js' from the command line however, those files are included in the app.js build.

The next time I make a change that causes app.js to compile, they're not included again.

I'd love to know what's going on here.

K

Fehler im module chrome zur Sidebar

Moin Moin,
ich bekomme leider, wenn ich das eigene Module Chrome einrichte eine Fehlerseite angezeigt:
anmerkung1
Leider habe ich keine Ahnung, was da genau falsch sein könnte. Habe den Code vom Module Chrome genau wie in der Vorlage eingebaut.
Ich nutze die Moduleposition Sidebar nicht, aber warum der Fehler jetzt erscheint würde mich schon interessieren.

Vielen Dank,
deltapapa


Good Morning,
Unfortunately, when I set up my own module chrome, I get an error page:
! [Note 1] (https://user-images.githubusercontent.com/19833064/47674158-f6720b00-dbb6-11e8-9044-66b0ed5b5998.png)
Unfortunately, I have no idea what exactly could be wrong. I have the code from the module chrome built exactly like in the book.
I do not use the module position sidebar, but why the error appears now I would be interested.

Many Thanks,
deltapapa

Script loading order

Hello,
First a big thank for Blank 5. I really love it

I've got the following problem:
I'm using a component that heavily rely on JQuery.
This component doesn't work well because of javascript error.
I suspect that is because Bootstrap 4 JQuery library is loaded after the scripts of the component.

How could I load app.js file before any other scripts?

Thank you

BL4NK Bootstrap 4?

Hello,
Is there a chance that Bl4nk will be updated with Bootstrap 4?
Regards

css Klasse der Dropdown Unterpunkte

Moin Moin,
beim weiteren testen und probieren habe ich festgestellt, das die Menü - Unterpunkte die falsche Klasse haben. Wenn die Navbar in navbar-light bg-light formatiert ist, fällt es nicht auf, in dark sieht es etwas anders aus. Ich habe dann im Joomla bei jedem Untermenüpunkt statt der Klasse "nav-item" die Klasse "dropdown-item" eingefügt, und schon ging es wunderbar.
Vllt habe ich es hier:
https://docs.blank.rocks/bootstrap-tutorial#menu
auch nur falsch gelesen, oder?

Viele Grüße,
Dirk

app.js is not used

The generated file app.js is not used in frontend. So I had to add
$doc->addScript($tpath . '/build/app.js');
to logic.php.

Updating to latest bootstrap 4.2.1 release

Hello,
I'm trying to update Bootstrap in Bl4nk template.
I have followed the documentation and run ncu -u and npm update commands.
In my terminal I have the following warning:
[email protected] requires a peer of popper.js@^1.14.6 but none is installed. You must install peer dependencies yourself
How can I do that?
Best regards

Having issues with logic.php, head.php

Hi there,

This is clearly due to my own ignorance but I'm struggling with the logic and head includes and determining how certain scripts are loaded... or not.

  1. jQuery loading sometimes, not others
    On my home page, jQuery, migrate and no-conflict are added from /media/jui/js - which is pretty much what I'd expect normally. Also as expected, certain scripts are being unset and not appearing (mootools, captions, validate, etc) I really like this a lot BTW.

However navigating to any other page and those scripts are not being loaded into the head.

  1. Script load order
    Running K2, the k2.frontend.js loads before jQuery, causing a 'jQuery is not defined' console error.

How can we ensure that components scripts requiring jQuery load after jQuery loads?

Older blank versions?

Hi,
is it possible to download older versions of the blank template?
On the most of my servers I can't use gulp or any otehr software where I need a console access.
And I don't develop templates local so I need the older php less/scss parser.

Cheers

Local Url into template.css

Good Day,

please correct the absolute url into template.css for the web fonts, check this screenshot.. thanks in advance

i´m fix them using ../ instead of http://localhost/test/bbe/

image

Responsive meta tag in logic.php

Hello,

Don't we need to add the responsive meta tag in the logic.php file.
In the BS 4 doc it is recommended to add it for proper rendering in all design.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

I've experienced that the Chrome developer tool doesn't correctly display your site in mobile view without it.

Best regards
Simon

What is the use of task parameter

Hello BloggerSchmidt,

In the class there is a PHP string that test if there is a $task variable.
Could you please explain what is this variable for?

Thank you

PS : Is it OK for you if I keep going asking question through GitHub issues?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.