concisecss / concise.css Goto Github PK

Are there plans to move to semantic color names in future versions rather than the literal color names such a yellow and green?

Perhaps names such as primary, secondary, link and warning would be better?

Hi Keenan,
I have a problem with that I my dad pointed out when using my new site with an iPad 2 in portrait mode. This is the page: https://www.acaudio.co.uk/microphones/index.asp

The sidebar content which is supposed to vanish, its got the class "hide-extra-small" set on it. I have been playing with this on Chrome, the sidebar will vanish at 767 and show at 768. I need this to vanish at the same time as the columns going full width, which is 768. If I make my viewport 769 its ok, the columns work just fine.

I tried using "hide-small" but this doesn't work for me, as the column ends up disappearing too early and leaves a gap.

Any ideas?

Cheers,

Steve

Lorem ipsum...

Hi,

I notice that ConciseCSS uses a lot of my own inuitcss—copied and pasted, no less—without attribution. This is not only a bit of a not-cool thing to do, it actually goes against inuitcss’ licensing (Apache2).

Cases include, but are not limited to:

• The directory structure. Generic, Base, Objects
• The font-sizing mixin inuitcss’ | ConciseCSS’
• The vendor mixin inuitcss’ | ConciseCSS’
• Defaults inuitcss’ | ConciseCSS’
• Feature switches inuitcss’ | ConciseCSS’
• General similarities in formatting and structure (ToC, commenting, feature switches, etc.) e.g. inuitcss vs. ConciseCSS

I could go on, but I don’t think I need to. Please either: include inuitcss as a submodule or dependency and extend it; give complete and proper attribution, as per inuitcss’ license; write your own code and don’t use any of inuitcss.

Thanks,
Harry

IE11 - The poster from the Video is open on load and doesn't close by clicking "Dropdown with video".
IE11 - All the Arrows (.dropdown-arrow) has no transparency (it's black around).
http://concisecss.com/documentation/navigation/dropdowns/

All Browsers - Element doesn't close
http://concisecss.com/add-ons/closeable/

I came across your framework and I really liked it. It's simple, concise (no pun intended :)) and extremely lightweight. I'd like to use this in a web service that we are building. However since this is a relatively new so would like to understand if you have a roadmap planned.

I think your example of gutters is wrong or broken: http://concisecss.com/documentation/layout/grid.php

Surely there shouldn't be a double gap at the end of the row? Shouldn't it be the same width as the first gap?

Hello , why you don't make class .countainer auto centered without a helper class ?
is there any problem if i make it center in my SASS files ?
thank you .

I saw ungrid.css and I thought concise could implement the grid like that, is much easier for developers and is less code.

Do you know what are the pros and cons of implementing a grid like that?

I wanted to suggest a sidebar addon for inclusion.

This is the HTML

<div class="container gutters">
        <div class="row">
            <div class="column-5">
                <div class="sidebar">
                    <div class="sidebar-header well bg-red no-margin">
                        <p>Red background</p>
                    </div>
                    <div class="sidebar-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore magna
                         aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                         ullamco laboris nisi ut aliquip ex ea commodo  consequat.
                         </p>
                    </div>
                    <div class="sidebar-header well bg-green no-margin">
                        <p>Red background</p>
                    </div>
                    <div class="sidebar-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore magna
                         aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                         ullamco laboris nisi ut aliquip ex ea commodo  consequat.
                         </p>
                    </div>
                    <div class="sidebar-header well bg-yellow no-margin">
                        <p>Red background</p>
                    </div>
                    <div class="sidebar-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                         sed do eiusmod tempor incididunt ut labore et dolore magna
                         aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                         ullamco laboris nisi ut aliquip ex ea commodo  consequat.
                         </p>
                    </div>
                </div>
            </div>
        </div>
</div>

This is the CSS

.sidebar {
    border: 1px solid #000000;
    height: auto;
}
.well{
    border-width: 0px;
    padding: 1px 15px;
}
.sidebar-content {
    padding: 1px 15px;
}

http://concisecss.com/add-ons/tooltips/

Tested with
Firefox 33.02
IE 11
Chrome 38.0.2125.111

Is there a way to not need ruby-sass? Currently it seems to be because of the sass map which node-sass does not yet support.

Is there a way I can fork the 12 column grid? I have created an enhancement to make it responsive and want to contribute towards it.

Is no-margin supposed to work when viewed at less than 480px width screen? At the moment its not, gaps appear between rows and I can't see where it is coming from. I can see the margins are 0, but the gaps are still there. Any ideas?

Steve

So what about more flexible @mixin vendor.
Like this:

@mixin vendor($vendors, $property, $value...) {
  @each $vendor in $vendors {
    @if ($vendor == 'webkit') {
       -webkit-#{$property}: $value;
    }
    @if ($vendor == 'moz') {
       -moz-#{$property}: $value;
    }
    @if ($vendor == 'ms') {
       -ms-#{$property}: $value;
    }
    @if ($vendor == o') {
       -o-#{$property}: $value;
    }
    @if ($vendor == 'official') {
       #{$property}: $value;
    }
  }
}

It allow U write things like so:

@mixin animation($value...) {
  @include vendor('webkit moz official', animation, $value)
}

.selector {
  @include animation(anim1 .5s linear infinite)
}

And it'll compile to:

.selector {
  -webkit-animation: anim1 .5s linear infinite;
  -moz-animation: anim1 .5s linear infinite;
  animation: anim1 .5s linear infinite;
}

Just ran into a validation problem on a page with dropdowns. Its invalid to put a list in a span, you can't put a block element into an inline element. Any ideas what can be done?

I would think this would be an add-in. Any plans?

A suggestion for the future would be semantic column positions. What I mean by this is say a 2 column grid layout, with a sidebar on the left and content area on the right. Semantically the content area should come first in the code, so it would be good if we could have a class that does this for us and keeps gutters in the correct place.

At the moment I can float the main content to the right, but if I am using the gutters the margin is being applied to the wrong side of the sidebar as it is technically the second column, but visually is the first.

I hope this makes sense :)

Cheers,

Steve

WARNING on line 8, column 9 of /concise/components/_colors.scss:
You probably don't mean to use the color value white' in interpolation here. It may end up represented as #ffffff, which will likely produce invalid CSS. Always quote color names when using them as strings (for example, "white"). If you really want to use the color value here, use"" + $bg-color'.

My work-around was simply to add -color to the colors, so "green-color" and therefor also had to change the bg css settings and I think a few others.

Hi Keenan Payne,

First of all THANK YOU SO MUCH for coming out this wonderful framework, and i'm kinda embarrassed to ask how can i get those value in breakpoint-map and colors in variables.scss using SASS? For example I want to use those prefix value in breakpoint-map in @media only and screen (min-width: breakpoint-map[small]) and (max-width: breakpoint-map[medium]) -1px { } , since the breakpoint mixin only generate min-width, but for some reason I really need to have max-width and since there is already in variables.scss, I think I should fully utilise it.

So what about frontend builder, like gulpjs or grunt? It'll so to compile sass to css, or less, or stylus. Linting js code, code style. minify css and js. Add comments (header) to files and something else amazing.

I believe you have a missing html syntax. The html tag is missing
http://concisecss.com/get-started/getting-started.php

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="HandheldFriendly" content="True">

    <title>Concise Template</title>

    <link rel="stylesheet" type="text/css" media="screen" href="css/concise.min.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/concise.min.js"></script>
</head>

<body>

</body>
</html>

I have found an issue with the grouped drop down menus, they are always visible in IE8.

Hi there,

In the doc to make buttons rounded or pilled, it says :

Button

That's pretty logical.

But in the addon the code is :
.btn {
.btn-rounded { border-radius: 4px; }

.btn-pill { border-radius: 25px; }
}

So I guess there is an error here, and the code should be :
.btn {
&.btn-rounded { border-radius: 4px; }

&.btn-pill { border-radius: 25px; }
}

No ?

Thanks for your work.

(please ignore/delete - noticed too late that I can post questions on Stack Exchange for Concise CSS)

I wasn't sure how else to report it anywhere else but on the concise css website, extra small appears to be bigger than small? I assume extra small and small were accidentally swapped.

http://concisecss.com/documentation/layout/breakpoints.php

Also on the drop down page
http://concisecss.com/documentation/navigation/jquery-dropdowns.php
The large drop down is incorrectly displayed as '.dropdown small'

thank you

Was looking at the demos for jQuery Dropdowns and noticed that the video does not stop playing once the dropdown has been "closed".

Providing a flag of some sort via data-attribute seems like an appropriate way to enable this behavior, though by default I think it should stop video playback on close.

Infer whether the video is youtube or vimeo or should it just rely on the video api would be the tricky part.. more research is needed :P

Coreconcise.com website is very nicely done. However I think in the absence of some layout examples beginners might think same results can be achieved with default css. I think it might be a good idea to split it into two - the core (concise default css) and the second one with all the default customization.

Hey,

Thanks for the great job with Concise.
I would like to know if the 12 col and 24 col grid are coded correctly because adding the classes push- or pull- don't do nothing. Looking at the css file the declaration is: left: 25%; left:50%; right:25%; right:50%. Shouldn't it be something like margin-left(right) to push or pull columns?

Sorry if I'm incorrect as I'm still a novice in front-end.

Cheers.

It's better to use rem instead of em cause, rem look at the root font-size, but em at the parent. Here you can find more

http://concisecss.com/documentation redirects to http://staging.keenanpayne.com/concise/documentation/layout/container.php, which gives a 404.

Need to add .jshintrc and .jscsrc for linting and checking js style correct.

Hi,

If you create a gutter grid with inside a nested grid.
The columns of the nested grid will have gutters to.

It'd be great to make this nested grid no guttered, adding something like a "no-gutter" class to it.
What do you think ?

Anyway, Thanks for building concise.

Is Concise dead?

From the releases page - https://github.com/ConciseCSS/concise.css/releases
v1.1.1
"We are hard at work on v2.0.0 of the framework, and are hopeful to get that released this week. "

This is now 5 weeks ago.

Please developed Concise further!!!

Should definitely create a Bower package to increase usage among Bower users.

Is there a document to describe the appropriate way to set up Concise for development with Sass in such a way that Concise updates don't overwrite changes?

The framework seems to be having issues with layout where combined column widths is more than 16. So in scenario as follows:

<div class="row">
<div class="column-4">11</div> 
<div class="column-4">22</div> 
<div class="column-4">33</div> 
<div class="column-4">44</div> 
<div class="column-4">55</div> 
<div class="column-4">66</div> 
</div> 

Bootstrap and Pure seems to layout it correctly by rendering the element "55" and "66" in the next line and beginning from left. However I am getting mixed results.

Can you please suggest if there is alternate way to solve this problem.

Hi Keenan,

the Naver-Menu is a great and pretty small Menu-Script, but an alternate Off-canvas menu would be awesome!

I have a row with three columns, no gutter. Each column contains an image of the same size (380x100) and is surrounded by a link. Pretty basic layout really.

<div class="row no-margin">
    <div class="column-4"><a href="#"><img src="/images/reviews.jpg" alt="" /></a></div>
    <div class="column-4"><a href="#"><img src="/images/special-offers.jpg" alt="" /></a></div>
    <div class="column-4"><a href="#"><img src="/images/free-shipping.jpg" alt="" /></a></div>
</div>

I would expect the height of each column to match the height of the image, but an extra 7px is being added, this appears to be coming from the line-height set on the html, body declaration. I am trying to figure out a universal way to prevent this from happening, as I don't want to effect anything else. Any ideas?

Steve

I downloaded concise.css-2.1.0.zip with expands to concise.css-2.1.0. But the bower.json file says v2.0.0? It would be helpful to have the version in a scss file, perhaps concise.scss, for certainty.

When using .btn class on elements, default border is rendered.

.btn class does not have border: 0; set

Button

http://concisecss.com/documentation/typography/colors.php

Note about black background for white text has a misspelling of "background"

I think with any new framework the best way to understand it is to see some layouts. Can you please add some sample layouts to see how different elements are structured. Maybe adapting the layouts available on getbootstrap.com for starter will be good enough.

So subject.

First off, thanks for creating a light-weight front-end framework.

In several files there are hard-coded colors that have to be overridden when customizing Concise. Some examples are the body background-color in base > main.scss and h element headings text color in base > headings.scss. It would be nice to have a global variable for several of the hard-coded colors in the _defaults.scss file so that overriding is not needed.

Thanks.

I've found a sticking point in the grid system. At exactly 768px (the default 'small' breakpoint I believe) the grid gets stuck in a middle state and DOM elements seem to inherit styles from both ends. I find the issue when testing on an iPad mini (portrait) and replicated the issue on concisecss.com :

I had a look through the source but couldn't see what would be causing it. I'll happily fix it if you can point me in the right direction.

Cheers, love the framework!

Right now if you have a multi-level list with a responsive navigation (see: http://jsfiddle.net/kgbqk/) it doesn't look very good and the nested list item is highlighted if the parent is hovered over.

Potential idea to solve this: Indent the nested list item from the left a few and highlight on hover, not on the hover of parent element.

Hi Keenan,

I have two Menus.
Top = Horizontal
Left-Side = Vertical with Submenus

It is possible to combine these two Menus into one Mobile-Menu?
Do I need to play with show/hide or can you for such (not rare) cases write an add-on?