Nozzle Piping Mismatch

    fluiditype

    1.0.0 • Public • Published

    alt text

    👁 Fluiditype

    Fluiditype a simple fluid typography css helper for reading experience

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

    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.

    👟 How to run

    • You can download the package directly from Github.

    • You can run the git clone command in your Terminal to get the package.

      git clone https://github.com/Fluiditype/fluiditype.git 
      

    🔬 What's inside

    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.

    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.

    :root {
      --font-size: calc(12px + 0.698vw); /* The character count on */  
      --line-height: calc(var(--font-size) * 1.4);
      --letter-spacing: calc(var(--font-size) * 0.0015);
      --font-weight: 300;
    }

    🔠 Font-size

    Everything in the fluiditype.css file is dependant and connected to the :root selector font-size calculation.

    Example:

    p, li, b, i, strong, a, mark {
      font-size: var(--font-size);
      line-height: var(--line-height);
      letter-spacing: var(--letter-spacing);
      font-feature-settings: normal;
      font-family: var(--font-family);
    }

    🕸 Fluiditype schema


    alt text

    The Headings elements representing six levels of section headings. The h1 defines the most important heading. The h6 defines the least important heading.

    alt text

    There are different text elements which are part of the Fluiditype such as pparagraph element, blockquote quote element and all different styles that can be used for text like bold, underlined, deleted and mark.

    alt text

    Ordered oland underodered ullists with the li element.

    alt text

    For better documentation and reading experience we added special definitions for some main HTML elements. The HTML code element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. The HTML pre element represents preformatted text which is to be presented exactly as written in the HTML file.

    alt text

    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.

    📝 License

    Licensed under the MIT License.

    🌐 Thanks

    You can always check the cool animations on our own Gatsby developed website, visit Fluiditype.

    👨‍💻 Always improving

    We are always working on improving Fluiditype, if you want you can always contribute and ask for more, this would help us create something more meaningful.

    Install

    npm i fluiditype

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    9.03 kB

    Total Files

    4

    Last publish

    Collaborators

    • sboriskirov