Merge branch 'master' of github.com:squidit/css into production

squidit · Jun 9, 2021 · 987fbf2 · 987fbf2
2 parents 62c5616 + 5ef1c37
commit 987fbf2
Show file tree

Hide file tree

Showing 10 changed files with 210 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@
 - [Development](#development)
   - [Write Documentation](#write-documentation)
 - [Production](#production)
+  - [Deploy on jsdelivr](#deploy-on-jsdelivr)
 - [Documentation](#documentation)
 - [External Libraries and Inspiration](#external-libraries-and-inspiration)
   - [Animate.css](#animatecss)
@@ -126,6 +127,21 @@ See Intructions [here](https://github.com/squidit/css/blob/master/src/docs/READM
 
 2. Commit and Push to Git Remote
 
+### Deploy on jsdelivr
+
+The official CDN for Squid CSS is jsdelivr, which is even where the framework documentation consumes assets.
+
+1. Run `git checkout production`
+
+2. Run `git pull origin master`
+
+3. Run `rm -rf docs` and resolve the conflicts that remain
+
+4. Do a `git commit` and `git push origin production`
+
+5. On [GitHub Releases](https://github.com/squidit/css/releases) create a new release, with a new tag version** and using `production` branch
+
+**Important to use the same tag as package.json
 ## Documentation
 
 See Docs [here](https://css.squidit.com.br)

diff --git a/dist/css/squid.min.css b/dist/css/squid.min.css
diff --git a/dist/css/squid.min.css.map b/dist/css/squid.min.css.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/css",
-  "version": "1.0.81",
+  "version": "1.0.82",
   "scripts": {
     "start": "gulp watch",
     "css": "sass src/scss/squid.scss:dist/css/squid.min.css --style compressed",

diff --git a/src/docs/doczrc.js b/src/docs/doczrc.js
@@ -2,7 +2,7 @@ export default {
   title: 'CSS - Components Squid Style',
   description: 'Front-end framework style created by Squid',
   repository: 'https://github.com/squidit/css',
-  port: 3838,
+  port: 3535,
   menu: [
     'Getting Started',
     'Content',

diff --git a/src/docs/package.json b/src/docs/package.json
@@ -1,16 +1,20 @@
 {
   "name": "@squidit/css-docs",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "scripts": {
     "dev": "docz dev",
     "build": "docz build",
     "serve": "docz serve"
   },
   "dependencies": {
+    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
     "docz": "latest",
+    "docz-core": "^2.3.0",
     "docz-plugin-github-page": "^1.0.4",
     "dotenv": "^10.0.0",
+    "gatsby-plugin-mdx": "^2.7.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0"
   }

diff --git a/src/docs/src/content/table.mdx b/src/docs/src/content/table.mdx
@@ -1,7 +1,7 @@
 ---
 name: Table
 menu: Content
-route: /content/typography
+route: /content/table
 ---
 
 # Table
diff --git a/src/docs/src/content/typography.mdx b/src/docs/src/content/typography.mdx
@@ -8,16 +8,74 @@ route: /content/typography
 
 Documentation and examples for typography.
 
+## Font style
+
+The default font is <a class='pink' href='https://fonts.google.com/specimen/Roboto' target='_blank'>Google Fonts Roboto</a>
+
 ## Heading
 
-| Heading | Exemple          |
-|---------|------------------|
-| h1      | <h1>Title 1</h1> |
-| h2      | <h2>Title 2</h2> |
-| h3      | <h3>Title 3</h3> |
-| h4      | <h4>Title 4</h4> |
-| h5      | <h5>Title 5</h5> |
-| h6      | <h6>Title 6</h6> |
+<table class='background-white black p-2 border-radius' style='max-width: 400px'>
+    <thead>
+        <tr>
+            <th>
+                Heading
+            </th>
+            <th>
+                Exemple
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                h1
+            </td>
+            <td>
+                <h1>Title 1</h1>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                h2
+            </td>
+            <td>
+                <h2>Title 2</h2>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                h3
+            </td>
+            <td>
+                <h3>Title 3</h3>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                h4
+            </td>
+            <td>
+                <h4>Title 4</h4>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                h5
+            </td>
+            <td>
+                <h5>Title 5</h5>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                h6
+            </td>
+            <td>
+                <h6>Title 6</h6>
+            </td>
+        </tr>
+    </tbody>
+</table>
 
 Code, using Html Tags or using classes:
 
@@ -29,7 +87,7 @@ Code, using Html Tags or using classes:
 <h5> Heading 5 </h5>
 <h6> Heading 6 </h6>
 ```
----
+
 ```html
 <p class='h1'> Heading 1 </p>
 <p class='h2'> Heading 2 </p>
@@ -43,54 +101,148 @@ Code, using Html Tags or using classes:
 
 Text-align are available like:
 
-<p class='text-center'>I`m a centered text</p>
+<p class='text-center background-white black border-radius p-2'>I`m a centered text</p>
 
 ```html
 <p class='text-center'>I`m a centered text</p>
 ```
 
 Some values for `text-align` are available with classes:
 
-| Property | Class            |
-|----------|------------------|
-| center   | text-center      |
-| left     | text-left        |
-| right    | text-right       |
-| justify  | text-justify     |
+<table class='background-white black p-2 border-radius' style='max-width: 400px'>
+    <thead>
+        <tr>
+            <th>
+                Property
+            </th>
+            <th>
+                Class
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                center
+            </td>
+            <td>
+                text-center
+            </td>
+        </tr>
+        <tr>
+            <td>
+                left
+            </td>
+            <td>
+                text-left
+            </td>
+        </tr>
+        <tr>
+            <td>
+                right
+            </td>
+            <td>
+                text-right
+            </td>
+        </tr>
+        <tr>
+            <td>
+                justify
+            </td>
+            <td>
+                text-justify
+            </td>
+        </tr>
+    </tbody>
+</table>
 
 ## Weight
 
 Text-weight are available like:
 
-<p class='text-bold'>I`m a bold text</p>
+<p class='text-bold background-white black border-radius p-2'>I`m a bold text</p>
 
 ```html
 <p class='text-bold'>I`m a bold text</p>
 ```
 
 Some values for `text-weight` are available with classes:
 
-| Value | Class        |
-|-------|--------------|
-| 100   | text-thin    |
-| 300   | text-light   |
-| 400   | text-regular |
-| 500   | text-medium  |
-| 700   | text-bold    |
-| 900   | text-black   |
+<table class='background-white black p-2 border-radius' style='max-width: 400px'>
+    <thead>
+        <tr>
+            <th>
+                Weight
+            </th>
+            <th>
+                Class
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>
+                100
+            </td>
+            <td>
+                text-thin
+            </td>
+        </tr>
+        <tr>
+            <td>
+                300
+            </td>
+            <td>
+                text-light
+            </td>
+        </tr>
+        <tr>
+            <td>
+                400
+            </td>
+            <td>
+                text-regular
+            </td>
+        </tr>
+        <tr>
+            <td>
+                500
+            </td>
+            <td>
+                text-medium
+            </td>
+        </tr>
+        <tr>
+            <td>
+                700
+            </td>
+            <td>
+                text-bold
+            </td>
+        </tr>
+        <tr>
+            <td>
+                900
+            </td>
+            <td>
+                text-black
+            </td>
+        </tr>
+    </tbody>
+</table>
 
 ## Elipsis
 
 To add an ellipsis at the end of the text use the following classes:
 
-<p class='text-ellipsis'>I`m a One line ellipsis</p>
+<p class='text-ellipsis background-white black border-radius p-2' style='max-width: 90px;'>I`m a One line ellipsis</p>
 
 ```html
-<p class='text-ellipsis'>I`m a One line ellipsis</p>
+<p class='text-ellipsis' style='max-width: 90px;'>I`m a One line ellipsis</p>
 ```
 
-<p class='text-ellipsis-more'>I`m a More than line ellipsis</p>
+<p class='text-ellipsis-more background-white black border-radius p-2' style='max-width: 50px; max-height: 57px'>I`m a More than line ellipsis</p>
 
 ```html
-<p class='text-ellipsis-more'>I`m a More than line ellipsis</p>
+<p class='text-ellipsis-more' style='max-width: 50px; max-height: 57px'>I`m a More than line ellipsis</p>
 ```
diff --git a/src/docs/src/gatsby-theme-docz/wrapper.js b/src/docs/src/gatsby-theme-docz/wrapper.js
@@ -11,10 +11,10 @@ const Wrapper = ({ children, doc }) => <React.Fragment>
     />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/squidit/css@1.0.80/dist/css/squid.min.css"
+      href="https://cdn.jsdelivr.net/gh/squidit/css@1.0.82/dist/css/squid.min.css"
     />
   </Helmet>
   {children}
-  <script src='https://cdn.jsdelivr.net/gh/squidit/css@1.0.80/dist/js/squid.min.js'></script>
+  <script src='https://cdn.jsdelivr.net/gh/squidit/css@1.0.82/dist/js/squid.min.js'></script>
 </React.Fragment>
 export default Wrapper
diff --git a/src/scss/helpers/_texts.scss b/src/scss/helpers/_texts.scss
@@ -43,4 +43,5 @@ $weights: (
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+  overflow: hidden;
 }