123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 |
- =====================
- Introduction to Basic
- =====================
- Basic boasts a clean HTML5 structure with extensible CSS classes and IDs for
- unlimited theming possibilities as well as a top-down load order for improved
- SEO. It is fully responsive out-of-the-box and provides an adaptive, elegant,
- SASS-based grid system (Bourbon Neat).
- Basic's goal is to provide themers the building blocks needed to get their
- designs up and running quickly and simply.
- Basic is perfect if you want a simple, smart, and flexible theme starter.
- Less code spam, more ham.
- ============
- Installation
- ============
- Basic utilizes SASS for adaptive grids and layouts and general structure of the
- site. It's recommended to use SASS for building out your theme. The following
- packages are included via 'npm install'
- - SASS (http://sass-lang.com/)
- - Bourbon (http://bourbon.io/)
- - Bourbon Neat (http://neat.bourbon.io/)
- Basic is meant to be YOUR theme. Follow one of the two methods below and you can
- rename 'basic' to another name like 'mytheme'. You're also welcome to keep
- 'basic'.
- 1. DRUSH: The provided drush install script will duplicate the basic theme
- folder and rename all appropriate files and content to the new theme name you
- provide.
- - Download and enable the basic theme: $ drush en basic
- - Set the theme as default $ drush config-set system.theme default basic
- or copy the includes/basic.drush.inc into your .drush folder.
- - Run the provided drush install script: $ drush basic-install
- - The script will first ask you to enter your theme name (eg. My Theme).
- Second, it will ask you to enter a machine name (eg. my_theme).
- - After complete, you can enable your new theme: $drush en my_theme
- - At this time, you can uninstall basic: $drush pmu basic
- - Commence work on your theme!
- 2. MANUAL: To manually change the name of the theme follow these steps BEFORE
- enabling the theme:
- - Rename the theme folder to 'mytheme'
- - Rename basic.info.yml to mytheme.info.yml
- - edit basic.info.yml and change the name, description, project (can be
- deleted), and change all other instances of 'basic' to 'mytheme'
- - Rename basic.libraries.yml to mytheme.libraries.yml
- - Rename basic.theme to mytheme.theme
- - in basic.theme, change each instance of 'basic' to 'mytheme'
- - Rename config/schema/basic.schema.yml to mytheme.schema.yml
- - Rename each file in config/install from block.block.basic_tools.yml (for
- example) to block.block.mytheme_tools.yml
- - Every file in config/install, change each instance of 'basic' to
- 'mytheme'
- - In js/source/scripts.js, change each instance of 'basic' to 'mytheme'
- - In theme-settings.php, change each instance of 'basic' to 'mytheme'
- - In templates/html.html.twig, change each instance of 'basic' to 'mytheme'
- - In templates/menu-local-tasks.html.twig, change each instance of 'basic' to
- 'mytheme'
- - In templates/status-messages.html.twig, change each instance of 'basic' to
- 'mytheme'
- When renaming, remember the following:
- - Do not simply replace every instance of 'basic' in every file in the theme.
- Most of Basic's dependencies use the word 'basic' somewhere and renaming
- these instances will cause Basic to break in unpredictable ways.
- - If you don't rename all these files, you may get a vague and unhelpful error
- message when attempting to enable your theme: "The website encountered an
- unexpected error. Please try again later." Turn on a higher level of error
- logging in your server's php.ini to help determine what you've missed.
- - If you don't bother renaming Basic in the above locations, be advised that
- you will run into conflicts with other versions of Basic on your site. If
- your site uses more than one theme based on Basic, make sure at least one of
- the themes has been renamed properly!
- ============================
- How to compile SASS in Basic
- ============================
- To use SASS and automatically compile it within your theme, please refer to "How
- to Use Grunt with Basic" in the documentation below.
- Install node-sass:
- npm install node-sass -g
- If you don't like Grunt, or would just prefer to use SASS' internal watch
- functionality, simply cd into your theme directory and run:
- node-sass sass -o css --output-style expanded --source-map true --watch
- Or simply compile the latest:
- node-sass sass -o css --output-style expanded --source-map true
- =======================
- What are the files for?
- =======================
- - basic.info.yml
- Provide informations about the theme, like regions and libraries.
- - block.html.twig
- Template to edit the blocks.
- - comment.html.twig
- Template to edit the comments.
- - node.html.twig
- Template to edit the nodes (in content).
- - page.html.twig
- Template to edit the page.
- - basic.theme
- Used to modify Drupal's default behavior before outputting HTML through the
- templates.
- - theme-settings.php
- Provides additional settings in the theme settings page.
- ============
- In /sass
- ============
- - layout/layout.sass
- Defines the layout of the theme (compiles to css/layout/layout.css)
- - theme/print.sass
- Defines the way the theme looks when printed (compiles to css/theme/print.css)
- - components/tabs.sass
- Styles for the admin tabs (compiles to css/components/tabs.css)
- ============
- In /js
- ============
- - modernizr.js
- Modernizr detects HTML and CSS features and applies classes to
- the <html> object you can then reference in your stylesheets. Use the URL at
- the top of the modernizr.js file to customize the features you wish to detect.
- - selectivizr-min.js
- This script will only be loaded for Internet Explorer 8
- through the ie8 theme library. It will provide a JS fallback for CSS :nth-
- child, an important part of the Bourbon Neat grid system, as it is not
- supported in Internet Explorer 8.
- - build/scripts.js & source/scripts.js
- When using Grunt, save files to the
- source folder and a minified version will automatically be saved to the build
- folder. See comments in basic.libraries.yml file to enable the starter
- scripts.js file.
- ===================
- Changing the Layout
- ===================
- The layout used in Basic is fairly similar to the Holy Grail method. It has been
- tested on all major browsers including IE (5 to >10), Opera, Firefox, Safari,
- and Chrome. The purpose of this method is to have a minimal markup for an ideal
- display. For accessibility and search engine optimization, the best order to
- display a page is the following:
- 1. Header
- 2. Content
- 3. Sidebars
- 4. Footer
- This is how the page template is buit in Basic, and it works in fluid and fixed
- layout. Refer to the notes in layout.sass to see how to modify the layout.
- ===========================
- How to Use Grunt with Basic
- ===========================
- Grunt (http://gruntjs.com/) requires Node.JS to be installed on your machine.
- There are various package managers that can handle this for you.
- https://nodejs.org/download/
- Once Node.JS is installed, go to the root folder of Basic and install your Grunt
- packages:
- npm install
- This will install the neccessary node_modules to run Grunt. In order for Grunt
- to work from the command line we are going to need the Grunt CLI. Open a new
- Terminal window and type:
- npm install -g grunt-cli
- This will install the CLI globally. Restart terminal when that is complete and
- you will now be able to use Grunt commands.
- Once installed, cd to the root folder of Basic and run Grunt via the command
- line:
- grunt
- This will initialize Grunt and start watching changes to your SASS files. Voilà!
- ==============
- Updating Basic
- ==============
- Once you start using Basic, you will massively change it until you reach the
- point where it has nothing to do with Basic anymore. Unlike Zen, Basic is not
- intended to be use as a base theme for a sub-theme (even though it is possible
- to do so). Because of this, it is not necessary to update your theme when a new
- version of Basic comes out. Always see Basic as a STARTER, and as soon as you
- start using it, it is not Basic anymore, but your own theme.
- If you didn't rename your theme, but you don't want to be notified when Basic
- has a new version by the update module, simply delete "project = "basic" in
- basic.info.yml.
- ================
- Bugs & Questions
- ================
- Thanks for using Basic, and remember to use the issue queue in drupal.org for
- any questions or bug reports:
- http://drupal.org/project/issues/basic
- ====================
- Current maintainers:
- ====================
- * Steve Krueger (SteveK) - https://www.drupal.org/u/stevek
- * Leah Marsh (leahtard) - https://www.drupal.org/u/leahtard
- * Joël Pittet (joelpittet) - https://www.drupal.org/u/joelpittet
- * Catherine Winters (CatherineOmega) - https://www.drupal.org/u/catherineomega
- * Johannes Schmidt (johannez) - https://www.drupal.org/u/johannez
|