Sublime text 2 IDE - yeoman

Hi,

I'd like to ask how to  create templates (modules) for a project in sublime text 2? I mean e.g. header and footer or navigation.  So when you have 10 htmls it's compiling it for you from one file so you don't have to copy-paste the same things over and over again.

I know that this can be done in dreamweaver but I'm using yeoman generator now and ST2 is just awesome so I'd like to ask how do you do it there?
LVL 1
Fajer39Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think you have 2 separate questions.   1) How do I set up a template 2) How do I use yeoman

Just a disclaimer, I used sublime for a short time and went to jetbrains phpStorm.  There is a difference between how DW works and html editors such as Sublime, Jetbrains, Brackets, netbeans etc.   Editors like Sublime have features that allow you to code faster and it takes a little time to learn all the little tricks and shortcuts.

If starting out from scratch, you would have some folders in your web application that may include:

+css
-- style.css
+images
--logo.png
+js
--main.js
+vendor
-- bootstrap folders and files
-- jquery ui folders and files

You can see the folder tree in Submlime and edit/add individual files just as you can in dreamweaver.

A template in DW is specific to DW and is actually doing a find and replace.  In the dwt file you see code like this <!-- TemplateInfo codeOutsideHTMLIsLocked="true" --> that is ignored in html or any other editor.  DW also has a library feature which is essentially dropping in code blocks.  In submlime, I believe that is called snippets.

When I create templates, I may have rendered html like
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <style>body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}</style>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>My Site</title>
</head>
<body>
   <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->

</body>
</html>

Open in new window

and in php my template would look like below using include files for everything common and add specific js and css for the current page.
<!DOCTYPE html>
<html>
<head>
<?php include_once "includes/myCSS.php ?>
<?php include_once "includes/myJS.php ?>
<script src="js/special_js_file_this_page_only.js"></script>
  <style>
/*custom css for this page only*/
</style>

  <meta charset="utf-8">
  <title>My Site</title>
</head>
<body>
<?php include_once "includes/nav.php ?>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->
<?php include_once "includes/footer.php ?>
</body>
</html>

Open in new window


I have looked at, but not used yeoman.  You are basically building items you use over and over again as json data and the code uses the json data to build your app.  I don't believe it will manage templates as you did in DW.

https://www.youtube.com/watch?v=gKiaLSJW5xI
0
Fajer39Author Commented:
This is very useful info Scott, thank you. But the thing is that I kind of know how to use ST2 very efficiently now - I use emmet and with other packages it's very powerful + yeoman on top of that...only thing what I'm missing (to be complete IDE) is that ability to "include".

I think that maybe some grunt package can do it somehow, I don't know but moving from ST2 is not an option now. There's gotta be a way to make yeoman even powerful.

NOTE: using php would be the best probably, but I'm a starting front-end dev (so I don't have own CMS) so I just want something to make things easier. Besides I would have to run XAMP on top of yeoman which I don't think is a good idea and my PC is not that powerful anyway
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you using templating like handlebarsjs or https://mustache.github.io/   https://gist.github.com/defunkt/323624

I could be wrong, but  I don't know of anything that makes a text editor like sublime show included snippet code like Dreamweaver did with libraries or DWT files.   I'm not working on pure front end like you are.

To use php you don' t need to use a cms.  You are only worried about the rendered html.  If you have a header, nav and footer that will always be the same, using an include file makes this process easy by using one file.  It also makes it  easier to code because when you are working on a page, instead of seeing "all" the code, you are really  just dealing with the body area.  

You can make up your own router for pretty urls, but I like using http://www.slimframework.com/

That's about as far as I can take you.  Maybe somebody else has a different option for you.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Author Commented:
I will look on that templating. Thanks.

Actually I foud https://www.npmjs.com/package/grunt-processhtml which can do this trick.

But I was thinking and It might be worth of the time to actually learn some basics of php and use it instead. I don't know. It's just too overwhelming for me right now. But thank you for your advises, I'll wait a while and then I accept your solution.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.