├── LICENSE ├── README.md ├── fluidtype.css └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Boris Kirov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![alt text](https://s5.gifyu.com/images/hero-fluiditype8b94beab91d8e8db.gif) 2 | 3 | # 👁 Fluiditype 4 | Fluiditype a simple fluid typography css helper for reading experience 5 |

Fully fluid Headings, Paragraphs, Blockquotes, Lists, Highlights, Code snippets, etc.

6 |

This small CSS library serves to avoid responsive web but focus more on fluidity and systematic approach which will let the interface to communicate with the environment and not to be broken by rules. This would work great for blogs, portfolio websites and simple pages.

7 | 8 | ## 👟 How to run 9 | - You can download the package directly from Github. 10 | - You can run the git clone command in your Terminal to get the package. 11 | 12 | ```shell 13 | git clone https://github.com/Fluiditype/fluiditype.git 14 | 15 | ``` 16 | 17 | ## 🔬 What's inside 18 | You will find a simple ``` .css ``` file which would ideally make your typography fluid and responsive to the screensize, without breaking your layout, it would impact only the typography styles. 19 | 20 | The main rules are set in a ``` :root ``` selector, because of it's high specificity. There we declare the global CSS variables, which can be changed and customised to answer the needs of your project. 21 | 22 | ```shell 23 | :root { 24 | --font-size: calc(12px + 0.698vw); /* The character count on */ 25 | --line-height: calc(var(--font-size) * 1.4); 26 | --letter-spacing: calc(var(--font-size) * 0.0015); 27 | --font-weight: 300; 28 | } 29 | ``` 30 | 31 | ### 🔠 Font-size 32 | Everything in the ``` fluiditype.css ``` file is dependant and connected to the :root selector font-size calculation. 33 | 34 | Example: 35 | ``` shell 36 | p, li, b, i, strong, a, mark { 37 | font-size: var(--font-size); 38 | line-height: var(--line-height); 39 | letter-spacing: var(--letter-spacing); 40 | font-feature-settings: normal; 41 | font-family: var(--font-family); 42 | } 43 | ``` 44 | 45 | # 🕸 Fluiditype schema 46 |
47 | 48 | ![alt text](https://i.ibb.co/2NPb58X/Headings.png) 49 | 50 | The Headings elements representing six levels of section headings. The ``` h1 ``` defines the most important heading. The ``` h6 ``` defines the least important heading. 51 |
52 | 53 | ![alt text](https://i.ibb.co/qdCf0bp/Paragraphs.png) 54 | 55 | There are different text elements which are part of the Fluiditype such as ```p```paragraph element, ```blockquote``` quote element and all different styles that can be used for text like ```bold```, ```underlined```, ```deleted``` and ```mark```. 56 |
57 | 58 | ![alt text](https://i.ibb.co/9WMQNLd/Lists.png) 59 | 60 | Ordered ```ol```and underodered ```ul```lists with the ```li``` element. 61 |
62 | 63 | ![alt text](https://i.ibb.co/b6Zq179/Code-Snippets.png) 64 | 65 | For better documentation and reading experience we added special definitions for some main HTML elements. 66 | The HTML ```code``` element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. 67 | The HTML ```pre``` element represents preformatted text which is to be presented exactly as written in the HTML file. 68 |
69 | 70 | ![alt text](https://i.ibb.co/b3H7Rzg/Links.png) 71 | 72 | We also covered the behaviour of the HTML ```a``` element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address for consistency and better experience with the web typography. 73 | 74 | 75 | ## 📝 License 76 | Licensed under the [MIT License](./LICENSE). 77 | 78 | ## 🌐 Thanks 79 | You can always check the cool animations on our own [Gatsby](https://gatsbyjs.com) developed website, visit [Fluiditype](https://fluiditype.com). 80 | 81 | ## 👨‍💻 Always improving 82 | We are always working on improving [Fluiditype](https://fluiditype.com), if you want you can always contribute and ask for more, this would help us create something more meaningful. 83 | 84 | -------------------------------------------------------------------------------- /fluidtype.css: -------------------------------------------------------------------------------- 1 | /* Set box-sizing globally to handle padding and border widths */ 2 | *, 3 | *:after, 4 | *:before { 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Import of the Inter Font*/ 9 | @import url("https://rsms.me/inter/inter.css"); 10 | @supports (font-variation-settings: normal) { 11 | } 12 | 13 | /* Base */ 14 | :root { 15 | --font-size: calc(12px + 0.698vw); /* The character count on */ 16 | --line-height: calc(var(--font-size) * 1.4); 17 | --letter-spacing: calc(var(--font-size) * 0.0015); 18 | --font-weight: 300; 19 | --red: #eb5757; 20 | --blue: #0004b3; 21 | --light-blue: #b3d7ff; /* The color is the native browser highlight text color, to make the appeal of importance and focus on specific areas of the text.*/ 22 | --dark-gray: #282c35; 23 | --light-gray: #f7f7f7; 24 | --font-family: "Inter", sans-serif; 25 | } 26 | 27 | html, 28 | body { 29 | font-family: var(--font-family); 30 | word-break: break-word; 31 | font-variant-numeric: slashed-zero; 32 | } 33 | 34 | p, 35 | li, 36 | b, 37 | i, 38 | strong, 39 | a, 40 | mark { 41 | font-size: var(--font-size); 42 | line-height: var(--line-height); 43 | letter-spacing: var(--letter-spacing); 44 | font-feature-settings: normal; 45 | font-family: var(--font-family); 46 | } 47 | 48 | p, 49 | li, 50 | mark, 51 | a, 52 | blockquote { 53 | font-weight: calc(var(--font-weight) * 1.33); 54 | } 55 | 56 | code { 57 | font-size: calc(var(--font-size) * 1.1); 58 | line-height: var(--line-height); 59 | letter-spacing: var(--letter-spacing); 60 | font-weight: calc(var(--font-weight) * 1.33); 61 | color: var(--red); 62 | font-family: var(--font-family); 63 | } 64 | 65 | mark { 66 | background: var(--light-blue); 67 | padding: 0.05vw 0.4vw; 68 | border-radius: 2px; 69 | color: var(--dark-gray); 70 | font-size: calc(var(--font-size) * 1.1); 71 | letter-spacing: var(--letter-spacing); 72 | font-weight: calc(var(--font-weight) * 1.33); 73 | word-break: break-word; 74 | font-family: var(--font-family); 75 | } 76 | 77 | blockquote { 78 | background-color: var(--light-gray); 79 | font-size: calc(var(--font-size) * 1.1); 80 | letter-spacing: var(--letter-spacing); 81 | border-left: 4px solid var(--dark-gray); 82 | border-radius: 2px; 83 | padding: 2.5vw; 84 | margin: 2%; 85 | font-style: italic; 86 | font-family: var(--font-family); 87 | } 88 | 89 | a { 90 | color: var(--dark-gray); 91 | text-decoration-skip-ink: none; 92 | font-family: var(--font-family); 93 | } 94 | 95 | a:focus { 96 | outline: 1px dashed var(--blue); 97 | } 98 | 99 | a:hover { 100 | color: var(--blue); 101 | } 102 | 103 | pre { 104 | background-color: var(--dark-gray); 105 | color: var(--light-gray); 106 | display: block; 107 | margin: 0 0 1.5625em; 108 | border-radius: 4px; 109 | overflow: auto; 110 | padding: 2.5vw; 111 | tab-size: 4; 112 | -moz-tab-size: 4; 113 | -o-tab-size: 4; 114 | white-space: pre-wrap; 115 | word-break: break-all; 116 | font-size: calc(var(--font-size) * 1.1); 117 | letter-spacing: var(--letter-spacing); 118 | font-family: var(--font-family); 119 | } 120 | 121 | h1 { 122 | font-size: calc(var(--font-size) * 3); 123 | letter-spacing: var(--letter-spacing); 124 | font-weight: calc(var(--font-weight) * 2.66); 125 | font-family: var(--font-family); 126 | } 127 | 128 | h2 { 129 | font-size: calc(var(--font-size) * 2); 130 | letter-spacing: var(--letter-spacing); 131 | font-weight: calc(var(--font-weight) * 2.33); 132 | font-family: var(--font-family); 133 | } 134 | 135 | h3 { 136 | font-size: calc(var(--font-size) * 1.75); 137 | letter-spacing: var(--letter-spacing); 138 | font-weight: calc(var(--font-weight) * 2); 139 | font-family: var(--font-family); 140 | } 141 | 142 | h4 { 143 | font-size: calc(var(--font-size) * 1.5); 144 | letter-spacing: var(--letter-spacing); 145 | font-weight: calc(var(--font-weight) * 1.667); 146 | font-family: var(--font-family); 147 | } 148 | 149 | h5 { 150 | font-size: calc(var(--font-size) * 1.25); 151 | letter-spacing: var(--letter-spacing); 152 | font-weight: calc(var(--font-weight) * 1.5); 153 | font-family: var(--font-family); 154 | } 155 | 156 | h6 { 157 | font-size: calc(var(--font-size) * 1); 158 | letter-spacing: var(--letter-spacing); 159 | font-weight: calc(var(--font-weight) * 1); 160 | font-family: var(--font-family); 161 | } 162 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fluiditype", 3 | "version": "1.0.0", 4 | "description": "Fluiditype a simple fluid typography css helper for reading experience", 5 | "main": "fluiditype.css", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/boriskirov/fluiditype.git" 12 | }, 13 | "keywords": [ 14 | "typography", 15 | "system", 16 | "fluid", 17 | "css" 18 | ], 19 | "author": "Boris Kirov", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/boriskirov/fluiditype/issues" 23 | }, 24 | "homepage": "https://fluiditype.com" 25 | } 26 | --------------------------------------------------------------------------------