concisecss / concise.css Goto Github PK
View Code? Open in Web Editor NEWA CSS framework that's lightweight and easy-to-use. Give up the bloat. Stop tripping over your classes. Be Concise.
Home Page: http://concisecss.com
License: MIT License
A CSS framework that's lightweight and easy-to-use. Give up the bloat. Stop tripping over your classes. Be Concise.
Home Page: http://concisecss.com
License: MIT License
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.
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.
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.
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?
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.
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?
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 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;
}
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:
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
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.
Hi Keenan,
the Naver-Menu is a great and pretty small Menu-Script, but an alternate Off-canvas menu would be awesome!
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
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
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
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.
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.
(please ignore/delete - noticed too late that I can post questions on Stack Exchange for Concise CSS)
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.
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 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.
Should definitely create a Bower package to increase usage among Bower users.
I have found an issue with the grouped drop down menus, they are always visible in IE8.
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.
http://concisecss.com/add-ons/tooltips/
Tested with
Firefox 33.02
IE 11
Chrome 38.0.2125.111
http://concisecss.com/documentation redirects to http://staging.keenanpayne.com/concise/documentation/layout/container.php, which gives a 404.
So subject.
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 .
When using .btn class on elements, default border is rendered.
.btn class does not have border: 0; set
Button
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.
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.
thank you
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!!!
http://concisecss.com/documentation/typography/colors.php
Note about black background for white text has a misspelling of "background"
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
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.
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.
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?
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!
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;
}
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'
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/
Lorem ipsum...
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
I would think this would be an add-in. Any plans?
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
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>
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 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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.