Grid is for two-dimensional layout, while flexbox is for one-dimensional layout. Grid allows control of layout from the parent container by defining column and row tracks on the container, rather than adding properties to child items. This allows child items to be positioned and overlap in the grid space without adding widths or heights to them directly. Feature queries can be used to provide an enhanced grid-based layout for supporting browsers while avoiding conflicts with non-supporting browsers.
Today we have CSS specifications for animation and transitions, complex layout, custom properties and much more. In addition to the breadth of modern CSS specifications, our evergreen, auto-updating browsers sneak in new features with every release.
In this talk, I’ll be taking a look at some of the things that CSS is capable of, some of which you might think you need a JavaScript framework or at least a pre-processor to achieve.
Today we have CSS specifications for animation and transitions, complex layout, custom properties and much more. In addition to the breadth of modern CSS specifications, our evergreen, auto-updating browsers sneak in new features with every release.
In this talk, I’ll be taking a look at some of the things that CSS is capable of, some of which you might think you need a JavaScript framework or at least a pre-processor to achieve.
Frontend United: Start using CSS Grid Layout today!Rachel Andrew
Grid Layout is here! What is it? Why is it different to flexbox? How do I get started? What about old browsers? All these questions and more in a high speed tour of the spec.
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
I explain some of the common layout problems that CSS Grid and related specifications attempt to solve - while answering some of the common questions I am asked about Grid Layout.
CSS Layout in 2016 is a mess of hacked together methods using techniques that were never designed for complex web and application layout. However change is in the air, brought to us by specifications such as CSS Grid Layout, Flexbox, and the Box Alignment Module. In this session Rachel will introduce these specifications, explaining how they fit together to create a new system for layout.
Frontend United: Start using CSS Grid Layout today!Rachel Andrew
Grid Layout is here! What is it? Why is it different to flexbox? How do I get started? What about old browsers? All these questions and more in a high speed tour of the spec.
Solving Layout Problems with CSS Grid & Friends - NordicJSRachel Andrew
I explain some of the common layout problems that CSS Grid and related specifications attempt to solve - while answering some of the common questions I am asked about Grid Layout.
CSS Layout in 2016 is a mess of hacked together methods using techniques that were never designed for complex web and application layout. However change is in the air, brought to us by specifications such as CSS Grid Layout, Flexbox, and the Box Alignment Module. In this session Rachel will introduce these specifications, explaining how they fit together to create a new system for layout.
Solving Layout Problems With CSS Grid and FriendsFITC
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Rachel Andrew, Perch CMS
Overview
CSS Grid Layout launched into the majority of our browsers in 2017. As designers and developers have started to use Grid Rachel has been answering a lot of questions about the specifications. In this talk she’ll answer some of the common questions about Grid Layout in production – from dealing with old browsers to what might come next in CSS for layout. There will be plenty of practical tips for you to use in your projects today.
Objective
To give attendees practical ways in which they can use new CSS to solve tricky problems
Target Audience
Front-end developers
Assumed Audience Knowledge
Some CSS knowledge
Five Things Audience Members Will Learn
CSS Grid
Flexbox
Box alignment
Feature queries
CSS tips and tricks
Rachel Andrew
Co-founder of Perch CMS
Find more by Rachel Andrew: http://www.slideshare.net/rachelandrew
All Things Open
October 26-27, 2016
Raleigh, North Carolina
SmashingConf SF: Unlocking the Power of CSS Grid LayoutRachel Andrew
UNLOCKING THE POWER OF CSS GRID LAYOUT
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
In this talk Rachel will be concentrating on a couple of these areas, CSS Box Alignment and CSS Sizing. Rachel will show you practical ways in which a little bit of knowledge in these areas can unlock the full potential of the Grid Specification. You’ll learn how to create useful components and to start thinking of ways in which you can solve design and interface problems in more creative ways.
Grid layout has now landed in all of the mainstream desktop browsers. It's exciting but how do we start to move to using grid layout, and why should we?
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Welocme to ViralQR, your best QR code generator.ViralQR
Welcome to ViralQR, your best QR code generator available on the market!
At ViralQR, we design static and dynamic QR codes. Our mission is to make business operations easier and customer engagement more powerful through the use of QR technology. Be it a small-scale business or a huge enterprise, our easy-to-use platform provides multiple choices that can be tailored according to your company's branding and marketing strategies.
Our Vision
We are here to make the process of creating QR codes easy and smooth, thus enhancing customer interaction and making business more fluid. We very strongly believe in the ability of QR codes to change the world for businesses in their interaction with customers and are set on making that technology accessible and usable far and wide.
Our Achievements
Ever since its inception, we have successfully served many clients by offering QR codes in their marketing, service delivery, and collection of feedback across various industries. Our platform has been recognized for its ease of use and amazing features, which helped a business to make QR codes.
Our Services
At ViralQR, here is a comprehensive suite of services that caters to your very needs:
Static QR Codes: Create free static QR codes. These QR codes are able to store significant information such as URLs, vCards, plain text, emails and SMS, Wi-Fi credentials, and Bitcoin addresses.
Dynamic QR codes: These also have all the advanced features but are subscription-based. They can directly link to PDF files, images, micro-landing pages, social accounts, review forms, business pages, and applications. In addition, they can be branded with CTAs, frames, patterns, colors, and logos to enhance your branding.
Pricing and Packages
Additionally, there is a 14-day free offer to ViralQR, which is an exceptional opportunity for new users to take a feel of this platform. One can easily subscribe from there and experience the full dynamic of using QR codes. The subscription plans are not only meant for business; they are priced very flexibly so that literally every business could afford to benefit from our service.
Why choose us?
ViralQR will provide services for marketing, advertising, catering, retail, and the like. The QR codes can be posted on fliers, packaging, merchandise, and banners, as well as to substitute for cash and cards in a restaurant or coffee shop. With QR codes integrated into your business, improve customer engagement and streamline operations.
Comprehensive Analytics
Subscribers of ViralQR receive detailed analytics and tracking tools in light of having a view of the core values of QR code performance. Our analytics dashboard shows aggregate views and unique views, as well as detailed information about each impression, including time, device, browser, and estimated location by city and country.
So, thank you for choosing ViralQR; we have an offer of nothing but the best in terms of QR code services to meet business diversity!
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
2. Rachel Andrew
▸ CSS Working Group Invited Expert
▸ Google Developer Expert
▸ co-founder Perch CMS
▸ Old Nerd.
▸ You can find me in most places as @rachelandrew you can email
me@rachelandrew.co.uk or check out my site at https://rachelandrew.co.uk
5. Frequently asked questions
▸ What is grid & why is it different to flexbox?
▸ How do I get started using grid in production?
▸ What about old browsers?
▸ Why isn’t <insert browser here> giving us the cool new thing yet?
11. .grid {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-
fill, minmax(200px, 1fr));
}
Grid minmax() and auto-fill
Creating a flexible number of flexible
tracks, with a little bit of grid spec
magic.
http://codepen.io/rachelandrew/pen/evjdLM
12. If you are adding widths to all your
flex items, you probably need grid.
15. .example2 {
display: flex;
flex-wrap: wrap;
}
.example2 > div {
flex: 1 1 0;
}
.example2 > div.bigger {
flex: 4 1 0;
}
Flexbox
Some things grow larger than other
things.
This is defined using flex properties on
the item.
http://codepen.io/rachelandrew/pen/MpBbwX
18. .example1 {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
margin: 20px;
}
Grid
Define column tracks. Items are
constrained by those tracks.
http://codepen.io/rachelandrew/pen/JWBbJP
19.
20. .example2 {
display: grid;
grid-gap: 20px;
grid-template-columns: 2fr 1fr 2fr;
margin: 20px;
}
Grid
To make some tracks larger than
others, we do that when defining the
tracks on the container not on the
item itself.
http://codepen.io/rachelandrew/pen/JWBbJP
25. .container {
display: flex;
}
.box {
flex: 0 0 33.3333%;
}
Flex grid
We add display: flex to the container
however to make a grid out of flex
items we need to use the flex
properties in the items.
28. Grid or Flexbox
… and that’s just the start
‣ Grid allows you to layer items, or for two items to occupy
the same space
‣ Grid allows full control of negative space in your designs
‣ Grid has methods such as the dense packing mode to
backfill gaps in a tight-packed grid
‣ Grid allows you to name lines and areas of your page and
position things against those lines and into the areas.
42. .grid {
display: grid;
grid-gap: 20px;
grid-template-columns:
100px [main-start]
100px 100px 100px [main-end]
100px 100px;
grid-template-rows:
100px [main-start]
100px 100px [main-end] 100px;
}
.item {
grid-area: main;
}
Implicit named areas
Created by having named lines using
an ident with *-start and *-end.
https://codepen.io/rachelandrew/pen/
eWoKmd/
43. https://www.w3.org/TR/css-grid-1/#line-placement
“Note: Named grid areas automatically generate
implicit named lines of this form, so specifying
grid-row-start: foo will choose the start edge of
that named grid area (unless another line named
foo-start was explicitly specified before it).”
48. Grid gives us powerful tools to control
layout via the containing element.
49. Flexbox or Grid?
Use Flexbox when …
‣ Your content is a row OR a column
‣ You want the size of items to dictate their layout
‣ You want to distribute space
50. Flexbox or Grid?
Consider grid when …
‣ You need to control rows and columns
‣ You are adding widths to a flex item in order to make it
line up with rows above.
‣ You want control of the layout from the parent
‣ Items need to occupy the same space or overlap
54. <div class="box-feature">
<img class="box-image" src="http://placehold.it/
900x450" alt="placeholder">
<h2 class="box-feature-title">Featured Item</h2>
<div class="box-content">…</div>
</div>
Feature box
The feature has an image with a
heading and body text overlaid.
55. .box-feature {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(6, 1fr);
}
Feature box
display: grid turns on grid layout
grid-gap defines gutters between
grid items
grid-template-columns creates
column tracks. In this case creating a
grid with 6 equal columns.
56. The fr unit defines a fraction of the
available space in the grid container
57.
58. .box-feature .box-image {
align-self: stretch;
justify-self: stretch;
grid-column: 1 / -1;
grid-row: 1 / 4;
}
Feature box
The image starts at grid column
line 1 and ends at -1, which is the end
line.
It starts at grid row 1, ending at grid
row 4.
Using box alignment properties to
stretch the image over that area.
59. Grid lines respect writing mode.
Column line 1 is on the left and -1 on
the right in a LTR language.
60. Explicit vs. Implicit Grid
▸ The Explicit Grid is created when you define tracks with grid-template-
columns and grid-template-rows
▸ If you place an item outside of that grid, or auto-placed content requires
further row or column tracks these are added by grid as the Implicit Grid.
61.
62. .box-feature .box-feature-title {
grid-column: 3 / -1;
grid-row: 1;
background-color: rgba(0,0,0,0.7);
color: #fff;
align-self: start;
padding: 20px;
}
.box-feature .box-content {
grid-column: 2 / -1;
grid-row: 2;
background-color: rgba(0,0,0,0.7);
color: #fff;
padding: 20px;
}
Feature box
Positioning the content inside the
area that the image is stretched over.
64. Layering items on the grid
▸ You can position items into the same grid cells
▸ Items further down in the source appear on top of earlier items
▸ Control the stack using z-index
70. .box-title {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
.box-feature {
grid-column: 4 / -1;
grid-row: 1 / 2;
}
The listing
Positioning the title top left and the
feature top right
71.
72. .box-newer {
grid-column: auto / span 4;
}
.box-newer.box-media {
grid-row-end: span 2;
}
Larger boxes
Newer items span 4 column tracks. If
they also have a class of box-media
they span 2 row tracks.
76. .box-title {
grid-column: 1 / -1;
grid-row: 1;
}
@media all and (min-width: 53.125em) {
.box-title {
grid-column: 1 / 6;
grid-row: 1 / 3;
}
}
@media all and (min-width: 75em) {
.box-title {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
}
Going responsive
Inside media queries we can redefine
where items sit on the grid.
77. .box-newer {
grid-column: 1 / -1;
}
@media all and (min-width: 28.125em) {
.box-newer {
grid-column: auto / span 6;
}
}
@media all and (min-width: 53.125em) {
.box-newer {
grid-column: auto / span 4;
}
}
Going responsive
Or redefine how many columns they
span.
81. It makes sense to start using grid on
new sites right now.
82. It makes sense to start using <insert
new CSS feature here> on new sites
right now.
83. What about old browsers?
Classes of support
‣ Visual enhancements that can be left to only display if the
user has support
‣ Features you need to find an alternate way of displaying,
not an identical way of displaying.
‣ My website needs to look identical in all browsers.
84. .balloon {
float: left;
width: 429px;
shape-outside: circle(50%);
}
CSS Shapes
A good example of a feature that falls
back well.
https://codepen.io/rachelandrew/pen/KrvyQq
85.
86. What about old browsers?
Classes of support
‣ Visual enhancements that can be left to only display if the
user has support - e.g. CSS Shapes
‣ Features you need to find an alternate way of displaying,
not an identical way of displaying.
‣ My website needs to look identical in all browsers.
87. If your site has to look identical in all
browsers - you can’t take advantage
of the features of grid layout.
89. What about old browsers?
If using display: grid on a container, child items:
‣ Using float, lose their float behaviour
‣ The vertical-align property has no effect
‣ Flex items become grid items
‣ Items set to display: block or inline-block become grid
items
‣ Items set to display: table-cell stop creating anonymous
boxes
90.
91. .listing {
display: flex;
flex-wrap: wrap;
margin: 0 20px;
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 20px;
}
.listing > * {
flex: 1 1 30%;
margin: 0 20px 20px 20px;
}
Adding a flex fallback
Browsers that support display: flex
and not grid will turn the children into
flex, not grid, items.
The flex properties applied to those
items will be ignored by grid layout.
94. Using feature queries
▸ Check whether you need to use then at all, much CSS will just be ignored by
non-supporting browsers.
▸ Write your code for browsers that do not support the feature
▸ Write your code for browsers that do support the feature
▸ Wrap anything that is needed for supporting browsers but would also be
interpreted by non-supporting browsers in a feature query
95. @supports (display: grid) {
//grid code here
}
@supports (--x: 0 ) {
//use custom properties here
}
Feature Queries
Test for support of a property and
value - you can even test for custom
properties!
96. .listing {
display: flex;
flex-wrap: wrap;
margin: 0 20px;
display: grid;
grid-template-columns: repeat(12,1fr);
grid-gap: 20px;
}
.listing > * {
flex: 1 1 30%;
margin: 0 20px 20px 20px;
}
Adding a flex fallback
Browsers that support display: flex
and not grid will turn the children into
flex, not grid, items.
The flex properties applied to those
items will be ignored by grid layout.
97. .listing > * {
flex: 1 1 30%;
margin: 0 20px 20px 20px;
}
@supports(display: grid) {
.listing > * {
margin: 0;
}
}
Using feature queries with grid
Add a margin for flex layout, remove it
if we are using grid layout.
101. .grid > div {
float: left;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, auto);
width: 500px;
}
Float and Clear
The float and clear properties have
no effect on a grid item.
https://codepen.io/rachelandrew/pen/YZeqZv
102. .grid > div {
display: inline-block;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, auto);
width: 500px;
}
display: inline-block
The properties associated with
something being inline-block cease
to apply.
https://codepen.io/rachelandrew/pen/vxdGjQ
103. .grid > div {
display: table-cell;
vertical-align: top;
}
.grid {
border-spacing: 10px;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, auto);
width: 500px;
}
display: table
Anonymous boxes will not be
generated and the item will become a
grid item.
https://codepen.io/rachelandrew/pen/bqLpQN
104. .grid > div {
display: inline-block;
vertical-align: top;
}
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, auto);
width: 500px;
}
The vertical-align property
Can be used as a fallback for box
alignment and ceases to apply on grid
items.
https://codepen.io/rachelandrew/pen/vxdGaQ
110. Edge Grid implementation
▸ Currently tied to the IE10 implementation
▸ Prefixed with -ms
▸ No auto-placement or grid-template-areas layout
▸ For simple line-based positioning it works
▸ More at https://rachelandrew.co.uk/archives/2017/04/04/edge-starts-work-
on-their-grid-implementation-update/
111. IE / Edge Tips
▸ Update to Autoprefixer 7 - previous versions would add -ms-grid prefixes. You
don’t generally want this!
▸ Post from Greg Whitworth of Microsoft if you are using Feature Queries and
want to support future Edge: http://gwhitworth.com/blog/2017/05/
accurately-checking-for-css-grid-support-in-microsoft-edge
112. March 2017 March 2017 March 2017 March 2017 March 2017 Soooooon!
122. Get involved with CSS
▸ Comment on or raise new issues against CSS specifications
▸ Raise bugs against browsers
▸ Vote on features where browsers have a platform to do so
▸ Write about new features - it demonstrates we want them
▸ Be nice while doing it. Browser engineers and spec editors work within
constraints just as you do in your projects.
123. Find out more
I made you some resources
Visit Grid by Example for worked examples, patterns with
fallbacks, and a free video tutorial:
gridbyexample.com
I created a huge set of guides for MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/
CSS_Grid_Layout
Over 4 years of grid thoughts on my site at:
https://rachelandrew.co.uk/archives/tag/cssgrid