Automatically creating patches when linting using CI

Automatically creating patches when linting using CI

Thursday, Mar 28, 2019
Fixing code especially when linting can be interesting; honestly. If you are like me and work on a lot of different languages and tools then you likely do not track changes in coding standards particularly well. However, with effective tooling and schedules, you can recieve code that is constantly updated with patches you can simply apply to your code and move forwards. I already run a bunch of PHP, JavaScript and CSS linting tools and also use YAML linters inside Ansible projects. ...

Read more
Using Stylelint to Magically Improve Your CSS

Using Stylelint to Magically Improve Your CSS

Tuesday, Mar 12, 2019
Stylelint is a great tool for improving your CSS. Not only can you use it to lint (which I recently described as checking the grammar of your code) but you can also use it to fix your code to make it both standards-compliant and also able to run effectively. I don’t always like doing non-valid tutorial stuff, so I am working directly with the CSS on this site to improve it. ...

Read more
Structuring SASS

Structuring SASS

Friday, Jul 31, 2015
We’ve been using the Sass preprocessor for a little while now and it’s undoubtedly a brilliant tool for expanding the power of CSS while also making it more maintainable. One of the great beauties of Sass is that it enables you to split your theming files up pretty much however you see fit. This obviously helps you to keep your style rules nicely organised rather than having large files of CSS. ...

Read more
Using Compass' Flexbox Module

Using Compass' Flexbox Module

Thursday, Jul 9, 2015
At Will Hall Online, we love Sass for making our CSS more powerful and streamlined. And we love CSS3 Flexbox for enabling us to create responsive layouts quickly and easily. But until recently, we’d found using the two of them together relatively difficult, because Flexbox requires numerous prefixes to work on as many browsers as possible, and there are a lot of Flexbox related properties, so to write mixins for all of them would take ages. ...

Read more
CSS Hover Pointer Events

CSS Hover Pointer Events

Thursday, Jul 2, 2015
This week we’ve found a new technique for creating semi-transparent css only buttons from list items, which become opaque when hovered over. This is easy enough to do when writing custom markup as you can put anything you like inside an anchor tag, but using some of Drupal’s theme output it isn’t always so simple. In our case, we were finding that the list item area was turning opaque without the anchor being hovered over, giving the impression that it was clickable even though it wasn’t (bad UX alert! ...

Read more
Drupal 7 AdvAgg Module Issue with FlexNav Mobile Menu

Drupal 7 AdvAgg Module Issue with FlexNav Mobile Menu

Monday, Mar 9, 2015
An interesting problem we’ve faced recently was that one one of our sites, our FlexNav based mobile menus were being forced to display even on large devices when advanced css aggregation was switched on. When we switched it off to investigate the problem, it was magically resolved. Turn it back on again, and FlexNav breaks. On some pages of the site, the menus displayed as expected even when aggregation was switched on, though that might have been because those pages were more heavily cached. ...

Read more
Creating a Flexslider Carousel with Image Thumbnail Navigation

Creating a Flexslider Carousel with Image Thumbnail Navigation

Wednesday, Nov 19, 2014
For a recent project, a client wanted us to create a carousel style display of product images which could be cycled through using a panel of thumbnails immediately underneath, or by back and forward buttons. There are numerous tutorials available online regarding how to create this sort of effect, but few specifically aimed at integrating with the Drupal 7 Views module. So we thought we’d make a few notes of our own on the subject. ...

Read more
Using CKEditor Styles in Drupal

Using CKEditor Styles in Drupal

Wednesday, Nov 12, 2014
For a recent project, we’ve been trying to find an easy way of allowing our client’s staff members to create and edit content using a WYSIWYG editor. However, they also wanted a fair degree of control over the layout of the content, without using any html editing. To achieve this, we decided to create a solution inside the WYSIWYG editor in order to keep the user interface as simple as possible. ...

Read more
Desktop Application Style CSS Buttons

Desktop Application Style CSS Buttons

Thursday, Nov 29, 2012
Getting the right amount of visual attractiveness and common interface into a site, so as to make it easy for a user, can be a difficult path to tread. On the one hand, everyone expects that their site should reflect their brand, with visuals, graphics, fonts, image and user interface all being custom to them, however, making web applications that users find easy to se normally means compromising on some parts to make the site navigation easily recognisable. ...

Read more