Skip to content

Commit

Permalink
Add trademark symbol to VuFind name; match metadata summary to README…
Browse files Browse the repository at this point in the history
… text (#3)

* Add trademark symbol; match config summary to README.
  • Loading branch information
demiankatz authored Dec 13, 2021
1 parent 48fb553 commit 3353742
Show file tree
Hide file tree
Showing 21 changed files with 455 additions and 455 deletions.
8 changes: 4 additions & 4 deletions source/00-preface.rst
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@

Preface
*******
For more than a decade, the free and open source VuFind tool has been providing user-friendly access to information from libraries and other organizations. While the software has a supportive and friendly community and detailed online documentation, it has lacked a comprehensive introductory text to orient new users to its features and options. This book is designed to fill that gap, and help you become comfortable with this flexible application.
For more than a decade, the free and open source VuFind® tool has been providing user-friendly access to information from libraries and other organizations. While the software has a supportive and friendly community and detailed online documentation, it has lacked a comprehensive introductory text to orient new users to its features and options. This book is designed to fill that gap, and help you become comfortable with this flexible application.

The book is divided into six parts:

• Part 1 will help you understand the purpose of VuFind, install the software, and load some MARC records into it.
• Part 1 will help you understand the purpose of VuFind®, install the software, and load some MARC records into it.
• Part 2 will show you how to do some basic configuration and administration of the software.
• Part 3 will show you how to customize the software’s look and feel.
• Part 4 addresses non-MARC records: XML indexing and HTML crawling.
• Part 5 discusses VuFind’s tools for combining different types of searches into a single interface.
• Part 6 wraps up the book with some of the background necessary to do custom programming within the VuFind environment.
• Part 5 discusses VuFind®’s tools for combining different types of searches into a single interface.
• Part 6 wraps up the book with some of the background necessary to do custom programming within the VuFind® environment.

Most chapters are designed to be reasonably stand-alone and will refer back to relevant sections when necessary, so you can skip around and access content out of order if some topics are more relevant to your needs than others.

56 changes: 28 additions & 28 deletions source/01-introduction_to_vufind.rst

Large diffs are not rendered by default.

116 changes: 58 additions & 58 deletions source/02-installing_vufind.rst

Large diffs are not rendered by default.

56 changes: 28 additions & 28 deletions source/03-indexing_marc_records.rst

Large diffs are not rendered by default.

52 changes: 26 additions & 26 deletions source/04-configuring_vufind.rst

Large diffs are not rendered by default.

42 changes: 21 additions & 21 deletions source/05-understanding_solr.rst

Large diffs are not rendered by default.

52 changes: 26 additions & 26 deletions source/06-administering_a_vufind_server.rst

Large diffs are not rendered by default.

58 changes: 29 additions & 29 deletions source/07-creating_a_vufind_theme.rst

Large diffs are not rendered by default.

44 changes: 22 additions & 22 deletions source/08-styling_vufind.rst
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
#########################
Chapter 8. Styling VuFind
#########################
##########################
Chapter 8. Styling VuFind®
##########################


Learning Objectives
-------------------

After reading this chapter, you will understand:

• How to apply custom styles to your VuFind theme.
• How to take advantage of CSS frameworks in VuFind.
• How to use a CSS pre-processor with VuFind.
• How to apply custom styles to your VuFind® theme.
• How to take advantage of CSS frameworks in VuFind®.
• How to use a CSS pre-processor with VuFind®.


8.1 Understanding CSS Frameworks
--------------------------------

Since its very earliest releases, VuFind has relied on CSS frameworks to provide a unified look and feel and to simplify some common layout tasks. As of this writing (when VuFind 7.0 was the most recent release), the Bootstrap framework (https://getbootstrap.com/) is used as the foundation for VuFind’s default themes; in earlier releases, Blueprint (http://www.blueprintcss.org/) and YUI (https://yuilibrary.com/) were used. Regardless of which framework is used, its purpose is the same: to establish some core CSS classes that enable useful functionality like responsive design, grid layout, etc.
Since its very earliest releases, VuFind® has relied on CSS frameworks to provide a unified look and feel and to simplify some common layout tasks. As of this writing (when VuFind® 7.0 was the most recent release), the Bootstrap framework (https://getbootstrap.com/) is used as the foundation for VuFind®’s default themes; in earlier releases, Blueprint (http://www.blueprintcss.org/) and YUI (https://yuilibrary.com/) were used. Regardless of which framework is used, its purpose is the same: to establish some core CSS classes that enable useful functionality like responsive design, grid layout, etc.

Going in depth on any particular framework is beyond the scope of this book; however, understanding the framework you are working with will help you to read and customize the templates in your theme. It should be easy to find a primer for any major framework using the search engine of your choice; just be sure to read about the same version of the framework that VuFind is using, since some frameworks can introduce significant changes when they introduce major new versions. (For example, Bootstrap 3 and Bootstrap 4 are quite different from one another; VuFind still uses Bootstrap 3 as of this writing, but it is possible that Bootstrap 4 may be adopted in the future).
Going in depth on any particular framework is beyond the scope of this book; however, understanding the framework you are working with will help you to read and customize the templates in your theme. It should be easy to find a primer for any major framework using the search engine of your choice; just be sure to read about the same version of the framework that VuFind® is using, since some frameworks can introduce significant changes when they introduce major new versions. (For example, Bootstrap 3 and Bootstrap 4 are quite different from one another; VuFind® still uses Bootstrap 3 as of this writing, but it is possible that Bootstrap 4 may be adopted in the future).

If you are not sure what framework your VuFind theme is using, the theme name (or the name of a parent theme) may help to clarify this. (For example, VuFind’s bootstrap3 theme is the basic implementation using the Bootstrap 3 framework; there are some more heavily styled sub-themes of bootstrap3, such as bootprint3 and sandal, but if you examine the theme.config.php file in either of these themes, you will see that it extends bootstrap3).
If you are not sure what framework your VuFind® theme is using, the theme name (or the name of a parent theme) may help to clarify this. (For example, VuFind®’s bootstrap3 theme is the basic implementation using the Bootstrap 3 framework; there are some more heavily styled sub-themes of bootstrap3, such as bootprint3 and sandal, but if you examine the theme.config.php file in either of these themes, you will see that it extends bootstrap3).

8.2 Understanding CSS Preprocessors
-----------------------------------
Expand All @@ -29,7 +29,7 @@ While CSS is a very powerful language for applying styles to web pages, maintain

A CSS Preprocessor defines a new language (usually a superset of CSS itself) which adds new features like nested blocks, variables, etc. The preprocessor also includes a tool (called a compiler) which interprets files in the new language and translates them into regular CSS so that they can be used on the web. Using a preprocessor introduces a small trade-off: you have a more powerful language for styling your website, but you have to remember to run the compiler to build your CSS when you want to deploy changes.

As of this writing, VuFind’s default themes make use of the LESS preprocessor, and VuFind includes tools for compiling LESS into CSS using either pure PHP (which is slower, but has fewer dependencies) or Javascript (which is faster but requires installation of the Node.js environment on your server). All of VuFind’s LESS files are also distributed in SASS/SCSS format (a different, but very similar, preprocessor) to accommodate users who already use that format in their development workflows. Because front-end development is a fast-evolving area, it is possible that additional preprocessors may be supported in the future, and that some of the currently-supported formats may eventually be abandoned.
As of this writing, VuFind®’s default themes make use of the LESS preprocessor, and VuFind® includes tools for compiling LESS into CSS using either pure PHP (which is slower, but has fewer dependencies) or Javascript (which is faster but requires installation of the Node.js environment on your server). All of VuFind®’s LESS files are also distributed in SASS/SCSS format (a different, but very similar, preprocessor) to accommodate users who already use that format in their development workflows. Because front-end development is a fast-evolving area, it is possible that additional preprocessors may be supported in the future, and that some of the currently-supported formats may eventually be abandoned.

As with CSS frameworks, going in depth on CSS preprocessors is beyond the scope of this text, but tutorials should be available online for LESS and other popular formats.

Expand All @@ -41,7 +41,7 @@ If you want to add some custom styles to your local theme, you should consider w
8.3.1 Adding a Custom CSS File
_______________________________

To add a custom CSS file to your theme, you can simply edit your theme’s theme.config.php file, and add a new CSS filename to the ‘css’ element of the configuration. All CSS files listed in this array will be loaded on every page of VuFind’s interface, so this is the best way to make global changes. Because of VuFind’s theme inheritance, it is important to give your CSS file a unique name; if you give it the same name as one of the CSS files in a parent theme, it will completely replace that existing file rather than being added to it.
To add a custom CSS file to your theme, you can simply edit your theme’s theme.config.php file, and add a new CSS filename to the ‘css’ element of the configuration. All CSS files listed in this array will be loaded on every page of VuFind®’s interface, so this is the best way to make global changes. Because of VuFind®’s theme inheritance, it is important to give your CSS file a unique name; if you give it the same name as one of the CSS files in a parent theme, it will completely replace that existing file rather than being added to it.

As an example, assume that you have created a custom theme named “localtheme” as described in section 7.2 above, and you want to change the body background color to a pale gray color.

Expand All @@ -65,34 +65,34 @@ You should add a comma on the end of the ‘extends’ line, and put a ‘css’
'css' => ['myinstitution.css']
];
This tells VuFind to add a CSS file called myinstitution.css to every page of its interface; we chose the name myinstitution.css to avoid any possible naming conflict with the core themes (of course, you could replace “myinstitution” with the actual name of your institution if you wished). You only need to specify the filename itself, not any path information; VuFind will search for this filename in your theme’s css folder, and should it fail to find it, it will also search through all of the parent themes.
This tells VuFind® to add a CSS file called myinstitution.css to every page of its interface; we chose the name myinstitution.css to avoid any possible naming conflict with the core themes (of course, you could replace “myinstitution” with the actual name of your institution if you wished). You only need to specify the filename itself, not any path information; VuFind® will search for this filename in your theme’s css folder, and should it fail to find it, it will also search through all of the parent themes.

In order to ensure that VuFind actually finds something when it does its search, you should also create the expected file by editing $VUFIND_HOME/themes/localtheme/css/myinstitution.css. You can paste in this content:
In order to ensure that VuFind® actually finds something when it does its search, you should also create the expected file by editing $VUFIND_HOME/themes/localtheme/css/myinstitution.css. You can paste in this content:

.. code-block:: css
body {
background-color: #d0d0d8;
}
Now if you refresh VuFind in your browser, you should see that the local theme’s default background color has changed.
Now if you refresh VuFind® in your browser, you should see that the local theme’s default background color has changed.

8.3.2 Adding a Custom LESS File
_______________________________

VuFind’s provided themes are set up so that all of the LESS files provided are compiled into a single CSS file called “compiled.css.” This setup makes adding a new LESS file a little bit complicated. Fortunately, the sample theme created by the generate command (see section 7.2) creates some example LESS files for you, providing a helpful foundation for you to build upon.
VuFind®’s provided themes are set up so that all of the LESS files provided are compiled into a single CSS file called “compiled.css.” This setup makes adding a new LESS file a little bit complicated. Fortunately, the sample theme created by the generate command (see section 7.2) creates some example LESS files for you, providing a helpful foundation for you to build upon.

If you look in $VUFIND_HOME/themes/localtheme/less after generating the theme, you will see three files: compiled.less, which is the top-level file that VuFind will use to compile the LESS into CSS, based on configuration inherited from a parent theme. All this file does is include custom.less, which is the place where you can put your own custom styles.
If you look in $VUFIND_HOME/themes/localtheme/less after generating the theme, you will see three files: compiled.less, which is the top-level file that VuFind® will use to compile the LESS into CSS, based on configuration inherited from a parent theme. All this file does is include custom.less, which is the place where you can put your own custom styles.

If you edit custom.less, you will see that its first line is:

.. code-block:: less
@import “bootstrap”;
This pulls in the default Bootstrap framework styles, which you will need to take advantage of the framework and to make sure that default VuFind templates display correctly. You should leave this line alone.
This pulls in the default Bootstrap framework styles, which you will need to take advantage of the framework and to make sure that default VuFind® templates display correctly. You should leave this line alone.

Everything else in custom.less is an example, and you are free to change or remove it. The provided example shows how to define some variables (like “@active-orange” and “@dark-green”) for internal use, and also how to override some core Bootstrap and VuFind variables (like @brand-primary and @body-bg) to change the way the theme looks without having to build CSS stanzas. There are also some more specific example styles below the variables, and the file ends by demonstrating that you can use @import statements to pull in additional files if you want; the home-page.less file is an example of this capability.
Everything else in custom.less is an example, and you are free to change or remove it. The provided example shows how to define some variables (like “@active-orange” and “@dark-green”) for internal use, and also how to override some core Bootstrap and VuFind® variables (like @brand-primary and @body-bg) to change the way the theme looks without having to build CSS stanzas. There are also some more specific example styles below the variables, and the file ends by demonstrating that you can use @import statements to pull in additional files if you want; the home-page.less file is an example of this capability.

If you wanted to implement the same background color change that was used as an example in 8.3.1, you could accomplish it here by editing a single variable and then recompiling the LESS.

Expand Down Expand Up @@ -144,16 +144,16 @@ Once grunt is installed, you can compile your LESS with:
Additional Resources
--------------------

The Bootstrap 3 documentation is available at https://getbootstrap.com/docs/3.3/. You can learn more about LESS at the language’s official website (http://lesscss.org/). VuFind’s use of CSS preprocessing is discussed in more detail on this wiki page: https://vufind.org/wiki/development:architecture:less.
The Bootstrap 3 documentation is available at https://getbootstrap.com/docs/3.3/. You can learn more about LESS at the language’s official website (http://lesscss.org/). VuFind®’s use of CSS preprocessing is discussed in more detail on this wiki page: https://vufind.org/wiki/development:architecture:less.

Summary
-------

VuFind’s themes are built using popular CSS frameworks, establishing useful conventions and basic functionality. VuFind also uses CSS preprocessing to work around some of the limitations of CSS when designing its styles. When building your own theme, you can choose to add simple CSS files, or you can do a bit more work to access the full power of preprocessing.
VuFind®’s themes are built using popular CSS frameworks, establishing useful conventions and basic functionality. VuFind® also uses CSS preprocessing to work around some of the limitations of CSS when designing its styles. When building your own theme, you can choose to add simple CSS files, or you can do a bit more work to access the full power of preprocessing.

Review Questions
----------------

1. Why does VuFind use CSS frameworks?
2. Why does VuFind use a CSS preprocessor?
1. Why does VuFind® use CSS frameworks?
2. Why does VuFind® use a CSS preprocessor?
3. What are the advantages and disadvantages of using custom CSS vs. using custom LESS?
Loading

0 comments on commit 3353742

Please sign in to comment.