Describe the bug
u-horizontal-center doesn't work correctly. In my case, it centered the elements vertically instead of horizontally.

BTW, fantastic framework! Can you also add left spacing for grid c class. grid-gap-* adds space between columns while space from the left edge of browser to columns is the same, this looks strange. It would be great if one can add grid-gap at the left edge?

Looking forward to css menu toggle for small devices.

Thanks.

Hi!

Thanks for your cool framework!

I tried it on my project, and I noticed some bugs (or maybe, I don't use correctly the HTML code):

I would like to use dropdown buttons in a tile. Seems to work on desktop, but there are some display issues on mobile. Because dropdown block contains the ul menu, the area goes outside the screen.

Thanks !

Alexander

Describe the bug
Add btn class to <a> during hover will make text color become blue.

Expected result
the behavior should be like <button> with btn class during hover should not make the text color become blue.

Was it intentional to comment out the various .fluid-container classes?

Line 293 onwards of layout.css is missing closing comment tag, meaning none of those classes get into the minified version.

Thanks for your work on this.

Seeing as there is a CSS-only toggle option for the Nav Dropdown I was wondering why there is no such option for the Header Button/Header Nav. Shouldn't the same solution be possible here?

Some utility classes are not working. The problem is in the generated css. Property values are wrapped with quotes while they shouldn't.

Describe the bug
Hello, i found that dropdown with right align is not working properly when screen is small (mobile or small window).
I think dropdown should align to right but is aligned to left.
I don't know if this is intentional bahaviour on mobile.

Image from docs as example (small window on PC, on mobile looks same)

And i found propably a typo in docs: i think red text should be dropdown-right instead of menu-right as shown on image below.

To Reproduce
For example enter cirrus doc page on mobile/small window and scroll to dropdown-right example.
On PC you can adjust window size and see that dropdown-right is aligned to left

Hello,

I've tried to use a select input in a form-group (small). From what I see in the core/form.scss there's no explicit support for it. Nonetheless I've tried to style it, but I always takes a "full" height. I don't know what I'm missing.... Could you share some enlightenment?

Attached to this you can find screenshot on my problem, specifically the element in the middle after the table, where I use the select to choose the number of elements per page.

Thanks for Cirrus

Did you remove the Demo folder or is it missing?

code leads to a 404:
https://spiderpig86.github.io/Cirrus/docs/code

and the tabs example are not working ;-)

Great framework! keep it up.

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

When screen is tablet or desktop width and the buttons are stacked, all in a column or 2 buttons over 1 button, the wrong corners are rounded. This takes away the seamless effect that was desired.

It looks like the first button of group always rounds the left side of button and the last button always rounds the right side.

Would be nice to have documentation how to build navbar

Describe the bug
If user has overridden page background color in browser (e.g. not #fff) - web page looses text-background contrast.

To Reproduce

• Open Firefox.
• Open Preferences.
• Scroll to "Fonts and Colors".
• Press "Colors...".
• Set background color to something grayish (e.g. #DADFE8).
• Open Cirrus website.
• Background is not white now and text is not that much readable on darker background.

Show me! (2MB)

I like your Cirrus framework. However, is it possible to use it in AMP pages?

AMP requires a stylesheet to fit in 50KB and cannot include !important. It also should not depend on JS, interactions should be in pure CSS.

How much work would it take to make Cirrus AMP-compatible?

Downloaded a fresh copy via git using: git clone https://github.com/Spiderpig86/Cirrus cirrus

Went into the 'cirrus' directory, did an 'npm i', then once that was finished, followed up with a 'gulp compile' and I get the following error message back

[10:36:33] Using gulpfile ~/assets/cirrus/gulpfile.js
/usr/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                   ^

TypeError: Cannot read property 'apply' of undefined
    at /usr/lib/node_modules/gulp/bin/gulp.js:129:20
    at processTicksAndRejections (internal/process/task_queues.js:79:11)

Versions:
Node = v12.16.1
NodeJS = v15.8.0
NPM = 7.5.2
NPX = 7.5.2
GULP-CLI = 3.9.1
GULP (Local Version) = 4.0.2
OS = Debian 10.7

<article class="markdown">
   ...
</article>

markdown convert to html , wrap the html content with article tag with markdown css class.

Hello, these days I've been looking at Cirrus and I have really enjoyed the components and simplicity.

I'm not sure if I'm wrong, but it looks like it uses JQuery in some parts of the code. And this may not work very well with ReactJs, because JQuery directly manipulates the DOM, since React uses a virtual DOM.

I would like to know what components use JQuery and if you are thinking about creating React components of the framework.

Thank you, keep up the good work.

Hi! We love this framework! During the update of our site to match the latest version, we have been having trouble with the disparity between the docs and the supported classes - could you please advise if ".ignore-screen" is meant to be missing from 0.6.1, and that we should refactor our code accordingly?

Thanks! There are a few other issues but this is the one really need help with. Thanks!

PS: The docs at https://cirrus-ui.netlify.app/layout/columns#viewports which describe .ignore-screen are our reference.

Is your feature request related to a problem? Please describe.
Hello i want to ask about margins.
Cirrus declares margin classes like m-1 or mb-1 which is very helpfull.
I know that cirrus can do something like flex-column on small device and row on medium (i saw this in docs with version 0.6.2).
Im asking if margins can have similar functionality like on small devices add margin bottom (because of column layout) and on md or more don't (because of row layout).

Describe the solution you'd like
Something like:

<div class="u-flex u-flex-column u-flex-row-md">
  <button class="mb-1 mb-0-md"> Button1 </button>
  <button class="mb-1 mb-0-md"> Button2 </button>
</div>

On small screen buttons have margins because they are in column and needs some space between. On row style they don't need one on bottom.

Maybe i don't know something and exists solution for this one in Cirrus?

Hello, a noobie question: How use breakpoints classes on columns?
I'm looking for something like .col-sm-12 .col-md-8 .col-lg-4

I would like to display columns with different sizes according to device.

For example:

<section class="row">
<div class="col-lg-4 col-xs-12">
    Small column on desktop<br />
    Big column on smartphone
</div>
</section>

On any device, the width column is equal to 100%. How can I fix this?

Thanks,

Sincerely,

Alexander

Hi there,
Just a heads up that this line in the documentation 'Placeholder' example appears to have a very small error;

<div class="placeholder-commands ucenter">

Should be;

<div class="placeholder-commands u-center">

keep up the great work !

Hi,

I would suggest for the next version to harmonize class names for some components. For example, for cards, we have : card, card-title, content, card-footer, action-bar. It could be: card, card__title, card__content, card__footer, card__action according to BEM specifications. However, it is used perfectly for tiles or frames.

Alexander

Describe the bug
On documentation page: Cirrus - Flexbox html example for flex center should have class "u-justify-center" instead of "u-justify-flex-center"

To Reproduce
Enter page Cirrus - Flexbox and scroll to Center example

First of all, thank you for creating Cirrus, it really improved the look of my project with little fuss.

I am trying to left align a specific cell in a table.
To do that i just added the 'text-left' class:

<td class="text-left">.org.chromium.Chromium.GhfJ0n</td>

This did not work however.
Looking into it, it appears the .table td rules set text-align: inherit; and this leads to the .table setting to be applied, instead of the .text-left i wanted.

Is that the intended behavior?

Removing the text-align: inherit; from .table td results it (my) expected result with the left-aligned text. I took a picture to show what i am saying ( https://ibb.co/VJZR05R )

Aside from modifying the Cirrus code, how could i resolve this?

Is there a way to get the real source of the files for easy customization? Thanks !

There are two issues with the header:

1. The Join button has too much padding, because there is <a> inside <button>:
   
2. The dropdown menu is moved to the left, because .nav-link does not have position: relative;:
   

Hello, how are you?

I would like to know if modals are ready to use, I can see there's some classes already built, however there's no info in the documentation. I tried using them, but I don't know exactly the correct structure and hierarchy of classes. Big fan of this project, thank you!

Is your feature request related to a problem? Please describe.

I'd like to have an easy way to toggle a dark mode / theme.

Describe the solution you'd like

The ability to toggle the dark mode / theme globally on page that would also change the color of fonts, etc...

Hi! I'm Mattia Astorino :D can i ask where you picked my name?

Describe the bug
Hello. Again i found a mistake in documentation.
In Space-around and Space-evenly text with red background shows wrong class example of u-justify-space-between instead of u-justify-space-around or u-justify-space-evenly

To Reproduce
Enter page Cirrus - Flexbox and scroll to Justify

I might be doing something wrong, but I tried to copy and paste the code for the modal example,
it triggers but it doesn't show the modal like in the docs page.

It stays at the left side of the page, the overlay looks gray with full opacity and I can see the right side
of the page like the modal never showed up.

I'm using react.js

Here's a snippet of the component where I'm trying to display the modal:

<div className="col u-clear-right level">
          <ModalPEM />
          <a href="#modal-id">
            <button type="button" className="btn-small btn-info btn-animated level" style={{ marginRight: '15px' }}>
              <i
                className="fa-wrapper fas fa-key pad-right"
                style={{ fontSize: '14px', transform: 'rotate(135deg)' }}
              />
              <span className="level-item">ModalButton</span>
            </button>
          </a>
          <button type="button" className="btn-small btn-dark btn-animated level">
            <span className="level-item">Button 2</span>
            <i className="fa-wrapper far fa-plus-square pad-left" style={{ fontSize: '14px' }} />
          </button>
</div>

where my component is:

<div className="modal" id="modal-id">
    <a href="#target" className="modal-overlay close-btn" aria-label="Close" />
    <div className="modal-content" role="document">
      <div className="modal-header">
        <a href="#components" className="pull-right" aria-label="Close">
          <span className="icon">
            <i className="fa fa-wrapper fa-times" />
          </span>
        </a>
        <div className="modal-title">Modal Dialog</div>
      </div>
      <div className="modal-body">-- Modal content --</div>
      <div className="modal-footer">-- Rows, buttons, etc... --</div>
    </div>
  </div>

Result image attached.

Describe the bug
At a width of 768px, header nav transitions to vertical before the hamburger menu is visible.

To Reproduce
Steps to reproduce the behavior:

1. Using Cirrus 0.6.2-patch-1
2. Create a layout with the following html.

    <div class="header header-fixed u-unselectable header-animated">
        <div class="header-brand">
            <div class="nav-item no-hover">
                <a href="/"><h6 class="title">Title</h6></a>
            </div>
            <div class="nav-item nav-btn" id="header-btn">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="header-nav" id="header-menu">
            <div class="nav-right">
                <div class="nav-item">
                    <a href="!#">Overview</a>
                </div>
                <div class="nav-item">
                    <a href="!#">Profiles</a>
                </div>
                <div class="nav-item">
                    <a href="!#">Information</a>
                </div>
                <div class="nav-item">
                    <a href="!#">Logout</a>
                </div>
            </div>
        </div>
    </div>

Resize the page.

Solution

On line 2198 of the generated css file, I changed @media screen and (min-width: 769px) to @media screen and (min-width: 768px)

Hi, found your framework yesterday and I very like it. I'm using it in a project right now, but for the footer, I noticed that the red box that surround the item does not surround it like in the documentation.

I copied to the footer from the documentation and this is what I see

with this code (react):
<a href='#' <li className='footer-list-item>Home</li> </a>

I even tried putting with class='list-item' and still the same problem.

Is it something wrong with my writing or it's the framework?

FYI, I'm using the package from this CDN: https://cdn.jsdelivr.net/npm/[email protected]/dist/cirrus.min.css

Thanks

I've just started to use this library for one of my projects and I am really impressed with it. On one web page I would like to include a progress bar to indicate the progress of an internal process.

Currently I am using a <progress> HTML tag for the bar, however there does not seem to be any support for the tag within the library. Is this something that may be added in the future? Or could you suggest an alternative method for displaying/styling a progress bar within the Cirrus library?

Is there documentation on how to override the color variables?

Hitting escape with an open modal should close it.

Reference: WAI-ARIA Authoring Practices 1.1

Dropdown menus don't seem to work in Firefox when they are located in tiles. This is working well with Google Chrome.

Example, with Firefox: https://cirrus-ui.netlify.app/components/tiles#tiles

Thanks

First, thanks for such great css framework. Personally I find it simplicity-beauty-lots of functionaly combination very attractive!

Describe the bug

• Font sizes are a bit different: they are a bit bigger in Chromium. Scale is 100% in both browsers.

To Reproduce

• Open Cirrus website in Firefox 78 and Chromium 80.

Firefox (2 MB!)

Chromium (2 MB!)

I had switched to Cirrus from Sematic because of it's beautiful CSS-only framework. Although I do miss some of the elements that are exclusive to Sematic UI, especially the tags.

In Sematic UI, there are customizable in many sizes.

Unfortunately in Cirrus, there's only......three. Small (normal), medium, and extra large. I can try to use the h1 tag, but the whole element would go out of whack. I can try to override with the css, but I don't wanna break it either.

I would love to see many more sizes of the tags.

Describe the bug
I think i found a small bug in documentation.
In Form Inputs example element inside div is created as p but closes as span

To Reproduce
Enter page Form Inputs and look on example.

Hello, lovely framework, thanks for making it available for free :)
However, I can't manage to make Card Images to appear correctly.
Don't know what I'm doing wrong, I tried lots of different ways, using the examples on the site, copying directly from your site's HTML...
I tried importing the full file and only the card component, both ways I failed to make it work.
Here's my HTML:

`

		<!-- Card 1 -->
		<div class="card">
			<div class="card-container">
			<div class="card-image" style="background-image: url(assets/images/rocket-background-in-flat-design_1302-2440.jpg)"></div>

				<div class="title-container">
					<p class="title">Deer</p><span class="subtitle">By Teddy Kelley</span>
				</div>
			</div>
			<div class="content">
				<p>Destaque 1</p>
			</div>
			<div class="action-bar center">
				<button class="btn">SHARE</button>
				<button class="btn">LEARN MORE</button>
			</div>
		</div>
		
		<!-- Card 2 -->
		<div class="card">
			<div class="card-container">
			<div class="card-image" style="background-image: url(assets/images/rocket-background-in-flat-design_1302-2440.jpg)"></div>

				<div class="title-container">
					<p class="title">Deer</p><span class="subtitle">By Teddy Kelley</span>
				</div>
			</div>
			<div class="content">
				<p>Destaque 2</p>
			</div>
			<div class="action-bar center">
				<button class="btn">SHARE</button>
				<button class="btn">LEARN MORE</button>
			</div>
		</div>

		<!-- Card 3 -->
		<div class="card">
			<div class="card-container">
			<div class="card-image" style="background-image: url(assets/images/rocket-background-in-flat-design_1302-2440.jpg)"></div>

				<div class="title-container">
					<p class="title">Deer</p><span class="subtitle">By Teddy Kelley</span>
				</div>
			</div>
			<div class="content">
				<p>Destaque 3</p>
			</div>
			<div class="action-bar center">
				<button class="btn">SHARE</button>
				<button class="btn">LEARN MORE</button>
			</div>
		</div>

		<!-- Card 4 -->
		<div class="card">
			<div class="card-container">
			<div class="card-image" style="background-image: url(assets/images/rocket-background-in-flat-design_1302-2440.jpg)"></div>

				<div class="title-container">
					<p class="title">Deer</p><span class="subtitle">By Teddy Kelley</span>
				</div>
			</div>
			<div class="content">
				<p>Destaque 4</p>
			</div>
			<div class="action-bar center">
				<button class="btn">SHARE</button>
				<button class="btn">LEARN MORE</button>
			</div>
		</div>


	</div>`

Describe the bug
In the documentation part https://cirrus-ui.netlify.app/fundamentals/viewports#breakpoints
the part about u-none-* has a table with the convetion written out but with u-hide-* as class, this should be u-none-*

To Reproduce
Steps to reproduce the behavior:
read: https://cirrus-ui.netlify.app/fundamentals/viewports#breakpoints

Hello,

As a software developer, I am interested in using Cirrus within my company's internal projects and perhaps I might even contribute a few things in the near future. Even after intensively applying CSS in webdevelopment projects during the last two years, I still do not consider myself a CSS pro. I always like to learn new stuff and after all this time, CSS still keeps surprising me quite often.

During my first inspections of the Cirrus source code, I noticed a few noteworthy things, which I will attempt to address to you in the near future (if you don't mind). One of those things is the order in which the CSS files are serialized into the resulting "cirrus.css" output file. It seems that this ordering is alphabetical by file name.

As I have experienced in the past, the order in which CSS rules are defined is important regarding their related behavior. For example, look at the following sample code:

<style id="base-styling">
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
  }

  html, body {
    height: 100%;
  }
</style>

<style id="theme-styling">
  .first,
  .first * {
    background: red;
    border: 5px solid darkred;
  }

  .second,
  .second * {
    background: green;
    border: 5px solid darkgreen;
  }
</style>

<style id="initial-styling">
  div {
    width: 100%;
    height: 100%;
    padding: 20px;
  }

  .first {
    margin: 50px;
    width: 400px;
    height: 400px;
  }
</style>

<div class="first">
  <div class="second">
    <div class="third">
    </div>
  </div>
</div>

This code will render three nested squares. As it is now, the first (outer) square will be colored red and the second (middle) and third (innermost) squares will be colored green.

If the two CSS rules in the #theme-style element are switched, like this:...

<style id="theme-styling">
  .second,
  .second * {
    background: green;
    border: 5px solid darkgreen;
  }

  .first,
  .first * {
    background: red;
    border: 5px solid darkred;
  }
</style>

...the resulting CSS styling behavior will change dramatically: all three rectangles will now be colored red!

So, since the order of the defined CSS rules seems to be quite important to the resulting styling behavior, might it be useful to investigate the current deployment strategy in some more detail and specify an explicit build order of the various CSS source files (if it turns out to be necessary to do so)?

Hi friend, how are you?

Do you know why the 'header-brand' class take all the available width on old browsers like the firefox 36, which ultimately causes the nav-items to go down? Please check these screenshots so you can better understand:

Updated Chrome

Firefox 36

I know this issue is caused by some kind of unknown css property to old browsers (cause it works perfectly on Chrome and newer firefox versions), but I would appreciate if you can point me in the right direction cause unfortunately people here in the company still uses old browsers...

I appreciate, thanks for your time.

Is it right to change them to .scss?

Hi! I'm quite new to programming and i'm trying to choose a css framework to work with. While trying to set up a new project using Cirrus, I created a new folder and ran npm install and got

up to date in 0.477s
found 0 vulnerabilities

then I ran npm i cirrus-ui and got
+ [email protected]
added 22 packages from 56 contributors and audited 22 packages in 3.479s
found 0 vulnerabilities

last, ran npm i gulp and got
+ [email protected]
added 355 packages from 219 contributors and audited 6604 packages in 18.534s
3 packages are looking for funding
run npm fund for details
found 0 vulnerabilities

but whenever I try to run gulp watch / compile / minify in the node_modules\cirrus-ui folder I get
`Error: Cannot find module 'gulp-load-plugins'

Could you explain to me what would be the correct steps to set up a cirrus project and get gulp up and running with it? I figure out it shouldn't be too hard and i'm probably doing something wrong, though I honestly don't have a clue on how gulp works.

In the Template code on the page: https://spiderpig86.github.io/Cirrus/docs/start/
The following code is incorrect:

<body>
        <div class"content">
            <div class="row text-center">
                <h1 class="title">My First Page</h1>
                <h6 class="light subtitle">A webpage powered by <b>Cirrus</b></p>
            </div>
        </div>
    </body>

div's container class not specified correctly.