{"id":4786,"date":"2017-05-09T10:30:53","date_gmt":"2017-05-09T10:30:53","guid":{"rendered":"http:\/\/2017.europe.wordcamp.org\/?p=4786"},"modified":"2018-06-06T05:55:15","modified_gmt":"2018-06-06T05:55:15","slug":"using-style-guides-for-modular-wordcamp-designs","status":"publish","type":"post","link":"https:\/\/europe.wordcamp.org\/2017\/using-style-guides-for-modular-wordcamp-designs\/","title":{"rendered":"Using Style Guides for modular WordCamp designs"},"content":{"rendered":"

\"\"Yesterday we published an update<\/a> on make.wordpress.org about our new\u00a0WordCamp theme called\u00a0CampSite 2017<\/a>. That’s a theme\u00a0we are building<\/a> within our WCEU Design team and is now ready for a review. In today’s article, we will show you how to work with style guides\u00a0which you can use to style your WordCamp website.
\n<\/p>\n

When designing WordCamp websites, we have a choice of available themes and custom CSS to work with. We can do some basic visual customisation within the Customiser<\/strong> (colours, backgrounds, etc.) if the theme supports it \u2014 but we need to use custom CSS to completely restyle the website.<\/p>\n

It\u2019s important to note that due to the technical restrictions of WordCamp sites we can\u2019t modify the theme’s HTML or JS, so it\u2019s only natural to choose the theme that fits our needs best \u2014 either with widget areas or a flexible layout foundation. Besides the theme’s HTML base, shortcodes are also available for adding new functionality, either handling ticketing or displaying attendees and speakers. Shortcodes also output HTML code that we have no control over, so it can be tricky to account for all use\u2013cases.<\/p>\n

If you were to design (or test) directly in the browser on a staging environment, you would have to duplicate the WordCamp website functionality on your development server or locally \u2014 probably by using Varying Vagrant Vagrants<\/a> (VVV). While this is a great way to get you started it\u2019s not a quick or easy<\/strong> way to setup the theme with all required functionality locally or on a staging server. Especially if you are a front\u2013end developer or a designer who writes HTML\/CSS.<\/p>\n

Components and Style Guides<\/h2>\n

We are working on documenting patterns in the form of a style guide<\/a> \u2014 from available colours and fonts to different modules and widgets which will empower more people to see the inner workings of a theme design.<\/p>\n

\"WordCamp
WordCamp Europe 2017 Style Guide<\/figcaption><\/figure>\n

The style guide is generated directly from the CSS<\/strong> (or SCSS in our case) by using Knyle Style Sheets<\/a> (KSS) methodology. Markup examples inside our CSS are documented manually, but they enable us to style things quickly and offer live preview while writing CSS.<\/p>\n

To keep the CSS readable, we opted to use codeguide.co<\/a> standards for developing sustainable CSS. By utilising Inverted Triangle CSS<\/a> methodology (ITCSS) by Harry Roberts, we also ensure that our CSS architecture remains scalable and maintainable<\/strong>. This will empower designers and developers to use our basic styles and build their components on top of them.<\/p>\n

Even if you don\u2019t wish to base your code on top of ours, you can still use our code examples from the KSS syntax and set up a build process that works best for you. The KSS specification has also been implemented<\/a> in Python, Node.js, PHP and Java.<\/p>\n

Code examples in our style guide have been inputted manually to keep things simple. If the code on the shortcode for attendees, for example, changes it should be updated manually in the style guide as well. Other blocks (comments, posts, branding, etc.) are based on the WordCamp Base Redux theme<\/strong> which is our theme of choice for WordCamp Europe (until we\u2019re able to release the new CampSite 2017 default theme). When the new and improved WordCamp theme sees the light of day \u2014 we\u2019ll promptly update the style guide markup to reflect these changes.<\/p>\n

\"CSS
CSS code and a generated component in the style guide<\/figcaption><\/figure>\n

One of the downsides though is the mobile\/desktop menu switchers which work by adjusting the HTML classes via JavaScript. To simulate that we should replicate that JavaScript snippet in the style guide template or create another component showcase specifically for the mobile menu.<\/p>\n

Inspiration From the Community<\/h2>\n

The style guide we\u2019re working on will be released open source<\/strong> \u2014 available to all, but would not be bundled with the WordCamp theme itself. It will be available to use in conjunction with the theme or as a place to see all the building blocks of the WordCamp website.<\/p>\n

\"Blank
Form elements and heading styles examples<\/figcaption><\/figure>\n

Since our style guide documentation is generated automatically with the help of KSS\u2019s machine parsable syntax \u2014 we are hoping that more people will get on on board using this technique and share their design resources for the benefit of the community.<\/p>\n

Wouldn\u2019t it be great if you could explore a WordCamp website design in layers as opposed to viewing source and inspecting elements in the browser? With the help of the style guide and modular CSS you can pinpoint the exact styles for one of our modules such as Ticket call\u2013to\u2013action<\/a> and replicate it on your WordCamp site. We are excited to see where that road leads.<\/p>\n

Getting Started<\/h2>\n

Our current style guide version is created automatically with the help of KSS node and Gulp<\/strong>. We use various Gulp plugins to compile SCSS, auto prefix and minify CSS. Images are also optimised \u2014 which are then uploaded to the WordPress media library. Finally, KSS node is responsible for generating the style guide out of CSS comments. To keep the styling process as efficient as possible we use browser sync plugin auto refreshes the style guide after each SCSS change<\/strong>.<\/p>\n

Our WordCamp Europe 2017 style guide<\/strong> follows a modular approach so each component is saved as a single *.scss<\/code> file. We also utilise the Modular scale plugin, Susy for grids and Bourbon, a simple and lightweight mixin library.<\/p>\n

To get you started, we have prepared a blank WordCamp style guide<\/strong> \u2014\u00a0download the style guide\u00a0GitHub repository<\/a> (or clone it) and follow instructions to setup everything on your machine. If you want to change how the style guide<\/a> looks, you can change the _styleguide.scss<\/code> or even the style guide template styleguide-template\/index.html<\/code>.<\/p>\n

To update the welcome text and style guide front page, modify the styleguide.md<\/code>. All settings SCSS files (colours, typography, referenced background images etc.) are prefixed with _settings<\/code>. That way you can change the colour scheme or typography options in one place and update the whole style guide at once<\/strong> \u2014 no need to go over each component by hand. Feel free to add\/remove components you need. Once you are done, create a live refresh<\/em> hook on GitHub and link directly to the \/build\/style.css<\/code> from your WordCamp site. If you need inspiration \u2014 check WordCamp Europe 2017 style guide<\/a>\u00a0or WordCamp Europe 2018 style guide<\/a> on GitHub.<\/p>\n

Share your repository online<\/strong> and show your style guide to the community.<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday we published an update on make.wordpress.org about our new\u00a0WordCamp theme called\u00a0CampSite 2017. That’s a theme\u00a0we are building within our WCEU Design team and is now ready for a review. In today’s article, we will show you how to work with style guides\u00a0which you can use to style your WordCamp website.<\/p>\n","protected":false},"author":7516036,"featured_media":5565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4075,3],"tags":[4209,4210,185,265,4211],"class_list":["post-4786","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-new-wordcamp-theme","category-news","tag-campsite","tag-campsite-2017","tag-design","tag-open-source","tag-style-guide"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/europe.wordcamp.org\/2017\/files\/2017\/05\/campsite-style-guides.jpg?fit=1400%2C800&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7DKI8-1fc","_links":{"self":[{"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/posts\/4786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/users\/7516036"}],"replies":[{"embeddable":true,"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/comments?post=4786"}],"version-history":[{"count":24,"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/posts\/4786\/revisions"}],"predecessor-version":[{"id":8623,"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/posts\/4786\/revisions\/8623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/media\/5565"}],"wp:attachment":[{"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/media?parent=4786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/categories?post=4786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/europe.wordcamp.org\/2017\/wp-json\/wp\/v2\/tags?post=4786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}