|
|
| (15 intermediate revisions by 7 users not shown) |
| Line 1: |
Line 1: |
| | {{Template:WillNotMigrate}} |
| == Overview == | | == Overview == |
|
| |
|
| Line 9: |
Line 10: |
| == The bootstrapbase theme == | | == The bootstrapbase theme == |
|
| |
|
| Moodle's [[Bootstrap]] base theme has rules written using LESS. | | Moodle's bootstrapbase theme has rules written using LESS. |
|
| |
|
| The main LESS file is '''theme/bootstrapbase/less/moodle.less''', with additional files in '''theme/bootstrapbase/less/moodle/''' imported by the main file. | | The main LESS file is '''theme/bootstrapbase/less/moodle.less''', with additional files in '''theme/bootstrapbase/less/moodle/''' imported by the main file. |
| Line 15: |
Line 16: |
| After compiling the LESS files, CSS ends up in '''theme/bootstrapbase/style/moodle.css'''. This file should not be edited manually. | | After compiling the LESS files, CSS ends up in '''theme/bootstrapbase/style/moodle.css'''. This file should not be edited manually. |
|
| |
|
| == Installing Recess == | | == Compiling LESS == |
| | If you want to make changes to the .css generated from these .less files then you need to use a less compiler to build your changes. The supported way to achieve this |
| | is using '''grunt'''. (See [[Grunt]] for details of how to install it). |
|
| |
|
| | After editing the LESS files, compile (minified) your CSS using '''grunt''' as follows: |
|
| |
|
| === Ubuntu === | | <syntaxhighlight lang="bash"> |
| | $ grunt css |
| | </syntaxhighlight> |
|
| |
|
| The following commands should be run to install Recess
| | This will compile and compress the moodle.less & editor.less file (and all the LESS and CSS files it imports) into a single file, moodle.css & editor.css, and store it in the style folder of the bootstrapbase theme. |
|
| |
|
| <code bash>
| | == See also == |
| sudo apt-get install npm nodejs
| | * [[Grunt]] |
| # If the above fails due to the error "The following packages have unmet dependencies",
| |
| # run the commands separately, ie.
| |
| # sudo apt-get install npm
| |
| # and then
| |
| # sudo apt-get install nodejs
| |
| npm install recess -g
| |
| # If the above fails with a "..permission denied.." error,
| |
| # run npm install with sudo:
| |
| # sudo npm install recess -g
| |
| </code>
| |
|
| |
|
| If you find problem installing nodejs with npm, you can use [http://nodejs.org/download/ node.js binaries]
| | [[Category:Themes]] |
| # Download Linux Binaries [http://nodejs.org/download/ node.js binaries]
| |
| # untar it to your local directory and add it to the PATH.
| |
| You can also use following script to get latest version.
| |
| <code bash>
| |
| CURRENT=$(node -v)
| |
| VERSION=$(curl -L -s http://nodejs.org/dist/latest/ \
| |
| | egrep -o '[0-9]+\.[0-9]+\.[0-9]+' \
| |
| | tail -n1)
| |
| PLATFORM=linux
| |
| ARCH=x64
| |
| PREFIX="$HOME/node-v$VERSION-$PLATFORM-$ARCH"
| |
|
| |
| if test "v$VERSION" != "$CURRENT"; then
| |
| echo "Installing node v$VERSION ..."
| |
| mkdir -p "$PREFIX" && \
| |
| curl -# -L http://nodejs.org/dist/v$VERSION/node-v$VERSION-$PLATFORM-$ARCH.tar.gz \
| |
| | tar xzvf - --strip-components=1 -C "$PREFIX"
| |
| echo 'export PATH=$PATH:'"$PREFIX" >> $HOME/.bashrc
| |
| echo "Latest stable version installed at $PREFIX"
| |
| else
| |
| echo "Latest stable version of node already installed."
| |
| fi
| |
| </code>
| |
| <code>npm</code> stands for Node Package Manager, and is the equivalent of apt-get for node.js packages.
| |
| | |
| === Mac OS X ===
| |
| 1. Install the basic node packages from the web site: [http://nodejs.org http://nodejs.org] (or use your favourite package manager to install <code>node</code> and <code>npm</code>).
| |
| | |
| 2. On the command line, install recess like this:
| |
| <code bash>
| |
| npm install recess -g
| |
| </code>
| |
| | |
| === Windows 7 ===
| |
| | |
| In order to install Recess you need to have Node.js installed first, which is relatively simple to do.
| |
| | |
| Go to nodejs.org click install.
| |
| | |
| When installed go to -> Start -> All Programs -> type Node.js into the Search box, then select Node.js Command prompt (black icon) from the list. Now you are ready to install Recess. So at the command line prompt type the following:
| |
| | |
| <code bash>
| |
| npm install recess -g
| |
| </code>
| |
| | |
| <code>npm</code> stands for Node Package Manager, and is the equivalent of apt-get for node.js packages.
| |
| | |
| | |
| == Using Recess ==
| |
| | |
| After editing the LESS files, compile (minified) your CSS as follows:
| |
| | |
| <code bash>
| |
| cd theme/bootstrapbase/less/
| |
| recess --compile --compress moodle.less > ../style/moodle.css
| |
| </code>
| |
| | |
| or if you prefer to run it from the top-level:
| |
| | |
| <code bash>
| |
| recess --compile --compress theme/bootstrapbase/less/moodle.less > theme/bootstrapbase/style/moodle.css
| |
| </code>
| |
| | |
| This will compile and compress the moodle.less file (and all the LESS and CSS files it imports) into a single file, moodle.css, and store it in the style folder of the bootstrapbase theme.
| |
| | |
| Alternatively if you want to view the normal (un-minified) CSS then use the following method.
| |
| | |
| <pre>
| |
| recess --compile moodle.less > ../style/moodle.css
| |
| </pre>
| |
| | |
| '''NOTE:''' if you are getting an empty moodle.css file, this is being caused by a parsing error in your LESS code. A bug in <code>recess</code> currently prevents it giving you helpful error messages in many cases. You will need to examine what you have altered or written to make sure it is complete and the syntax is correct. The <code>lessc</code> compiler is what is used by <code>recess</code> to do the actual compiling and will have been installed automatically along with it. If you call it directly as <code>lessc moodle.less</code> it should give you a helpful error message that points you to where the problem is.
| |
| Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.
|
Overview
LESS (lesscss.org) extends CSS with dynamic behavior such as variables, mixins, operations and functions. It's an advanced way of writing CSS that we use in some themes within Moodle.
Browsers don't interpret it themselves, however, so LESS files need to be converted into normal CSS before use.
Recess is one tool used to compile and compress LESS into CSS under *nix based systems. There are many others tools for LESS.
The bootstrapbase theme
Moodle's bootstrapbase theme has rules written using LESS.
The main LESS file is theme/bootstrapbase/less/moodle.less, with additional files in theme/bootstrapbase/less/moodle/ imported by the main file.
After compiling the LESS files, CSS ends up in theme/bootstrapbase/style/moodle.css. This file should not be edited manually.
Compiling LESS
If you want to make changes to the .css generated from these .less files then you need to use a less compiler to build your changes. The supported way to achieve this
is using grunt. (See Grunt for details of how to install it).
After editing the LESS files, compile (minified) your CSS using grunt as follows:
This will compile and compress the moodle.less & editor.less file (and all the LESS and CSS files it imports) into a single file, moodle.css & editor.css, and store it in the style folder of the bootstrapbase theme.
See also
