For standard drop downs use:
For dynamic fields (Formidable Pro only), use:
Main Content
Preparing Your WordPress Site for GDPR Compliance
First, a disclaimer: We are not lawyers and this isn't legal advice. Of course, we have a vested interest in your success and want to help where possible. But if you need definitive legal advice, please talk to an attorney.
To Whom Does GDPR Apply?
Everyone. This regulation is not one that applies only to organizations in the European Union as EU privacy regulations have applied in the past. If you have a website that an EU resident can visit, you're impacted! You need to know what's going on. This applies to businesses, non-profits, government agencies, and other organizations. It applies to organizations in the EU, organizations that offer goods and services to EU residents, and any organization that collects data on EU residents. In other words, everyone. No matter what the purpose of your website, it has a global audience. Check your Google analytics from time to time and see how many visitors you receive from EU countries. The numbers may surprise you.
As a reminder, the European Union countries are:
- Austria
- Belgium
- Bulgaria
- Croatia
- Republic of Cyprus
- Czech Republic
- Denmark
- Estonia
- Finland
- France
- Germany
- Greece
- Hungary
- Ireland
- Italy
- Latvia
- Lithuania
- Luxembourg
- Malta
- Netherlands
- Poland
- Portugal
- Romania
- Slovakia
- Slovenia
- Spain
- Sweden
- United Kingdom
What Does GDPR Mean for Your WordPress Site?
Not too long ago, we published a comprehensive article about the European Union's General Data Protection Regulation. It's effective date is May 25, 2018. Here's a great infographic explaining its many far reaching components. As a website owner, there are three basic responsibilities that you are liable for fulfilling: Right to Access, Right to Be Forgotten, and Data Portability.
Please answer these questions:
- Do you have a contact form, or any other form that collects personal information like name, email address, or phone#?
- Can visitors post a comment anywhere on your website?
- Can people purchase products through your website or eCommerce shop?
- Do you provide a forum or message board?
- Do you have a method where visitors can chat with your company directly?
If you answered 'No' to ALL of these questions, your site is probably in good shape and you may not have to do anything to mitigate the compliance risk. If you don't have the information, you don't have to protect it.
General Preparedness
If you answered 'Yes' to any of these question, please read on. Here are some general steps you need to consider:
- Update your privacy policy
- Include a GDPR compliance line
- Specify what information you collect and store from website visitors. ( e.g. ip addresses, device information, access information, cookies, visit duration and tracking, mouse and swipe actions, email, phone, name, address and billing addresses )
- Specify who has access to this personal data. (e.g. you, MailChimp, Google, Salesforce, etc.)
- Specify the contact details of the assigned Data Protection Officer in your organization. For small businesses, this is probably you. Larger businesses and enterprises should have a dedicated senior-level person who carries indemnity insurance to cover the liability of this role. This person should receive data protection training and a certification.
- Provide instructions on how to submit a data access request.
- Specify how long you store personal information.
- Remove all automatic opt-ins on your site. All checkboxes must be empty in online forms. An empty box cannot imply acceptance.
- Collect only information you require to run your business.
- Delete personal information that you no longer use that may be stored on servers, in excel spread sheets, etc.. This includes emails with file attachments that may contain personal information.
- Keep only one version of personal information. You may keep copies for backup and restore purposes only. Up to 4 backups is acceptable. If you keep more, you have to justify it. The location of the backups needs to be captured in your data/security audit.
- Collecting extra information in case you may use it in the future is unlawful. Information you have about individuals for which you have no use must be deleted.
- All data breaches need to be recorded and actioned with preventive measures. Examples of data breaches include:
- Personal information being passed or coming into the possession of an unauthorized data processor or subcontractor.
- Passing of personal data into a non-GDPR compliant country.
- Passing of personal data to a third party without the knowledge of the data subject.
- Personal information leaked as a result of a website hack.
- Have a security data breach response plan and process in place. Here's a link to a helpful toolkit that can help you get started developing a plan if you don't already have one: Security Breach Response Plan Toolkit
- Have a process to comply with someone asking for a copy of their data.
- Verify their identity
- Make sure you have the data before processing the request, if you don't have the data, respond and say, âI don't have the dataâ.
- Do not create more personal data while performing the request
- Process the request
- Record it in your data audit log
- Do it within 20 days.
- Update your contracts, NDAâs, and Privacy policies on your website.
- All staff need to have signed NDAâs and data protection awareness training. A good rule of thumb is to include all staff even if they do not have direct access to personal information in the normal course of their duties.
- All customer contracts have to be updated with a GDPR clause.
What You Can No Longer Do
- You cannot send unsolicited emails to anyone. No more purchased lists or merging lists from different companies into other lists.
- You cannot auto email from abandoned shopping carts offering discounts unless the shopper has opted in for email at the top of the checkout.
- You cannot refuse to give customers their personal details on request.
- You cannot send unsolicited text messages via mobile phone numbers.
Wow! That's a lot, isn't it? You may even be thinking, this must apply only to big businesses. They'll never audit a small business. This thinking is dead wrong! Even if you collect information from a single EU resident, you may be subject to a GDPR audit. They may not audit you right now, but they may at anytime in the future, even if you are not based in the EU. Why take the risk of being cited for non-compliance?
WordPress Specifics
Online Forms1
Make sure you add a checkbox specifically asking the form user if they consent to you storing and using their personal information to communicate with them. The checkbox must be unchecked by default. Also mention if you will send or share the data with any 3rd-parties and why. The consent statement must include a link to your privacy policy.
Visitor Comments
Make sure you add a checkbox specifically asking commenters if they consent to storing their message attached to the e-mail address they've used to comment. The checkbox must be unchecked by default. Also mention if you will send or share the data with any 3rd-parties and why. The consent statement must include a link to your privacy policy.
Web Store Order Forms
Make sure you add a checkbox specifically asking the customer if they consent to you storing and using their personal information to ship the order. This cannot be the same checkbox as the Privacy Policy checkbox you should already have in place. The checkbox must be unchecked by default. Also mention if you will send or share the data with any 3rd-parties and why.
Forums and Message Boards
Make sure you add a checkbox specifically asking forum / board users if they consent to you storing and using their personal information and messages. The checkbox must be unchecked by default. Also mention if you will send or share the data with any 3rd-parties and why. The consent statement must include a link to your privacy policy.
Chat Bots
Make sure you add a checkbox specifically asking chat users if they consent to you storing and using their personal information and messages. The checkbox must be unchecked by default. It's also mentioning how long you will store chat messages or delete them all within 24 hours. Also mention if you will send or share the data with any 3rd-parties and why. The consent statement must include a link to your privacy policy.
Useful Plugins
Delete Me—This plugin is helpful in addressing the Right to be Forgotten. It provides a method for data erasure of a user's profile, comments, etc.. It's available to WordPress admins, but goes a step further if you are comfortable allowing users to delete their own data without having to create a request for it.
Security Audit Log—helps you perform a security audit on your website.
WordFence (Pro version)—Satisfies the GDPR legal requirement to assess and monitor the security of your website to ensure data breaches do not occur. If a breach does occur, you will receive a real time notification from the plugin.
As the website owner, you must also ensure that plugins you use on your site comply with data privacy regulations, even though you are not the plugin developer and have nothing to do with the plugin's internal mechanisms.
Additional Advantage: Privacy Shield Framework
As an additional advantage, you can self-certify your site through the U.S. Department of Commerceâs Privacy Shield framework that theyâve designed with the European Commission and Swiss Administration to help protect US businesses from GDPR compliance issues. The cost for self-certification is scaled based on annual revenue.
1Some of our small business clients are limiting their site's user registrations and form submissions to residents of the United States by including a required State of Residence field on their forms. (take me back)
Formidable Pro CSS Grid and Flex Box
The release of Formidable Forms/Pro 3.0 brings significant and welcome enhancements to this popular form builder plugin. These improvements include new field types, seamless updates, and a beefed up free form builder. Specifically, these include:
- Separate lite and Pro versions
- New and improved form fields
- Star ratings
- New field settings
- Beefed up free form builder
- UI Refresh
- Better RTL and A11Y support
- View shortcodes
- Incremental content
- Check values in the URL with inline conditionals
- Code changes
- Possibly breaking changes
- New Hooks
The final change to really get excited about is the inclusion of CCS grid on the front end. If you don't know what CSS grid is, it has changed the game for laying out content on a page. And, it's supported by all modern browsers, even Microsoft Edge although it was a late entry in the race. The Strategy 11 team has included CSS Grid layout to make it easier to layout your forms and eliminate some of the CSS issues users have reported like including the placement of field descriptions and long labels when set to the left, and section headings ignoring the top margin when they follow a field in a column. CSS Grid eliminates these issues and others.
While CSS Grid is supported by all modern browsers, the lephants in the room remain Microsoft's Internet Explorer versions 10 & 11. These browsers only support the early CCS Grid 1.0 spec, and even at that, it's Microsoft's version of the spec. If you plan on supporting IE 10 & 11, well, we'll leave that discussion for another tutorial.
Formidable's implementation of CSS grid uses a 12-column layout with classes that range from frm1 (1 column of 12) to frm12 (span all 12 columns). This is great if you want an even number of equally spaced fields on a single row. But what if you have a requirement to place an odd number of equally spaced fields on a single row? This is a requirement I had for a job application on a restaurant site. The form requests that applicants fill in their available hours for each day of the week. Obviously, seven days of the week means seven fields with a horizontal layout. It's not mathematically possible to divide 12 grid columns by 7 and achieve the desired result. So how do you do this?
Here's the layout in a Formidable Form:
This is where CSS Flex comes into play. This layout is created using a Formidable Pro section field. If you want to create the same layout as above, first drag and drop a section onto your form. Then, add seven text fields to the section. Label those text fields Monday through Sunday as I have done. Save the form.
Now comes the good part! Click on the Settings tab and navigate to custom HTML. Since we want the flex area wrapping the seven text fields, we have to create a parent div. With CSS flex, the parent div receives the display: flex directive and all child divs auto-magically turn into flex boxes. Navigate to Monday's custom HTML. I've copied the entire source below:
Look at the div I added at the top of the code block. This is the opening tag for the parent flex element. Also notice that I added a class for 'monday' on the second line in the list of classes. For each of the next six days, add a class for that day in its custom HTML.
Since we have an opening div tag for the flex parent, we must add a closing div tag otherwise our display will be a mess. We'll do this in the Sunday custom HTML:
Last, we need the CSS. Add this to your style sheet, to your Form's page, or wherever you add custom css:
For mobile devices, you'll need to change your flex direction from row to column in the appropriate media query.
Is Your Website GDPR Compliant? Big Fines Likely If No!
First, a disclaimer: We are not lawyers and this isn't legal advice. Of course, we have a vested interest in your success and want to help where possible. But if you need definitive legal advice, please talk to an attorney.
The General Data Protection Regulation
The European Unionâs General Data Protection Regulation is a new data protection law that goes into effect on May 25, 2018. The aim of the GDPR is to give EU citizens control over their personal data. It changes the approach businesses world-wide must apply to data privacy. It is the biggest change to data protection in the EU since the 1995 Data Protection Directive.
The GDPR prescripts some significant changes that have the potential to impose a profound impact on many websites that collect and use information about individuals, even if the organization has no physical presence in the EU but collects and uses personal data of EU based individuals.
By now you may be thinking to yourself, âI donât do business with anyone in the EU. This has no bearing on me.â That may be true, but even if you have no physical presence in the EU or intend to do business with anyone living in the EU, you have a website that invites a global audience. All websites invite a global audience, so it does have a bearing on you. When was the last time your Google Analytics showed a period where your site had no visitors from an EU country?
There are two primary aspects of the GDPR: âpersonal dataâ and âprocessing of personal data.â Hereâs how it relates to running a WordPress powered site:
- personal data means âany information relating to an identified or identifiable natural personâ—like name, email, address, or even an IP address,
- processing of personal data means âany operation or set of operations which is performed on personal dataâ. Just storing an IP address in your web server logs is processing of a userâs personal data. All webservers store IP addresses of your site visitors.
There is also a classification called â_sensitive personal data_â, which means any information concerning an individualâs
- Racial or ethnic origin
- political opinions
- religious or philosophical beliefs
- trade union membership
- health data
- genetic data
- sex life or sexual orientation
- past or spent criminal convictions
The importance of preparing for and ensuring compliance with the new law cannot be overstated because of the huge fines of 4% of worldwide turnover up to â¬20m that could be levied for breaches. At exchange rates current as of the time of this writing, â¬20m is over $24.5m USD!
To demonstrate just how important compliance is to major businesses, six months after the guidelines were released in 2016, PwC surveyed 200 CxOs of large US firms to assess the GDPR impact. The results reveal that a majority of the firms have designated the GDPR guidelines as their top data protection priority, with 76% of them prepared to spend in excess of $1 million on GDPR. Even Forbes muses if the GDPR is the ânext Y2Kâ.
WordPress GDPR compliance
What does all of this mean to you? How do you make your website compliant so you wonât experience any WordPress GDPR problems?
Letâs consider some of the usual ways in which a WordPress site might collect user data:
- user registrations
- comments
- contact form entries
- eCommerce sales
- analytics and traffic log solutions
- any other logging tools and plugins
- security tools and plugins
- Newsletter or White Paper mailing lists
The first step in bringing your site into compliance is to conduct a security audit. In general, a security audit reveals how data is being processed and stored on your servers. From there, we can determine the steps that are required to comply with the GDPR.
Some key aspects of WordPress GDPR compliance that you need to implement, regardless of security audit results, include:
Breach notification
If your website is experiencing a data breach of any kind, that breach needs to be communicated to your users within 72 hours of its discovery. A data breach may result in a risk for the rights and freedoms of individuals, due to which, notifying users in a timely manner is a necessity. In WordPress, the term âuserâ may mean regular website users, contact form entries, eCommerce customers, commenters, and possibly others.
How often do you monitor your website for signs of a security breach? Under the GDPR, you now have a legal requirement to assess and monitor the security of your website. The ideal way is to monitor web traffic and web server logs. At the very least, this clause encourages you to use the best security practices available to ensure data breaches do not occur. We can provide the kind of monitoring you need and inform you in real-time of suspected breaches through our Manage or Master Website Care Plans1.
Data Collection, Processing, and Storage
Under the GDPR, all users have the Right to Access, Right to Be Forgotten, and the right to Data Portability.
- Right to Access—provides users with complete transparency in data processing and storage. User have the right, to know what data points are being collected, where are these data points being processed and stored, and the reason behind the collection, processing and storage of the data. EU users must also be provided with a copy of their data free of charge within 40 days of you collecting it.
- Right to Be Forgotten—gives users an option to erase personal data, and stop the further collection and processing of the data. This involves the user withdrawing consent for their personal data from being used.
- Data Portability—this clause grants users the right to download their personal data, for which they have previously given consent, and further transmit that data to a different controller. Itâs encouraged to enforce data policies that enable the processing and storage for only that data that is absolutely necessary. Site owners and controllers should adopt potentially safer policies for data, by limiting the number of data points they collect.
As a WordPress site owner, you have to publish a detailed policy on the personal data points youâre using and how they are being processed and stored.
Next, you need to provide users with a copy of their data. This is the most difficult part of compliance. However, when the time comes, we can only hope that most plugin or tool developers—for those you use on your site—have provided updates with their own solutions to this. Still, itâs advised to have a system in place to extract the required data out of your database. This will very likely require a custom solution.
Truthfully, it may be the wisest move to avoid data storage altogether if you can in certain cases. For example, contact forms could be configured to send all communication directly to your email address instead of storing their details on the server.
WordPress Plugins
Plugins that you use on your site need to comply with the GDPR rules. There may be plugins on your site that havenât been updated in a long time or seemingly abandoned by their developers. While the âhowâ of plugin development is beyond your control, as the site owner, it remains your responsibility to ensure that every plugin can export, provide, and erase any user data it collects.
This can be problematic for some of the most popular plugins out there. For example, tools like Gravity Forms or Jetpack have tons of modules whose job is to collect user data. How will these tools comply with the GDPR exactly? What does this mean to you?
Under the rules, plugins need to approach data compliance from the perspective of the site owner…You! If the nature of the plugin includes anything related to personal data collection, it needs to establish a data flow and inform about the processing of personal data.
If you are the developer of a plugin, provide your users with an addendum that they can add to their websiteâs privacy policy in order to make them GDPR compliant. Using Gravity Forms as the example again, its developers need to let users know how personal data being entered in a contact form is going to be published, and provide an option to remove it themselves, if desired.
As for the other example plugin, Jetpack, Automattic has confirmed on Twitter that they are preparing Jetpack for the GDPR, and further updates would appear in their new privacy related features.
Another popular form tool, Formidable Forms, has published a couple of blog posts so far about building GDPR compliant forms. While this is a good start, their approach may not go far enough. See https://formidableforms.com/gdpr-compliant-formidable-forms/ and https://formidableforms.com/v2-05-forms-gdpr-compliance-view-compatibility/.
You need to make sure you check with the developers of your most important plugins to see how they plan to handle GDPR compliance. If they have no plans, consider finding a replacement tool.
External Tools
There are tools that you may be using on your site to collect names and email addresses that are external to your WordPress installation. Think about an email marketing tool like MailChimp, for example. Itâs very common to integrate these types of tools with your WordPress website. You might use the collected email addresses to send promotional emails, newsletters, or white papers. Depending on how youâve collected those addresses, they may not have been obtained by getting explicit consent from the users.
For instance, a checkbox thatâs selected by default counts as a violation. Under the GDPR, everything relative to your online presence where personal information is collected needs to explicitly request consent and have a privacy policy in place. There are other inferences, too. If you buy a mailing list for some kind of bulk marketing campaign, it would be illegal for you to send emails to the recipients, because no one explicitly granted you their permission to receive emails from you.
Closing Thoughts
The final responsibility for GDPR compliance lies with you, the site owner. There is nothing to suggest that WordPress itself plans any changes to its structure to ensure GDPR compliance. The only assigned change in their planning logs is the addition of a privacy policy for WordPress.
There are many benefits for any business that uses this opportunity to adopt a fresh approach to data privacy and protection. Consider adapting a Privacy by Design approach and its 7 Foundational Principles as a strategy. Compliance with the GDPR is not just an additional burden—it is also a way to build and strengthen trust with customers and employees, enhance business reputation, grow the value of data assets, and enhance risk mitigation.
We donât know how the GDPR can be enforced if you have no physical presence in the EU, but why risk the chance. The investment you make into developing a GDPR compliance strategy, compliant website, and on-going monitoring is a lot less than facing a protracted legal battle and possible fines.
1GDPR compliance monitoring requires a one-time setup fee of $150, in addition to the regular monthly charge. Otherwise, basic security monitoring is provided.
Preparing Genesis Sites for the iPhone X
As the world eagerly awaits the release of Apple's new flagship iPhone X, developers are anxious that their mobile sites will look good on the device because of the notch. The phone's super-retina OLED screen covers the entire face of the phone, except for the "notch" where the camera and other various components are situated. This results is some awkward situations for screen design, like constraining websites to a "safe area" and having white bars on the edges.
viewport-fit
Apple took this concern into account when they released iOS 11. The WebKit team at Apple gave us a way to control this behavior via the viewport meta tag and by implementing CSS constants that are set by the system and cannot be overridden. The viewport option weâll be looking at is viewport-fit and its three possible values:
- contain: The viewport should fully contain the web content. This means position fixed elements will be contained within the safe area on iOS 11.
- cover: The web content should fully cover the viewport. This means position fixed elements will be fixed to the viewport, even if that means they will be obscured by the notch. This is the same behavior we had on iOS 10.
- auto: The default value, the same as contain.
To restore your header bar to the very top of the screen, behind the status bar like it was in iOS 10, youâll want to add viewport-fit=cover to your viewport meta tag. With the Genesis Framework, this is simple. There's already a filter for changing the output of the viewport meta tag. Add this code to functions.php:
The CSS Constants
You're probably familiar with CSS variables, but CSS constants? CSS constants can be accessed by the constant() function in CSS, which has been proposed to the CSS Working Group for standardization. Four layout guide constants have been implemented in Safari for iOS 11 to add safe areas for the notch.
The 4 layout guide constants are:
- constant(safe-area-inset-top): The safe area inset amount (in CSS pixels) from the top of the viewport.
- constant(safe-area-inset-bottom): The safe area inset amount (in CSS pixels) from the bottom of the viewport.
- constant(safe-area-inset-left): The safe area inset amount (in CSS pixels) from the left of the viewport.
- constant(safe-area-inset-right): The safe area inset amount (in CSS pixels) from the right of the viewport.
These CSS constants can be added to margin, padding, or absolute position values such as top or left. In most cases, when you are using viewport-fit=cover, to achieve the desired results you can just add the following to the body tag in your child theme's style.css:
Appleâs final gift to us is that these constants have also been backported to UIWebView.
Customize the Genesis Header with CSS Grid Layout
Genesis Header
Many questions asked on both the Studio Press Community Forum and Genesis WordPress Facebook page relate to refining a child theme's default header. Since we're working with the Genesis sample theme in this tutorial, we know that the default header initially stretches the full width of the page. Add a header-right widget to the theme and the header is split roughly into a 1/3 - 2/3 ratio with the title area in the left third and the widget area in the right 2/3 space. You can see that configuration depicted in Understanding the Genesis Framework Site Header Layout
Other themes use three distinct sections in the header with a left and right menu on either side of a centered logo. Examples of this can be seen in the Studio Press Modern Studio Pro and community marketplace themes like Refined Pro and the more complex Elegance Pro that features multiple rows in the left and right menu areas.
Another popular question is "How can I center the logo in the header?" To answer these questions, we're going to create a flexible header for the Genesis Sample theme using CSS Grid Layout that can be easily adopted to support multiple layouts. Hopefully, you'll be able to apply this information to any Studio Press developed Genesis theme.
The reason I specify Studio Press developed theme is because I've noticed lately there's a tendency with some community marketplace Genesis theme developers to overwrite Genesis Framework generated code with their own variations. Also, if you use a page builder or CSS assistant plugin with your Genesis installation, this tutorial may not provide the results as displayed in this article.
Note: This tutorial focuses on CSS only. It is not going to cover adding widget areas or adjusting code in functions.php. If you want to learn how to add a widget area, please see Add Widget Areas to News Pro Theme. While written specifically for News Pro, the principles discussed in the article can be applied to any Genesis based theme.
What is CSS Grid Layout?
CSS Grid Layout is a CSS layout method designed for the two-dimensional layout of items on a webpage or within an application. The grid system is optimized for user interface design. In the grid layout model, grid container children can be positioned into arbitrary slots in either a predefined flexible or fixed-size layout grid. As of this writing, all modern browsers, with the exception of IE and Edge, support the current CSS Grid draft specification. But, don't worry. An updated Edge is supposed to be released in the near future that supports the latest grid specification. The CSS Grid specification was first presented in 2012. It was initially developed by Microsoft, and IE actually supports an older version of the specification.
There's one important item to note. Chrome is a wildly popular browser that many developers use for site development. For CSS Grid development, please use Firefox. Firefox is the only browser that can highlight CSS grids with its inspect element tool. When you inspect a grid object in Firefox, the inspect element tool will show a little grid-styled hash mark in the CSS panel as shown in this example (indicated by the cursor):
Clicking this hash mark toggles the grid outline on the screen so you can visualize what you are doing.
Understanding the fr Unit
This tutorial uses the fr unit to define the grid. The fr unit is a new dimensional unit created specifically for CSS Grid Layout. With the fr unit, you can create flexible grids without having to calculate percentages or depend on column classes. The fr unit represents a fraction of the available space in the grid container. You'll get a better understanding of how the fr unit works when you watch the first video.
Define the Grid Layout
To clarify our grid's construction, I've removed the default content display actions that enable the site title and description to show on the screen. I've also removed any widgets from the header-right widget area and added a little top margin to the site-header class to push the grid down a little so we can clearly see the outline. This allows us to build the grid with a fresh view. If you want to follow this tutorial step-by-step in your own environment, to remove the default actions, add the following to functions.php:
One other suggestion I'll make before we get started is to uncheck "Show Toolbar when viewing site" on your user profile so the WordPress admin bar doesn't muddy the grid display.
Now that we have the preliminaries out of the way, please go ahead and watch this video to learn the first step to defining your grid.
Keep in mind that the changes we made through the inspect element tool are non-destructive, meaning they are not permanent. All we've done in the video is demonstrate how the CSS affects the grid layout. If you want to make these changes permanent, you have to add the CSS changes to your child theme's style.css. The updated code for the Genesis Sample theme's style.css follows:
Now that you understand the basics for defining your grid, I hope you can see how easy it is to refine your layout to meet your specific aesthetic.
Grid Line Placement
Content placement in a CSS Grid Layout is extremely flexible. You layout content either through auto placement, line positioning, or named grid areas. For more readable code, my preference is named grid areas, which we use in this tutorial to determine our content placement. Let's take a look at line positioning first so we can understand the differences.
Grids always have lines. Lines are either vertical or horizontal. They are always indexed starting with 1. The CSS Grid Layout respects directional language constructs. So with a left-to-right (LTR or sinistrodextral) language like English, the first grid object will be on the left. Objects are indexed from the opposite direction with a negative index. In the example grid below, the grid object labeled "4" could be referenced as column line -1. For right-to-left (RTL or dextrosinistral) languages such as Arabic and Hebrew or derived systems such as the Persian, Urdu, and Yiddish, the indexing system is reversed.
This grid demonstrates line placement:
1
2
3
4
Now here's the source code. First the HTML, then the CSS:
There's a little trick at play here in the CSS to get the borders around the grid areas to display a consistent height and width. Did you spot it? The trick is that we display each of the grid div elements as its own flex box.
If we did nothing else with our grid at this point, any content inserted into it would be auto placed, first either from the left or right across the columns depending on the language direction, then the rows would begin to be filled out from top to bottom.
But let's say we want to stretch the first content area across the entire row. With line positioning, we can add some CSS and to facilitate this, let's add a class to the first div, and because there's going to be space after the #4 grid area, let's also add a class to that div to fill in the empty space.
1
2
3
4
Here's the code for the stretch grid. First the HTML, then the CSS:
Named Grid Areas and Anonymous Text
For this section, I've enabled the display of the title area content by commenting out the code added earlier to functions.php. I've also added a custom menu to the header right widget area, which is a very common user defined configuration with Genesis themes. Doing so produced an unexpected result that will be a common issue with Studio Press themes and CSS Grid Layout. This unexpected result is directly related to how Studio Press themes address float clearing by adding an empty space to the ::before and ::after CSS pseudo-elements.
If you are not familiar with CSS pseudo-elements, they are used to style specified parts of an associated element. For example, they can be used to: style the first letter, or line, of an element, or, insert content before, or after, the content of an element. Pseudo-elements include:
- ::afterâInsert something after the content of an element
- ::beforeâInsert something before the content of an element
- ::firstâletter Selects the first letter of an element
- ::first-lineâSelects the first line of an element
- ::selectionâSelects the portion of an element that is selected by a user
To learn more about CSS pseudo-elements, visit CSS Pseudo-elements.
Let's watch the next video to learn about named grid areas and how to handle anonymous text.
CSS Grid Layout is pretty cool, isn't it? I believe it's a real game changer when designing websites, especially with mobile responsive design. It's reminiscent of the old table layout structures so popular in the early days of web design, but without their inherent shortcomings. Normally once the Document Object Model (DOM) for a webpage is defined in the browser, it is very difficult to reorder elements to suit a particular purpose. With CSS Grid Layout, reordering elements becomes very easy, especially when using grid-template-areas.
One other example to consider is to use CSS Grid Layout for the Genesis Content-Sidebar wrap. There are a lot of questions about how to change the order of the sidebar and content when viewed on a phone. Grid Areas make changing the order of the content and sidebar displays easy. You just assign an element to a different grid area in your media queries. Content areas can be moved around like magic and your future designs will be limited only by your imagination.
If we were to take some of the CSS we created for this tutorial and wrap it in a feature query, we can leave the Genesis delivered CSS intact and create custom CSS just for new browsers. The code we created for .site-header > .wrap would then look like:
Feature Queries and CSS Grid
But what about older browsers that don't support CSS Grid Layout and never will? For older browsers, we use feature queries. With feature queries, CSS has a built-in way for dealing with older browsers that don't support new CSS. If you've ever used Modernizer, you may have an idea of how you might use it; and, if you've ever used a media query, you'll understand how to implement it.
The CSS syntax to use to test if a browser can support CSS Grid is simply:
If we were to take some of the CSS we created for this tutorial and wrap it in a feature query, we can leave the Genesis delivered CSS intact and create custom CSS just for new browsers. The code we created for .site-header > .wrap would then look like:
By using a feature query as above, old browsers will display the Genesis Header as delivered out of the box and new browsers will display the Genesis header with CSS Grid Layout.
Resources
Here are some great resources for learning more about CSS Grid Layout.
Rachel Andrew's Grid By Example
A Complete Guide to Grid
Posts Grid in Genesis using CSS Grid by Sridhar Katakam