flexboxgrid to npm

package-lock.json

@@ -8219,6 +8219,14 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
       "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA=="
     },
+    "flexboxgrid2": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/flexboxgrid2/-/flexboxgrid2-7.2.1.tgz",
+      "integrity": "sha512-O2bO5ZcBXnFy7cYmyt/CKb6CuwzNuUPxWJt8WOiaot8SetE9zyUahXGTSpKDm3+CTYQ5YeEMPeunMdjcxKJz4w==",
+      "requires": {
+        "normalize.css": "^7.0.0"
+      }
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -14378,6 +14386,11 @@
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
       "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg=="
     },
+    "normalize.css": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz",
+      "integrity": "sha1-q/sd2CRwZ04DIrU86xqvQSk45L8="
+    },
     "npm-conf": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
@@ -16701,6 +16714,15 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "react-flexbox-grid": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-flexbox-grid/-/react-flexbox-grid-2.1.2.tgz",
+      "integrity": "sha512-lj1oVnIJ7TY3W6tPjFUxlUYd1DLFxEg8RiX3HAYVvreE3O9HU9n2390CFoPQ+qk1E+5MXa2t/mLMafFLAa8+7Q==",
+      "requires": {
+        "flexboxgrid2": "^7.2.0",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-frame-component": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.2.tgz",

package.json

@@ -38,6 +38,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-flexbox-grid": "^2.1.2",
     "react-github-btn": "^1.2.0",
     "react-helmet": "^6.1.0"
   },

src/components/Article/Article.scss

@@ -112,7 +112,7 @@
   }
 }
 
-@media (min-width: 768px) and (max-width: 1023px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .article {
     article {
       & .article-image {

src/components/Description/Description.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import './Description.scss'
 
 import HelloIcon from '../../images/hello-icon.svg'
@@ -6,9 +7,9 @@ import HelloIcon from '../../images/hello-icon.svg'
 const Description = () => {
   return (
     <section className="description">
-      <div className="container-fluid">
+      <Grid fluid>
-        <div className="row">
+        <Row>
-          <div className="col-sm-8 col-sm-offset-2">
+          <Col md={8} mdOffset={2}>
             <div className="desctiption-content">
               <div className="description-content__heading">
                 <span>devthread.ru</span><br />
@@ -21,9 +22,9 @@ const Description = () => {
                 <HelloIcon />
               </div>
             </div>
-          </div>
+          </Col>
-        </div>
+        </Row>
-      </div>
+      </Grid>
     </section>
   )
 }

src/components/Offers/Offers.scss

@@ -91,7 +91,7 @@
   }
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 991px) {
   .offers {
     display: none;
   }

src/components/SEO/SEO.js

@@ -38,7 +38,6 @@ const SEO = ({ title, description, image, type }) => {
       <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
       <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
       <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-      {/* <link rel="manifest" href="/site.webmanifest" /> */}
       <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#191919" />
       <meta name="msapplication-TileColor" content="#ffffff" />
       <meta name="theme-color" content="#ffffff" />

src/pages/404.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Grid } from 'react-flexbox-grid'
 import { Link } from 'gatsby'
 import Layout from '../components/Layout/Layout'
 
@@ -6,13 +7,13 @@ const NotFound = () => {
   return (
     <Layout>
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
           <div className="error">
             <span>#404</span>
             <h1>страница не найдена</h1>
             <Link to='/'>вернуться на главную</Link>
           </div>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )

src/pages/about.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -11,16 +12,16 @@ const AboutPage = () => {
     <Layout>
       <SEO title='О сайте' description='Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства.' />
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <About title={title} pageTitle={menuLinks.filter(page => page.link === '/about')[0].name} social={social} />
-            </div>
+            </Col>
-            <div className="col-md-3 col-xs-12">
+            <Col lg={3} xs={12}>
               <Offers />
-            </div>
+            </Col>
-          </div>
+          </Row>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )

src/pages/articles.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
@@ -16,9 +17,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
     <Layout>
       <SEO title='Статьи' />
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <div className="articles">
                 <div className="articles-heading">
                   <h1>Статьи</h1>
@@ -28,18 +29,18 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
                 </Categories>
                 <Search articlesLength={edges.edges.length} />
               </div>
-            </div>
+            </Col>
-          </div>
+          </Row>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <Articles data={edges} /> 
               <Newsletter />
-            </div>
+            </Col >
-            <div className="col-md-3 col-xs-12">
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
+            </Col >
-          </div>
+          </Row>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )

src/pages/books.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -13,9 +14,9 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
     <Layout>
       <SEO title='Ресурсы' />
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <div className="books">
                 <div className="books-heading">
                   <BooksIcon />
@@ -27,18 +28,18 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
                   </p>
                 </div>
               </div>
-            </div>
+            </Col>
-          </div>
+          </Row>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <Books data={edges} />
               <Newsletter />
-            </div>
+            </Col>
-            <div className="col-md-3 col-xs-12">
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
+            </Col>
-          </div>
+          </Row>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )

src/pages/contacts.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Contacts from '../components/Contacts/Contacts'
@@ -8,13 +9,13 @@ const ContactsPage = () => {
     <Layout>
       <SEO title='📝 Контакты' description='Для того чтобы задать вопрос, сообщить об ошибках или просто поздороваться, вы можете воспользоваться формой обратной связи или использовать контактные данные.' />
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
-          <div className="row">
+          <Row>
-            <div className="col-md-10 col-md-offset-1">
+            <Col lg={10} lgOffset={1}>
               <Contacts />
-            </div>
+            </Col>
-          </div>
+          </Row>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )

src/pages/index.js

@@ -9,33 +9,35 @@ import Newsletter from '../components/Newsletter/Newsletter'
 
 import ArrowNext from '../images/arrow-next.svg'
 
+import { Grid, Row, Col } from 'react-flexbox-grid'
+
 const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO />
       <Description />
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
-          <div className="row">
+          <Row>
-            <div className="col-xs-12">
+            <Col xs={12}>
               <div className="articles">
                 <div className="articles-heading">
                   <h3>Последние статьи</h3>
                   <Link to='/articles'>смотреть все <ArrowNext /></Link>
                 </div>
               </div>
-            </div>
+            </Col>
-          </div>
+          </Row>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <Articles data={edges} /> 
               <Newsletter />
-            </div>
+            </Col>
-            <div className="col-md-3 col-xs-12">
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
+            </Col>
-          </div>
+          </Row>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )

src/styles/global.scss

@@ -1,12 +1,11 @@
-@import './flexboxgrid.min';
 @import './variables.scss';
 @import './fonts.scss';
 
 .container-fluid {
   max-width: 1200px;
   margin: 0 auto;
-  padding-right: 15px;
+  padding-right: 15px !important;
-  padding-left: 15px;
+  padding-left: 15px !important;
 }
 
 .btn-primary {

src/templates/articleTemplate.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import Layout from '../components/Layout/Layout'
 import Article from '../components/Article/Article'
 import Offers from '../components/Offers/Offers'
@@ -13,18 +14,18 @@ const articleTemplate = ({ data }) => {
   return (
     <Layout>
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <Article data={frontmatter} html={html} />
               <Newsletter />
               <MoreArticles />
-            </div>
+            </Col>
-            <div className="col-md-3 col-xs-12">
+            <Col lg={3} xs={12}>
               <Offers />
-            </div>
+            </Col>
-          </div>
+          </Row>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )

src/templates/categoryTemplate.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
@@ -16,9 +17,9 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
     <Layout>
       <SEO title={title} />
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <div className="articles">
                 <div className="articles-heading">
                   <h1>Статьи</h1>
@@ -31,18 +32,18 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
                   <p>Показано {edges.edges.length} из категории "{title}"</p>
                 </div>
               </div>
-            </div>
+            </Col>
-          </div>
+          </Row>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <Articles data={edges} /> 
               <Newsletter />
-            </div>
+            </Col>
-            <div className="col-md-3 col-xs-12">
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
+            </Col>
-          </div>
+          </Row>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )

src/templates/tagTemplate.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
@@ -16,9 +17,9 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
     <Layout>
       <SEO title={title} />
       <main>
-        <div className="container-fluid">
+        <Grid fluid>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <div className="articles">
                 <div className="articles-heading">
                   <h1>Статьи</h1>
@@ -31,18 +32,18 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
                   <p>Показано {edges.edges.length} по тегу "{title}"</p>
                 </div>
               </div>
-            </div>
+            </Col>
-          </div>
+          </Row>
-          <div className="row">
+          <Row>
-            <div className="col-md-9 col-xs-12">
+            <Col lg={9} xs={12}>
               <Articles data={edges} /> 
               <Newsletter />
-            </div>
+            </Col>
-            <div className="col-md-3 col-xs-12">
+            <Col lg={3} xs={12}>
               <Offers /> 
-            </div>
+            </Col>
-          </div>
+          </Row>
-        </div>
+        </Grid>
       </main>
     </Layout>
   )