Skip to content

Instantly share code, notes, and snippets.

@wataruoguchi

wataruoguchi/Get-started-trying-Drupal-7.md

Last active August 29, 2015 14:21
Show Gist options
  • Save wataruoguchi/9da00a876961b8e3aff2 to your computer and use it in GitHub Desktop.
Save wataruoguchi/9da00a876961b8e3aff2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Get-started-trying-Drupal-7.md

Get started trying Drupal 7

I'm going to make a single page website.

I know it's little tricky if I use Drupal to build it. I was considering using a module named [Single Page Website](Single Page Website), however it seems it has many dependency and it's not developing currently.

According to a committer of Single Page Site, he has an experience using "Single Page Website", and I thought why he is building "Single Page Site" is he wasn't satisfied with it with some reason. So I decide using "Single Page Site."

Actually it's my first time using Drupal, so let's see what's going on.

Environment

  • OS X Yosemite 10.10.3
  • MAMP
  • Drupal 7.37

Process

  1. Install a theme: Zen
  2. Make a sub-theme based on Zen. Thankfully Zen has good documentations.
  3. Install modules: Single Page Site(7.x-1.1+10-dev), and Menu attributes(7.x-1.0-rc3+1-dev)
  4. Make those modules enable in Home > Administration > Modules
  5. Set configurations in Home > Administration > System > Single Page Site Settings
    1. Menu should be "Main menu".
    2. Fill in Menu item selector.
    3. Turn on "Homepage" checkbox.
  6. Add a basic page.
    1. Select Menu settings
    2. Turn on "Provide a menu link" checkbox.
    3. Set Menu link title.
    4. Set Name in MENU LINK ATTRIBUTES. You can leave it as blank. If you set here it will be a section title.
    5. Set Classes in MENU LINK ATTRIBUTES. This must be the same name as you set in 5.2.
    6. Select URL path settings.
    7. Set URL alias, and save it.

In my structure, I have only one block "main page content" in Content region.

Start styling

In order to start styling, I got a useful style guide, SMACSS.

This is my list for styling tools.

  • Sass
  • SMACSS
  • Compass
  • Firefox(w/ Firebug, FireCompass)

I'm going to follow the link below. Getting started with Drupal7, Zen, Sass and Compass

  1. Install Ruby, Sass, and Compass.
  2. Open the project(sub-theme's directory) by an editor whichever you like. I'm using Vim and Sublime Text 2
  3. In sub-theme directory, command "compass watch .", it let you watch sub-theme directory.
  4. Create a new .scss file and import it in styles.scss. Edit the new scss file.

Also, I want to change html structure. It means I need to change php files.

  1. Copy .tpl.php file(s) which you want to change from original theme's templates directory to sub-theme's templates directory.
  2. Change the php code.
  3. In Drupal, Home > Administration > Configuration > Development > Performance, click a "Clear all caches" button.
  4. Now you can see where you've changed.

Import Bootstrap

I am a big fun of Bootstrap. Even though the code is little bigger, the document and component itself are more than that. I usually import it through CDN.

Example of implementing CDN URLs into Drupal

//CSS
drupal_add_css('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css', array('type' => 'external'));
drupal_add_css('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', array('type' => 'external'));

//JS
drupal_add_js('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', 'external');

Modules

Reference(Japanese)

Reference

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment