Using the tools provided by Zurb's Foundation as they were intended means you have to compromise your HTML-markup. You'll be adding classes the HTML doesn't need just to pull in that Foundation functionality.
Using the SASS source code I'm trying to avoid aforementioned problem by using #extend.
Some example HTML markup I want to avoid
<nav id="main_navigation" class="top-bar">
By doing this
#main_navigation {
#extend .top-bar;
}
I realise this would still compile to redundant CSS as well as probably break the JS functionality for the topbar, but let's save that for another question.
The issue is that it doesn't work! Styles that apply to children of .top-bar as well as any pseudo-classes don't get extended to apply to #main_navigation. I tried to recreate the problem in a CodePen, but the compiled code over there is flawless.
So is this a structural problem in Foundation? Or am I messing something up?
I use a Grunt task with grunt-sass to compile the Foundation SASS with my own code after it.
After some more extensive debugging using CodePen I figured the issue had to be in the compiler.
Switching from grunt-sass to the more stable (but slower) grunt-contrib-sass made all unexpected behavior disappear.
Yes, you can #extend Foundation SCSS
Related
How can you use css mixins based on an existing library? Example: Consider you want to create a new css class based on the bootstrap btn btn-success classes. It might look like:
.disabled-button {
#mixin .btn;
#mixin .btn-success;
#mixin .disabled;
color:red;
}
Less/Sass are capable of doing such kind of things when you define the classes btn or btn-success yourself, but how do you deal with it when it comes from bootstrap (or another css framework) ?
If you can add LESS compilation into your workflow, you can achieve this easily with its #import (reference) and :extend(x all). Without needing to learn anything more about LESS, you'd do
#import (reference) "bootstrap.less"; // this file is included with bootstrap. `(reference)` means it will only pull in the styles you ask it for, so you could continue using this even if you switch to another framework and don't want to include all of bootstrap
.disabled-button:extend(.button all, .button-success all, .disabled all) {} // pulls in the `.button` styles, `.button-success` styles, and `.disabled` styles
.disabled-button {color:red} // adds on your styles
Explanation of LESS's :extend(all) and relevant documentation links are in this answer
Since CSS is valid LESS, you wouldn't have to make any other changes to your stylesheet. Okay, so how do you add LESS compilation to your workflow? The simplest solution is described in LESS's "Command Line Useage" documentation, which boils down to installing less (once)
$ npm install less -g
and then running lessc, the less compiler
$ lessc my-styles.less my-compiled-styles.css
So I know you can extend Foundation classes once you have the Foundation scss/css included and I know you can include the classes to the dom (OOCSS style) but here's my use-case:
I have style sheet, menus.scss. This is compiled into app.css along with Foundation.scss.
I can use the #extend here because I'm including Foundation before it.
#menu {
#extend .top-bar;
}
THE PROBLEM
Now, say I want to compile a separate sheet (because maybe it's only included on some pages)
Now if I #import Foundation into this stylesheet I will end up with the framework included twice (which is crazy of course.)
So... maybe a solution would be to have a version of the Framework that works on silent classes EG: %top-bar so I can include Foundation everywhere without fear of duplicating lots of code. I know there are some base components that will need to be included globally so that the sub-classes will work but how else can I do it?
To my knowledge silent frameworks don't exist so I'm looking for alternatives..
Ideas?
It will be perfect if you can isolate css critical to the initial page layout like grid, type, visibility components and inline them in to the page head or, if you have a ton of pages, in css file with the final size under 1-1.5k(really hard to do).
Then you can just defer auxiliary css and their size wont matter much.
Or You can use some css cleaner tool to remove selector duplicates or just make your own, it's pretty simple since the entire blocks of css will match.
Somewhere I saw this structure of CSS document:
header {
.navigation {
a {
text-decoration: none;
}
}
}
If I will try it in my CSS file, it doesn't work.
What is needed for ability to write this code?
Thank you
This looks like LESS CSS http://lesscss.org/
You have to import javascript file less.js into your page.
Now compile your css file and than apply Mr #ozkanozlu is right way
just do this
header {.navigation{a{text-decoration: none;}}}
The code you've quoted is not actually CSS, it is a language called LESS, which compiles to CSS; it is a CSS pre-processor. It is designed to make CSS easier to work with, but it needs to be converted to pure CSS before it will actually work in a browser.
LESS can be compiled to CSS before deployment -- ie so you work on LESS code, but the user sees standard CSS -- or provided to the browser as LESS, but with the less.js also compiler included in the page. For performance reasons, I would always prefer the first of those options.
Other similar languages also exist -- see SASS for example. You can see a comparison of SASS vs LESS here: http://css-tricks.com/sass-vs-less/
Lets say that youre using Twitter Boostrap and you have their generic boostrap.css and other boostrap associated css files, and you want your own classes to have identical attributes to some of the given boostrap classes. To my understanding, you would not want to directly modify the css bootstrap files, but you would want to extend them by creating a custom.css file.
So without touching the boostrap files. How would I replicate a boostrap class for my own class? Would the only way be to copy and paste from the boostrap.css file. Or is there a way to do
.myownclass {
-- some command to replicate class 'alert alert-error' without repeating the CSS that has already been written
}
You could use a css preprocessor. Other ways already cited by other users are fine but using a css preprocessor is the best way.
Bootstrap is built using LESS, so you can use LESS. Take a look at here: http://bootstrap.lesscss.ru/less.html.
Also SASS can be used. According to me SASS is better. You find a tutorial here: http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-1/
What are CSS preprocessors?
A browser can only understand CSS, as the styling technique for any DOM element being rendered. CSS, as a language has its own feature set, which at times might not be enough to create a clean and reusable chunk of rules. Eg. Not being able to reuse a collection of rules in multiple selectors, unavailability of variables which may lead to ambiguous pieces of data across the stylesheet. To overcome most of these limitations, the concept of a preprocessor was born – offering an advanced way of writing CSS, which extends the basic functionalities. This advanced code is later compiled as normal CSS code using respective compilers (which depends on what preprocessor you are using), which the browser will understand.
Should you use preprocessors?
The decision of adopting preprocessors for your next project, in my opinion, should be made after much analysis and solely depending on your expertise level and most importantly the project requirement and workflow of the team as a whole. Here are some tips that might help you come to a decision:
Not for beginners: If you are a beginner and starting to explore the fantastic world of CSS, I would suggest you get your hands dirty with normal CSS before moving into a framework or preprocessor of any sorts. It’s really important to understand and be able to use the core concepts of any language that you work with, and that’s true for CSS as much as any other programming language.
Are you a team of front end developers? As a team of front end developers, adopting preprocessors will be a great move. But only if somebody on the team really knows how to handle huge CSS files and structure them accordingly. By making use of the powerful features offered by the language, it is important to first structure the whole CSS into reusable chunks and define a strategy for CSS organization. Eg. Are you going with multiple CSS files for typography, forms, layout etc. Are you going for theme-able UI, where you might need to use variables extensively, etc.
Are you willing to cross the barrier? Adopting preprocessors means you are going to be implementing more programming concepts into your CSS coding approach. There will be a lot of concepts that are native to any basic programming language, which you might want to learn and implement, by using a preprocessor. This means, you will definitely need to brush-up your programming skills and might forever change the way you see a CSS code. If you are willing to cross this barrier, and feel ready to embrace the change confidently, this is for you.
In CSS this is not possible. The only way to do it, is to chain the classes in your html tags.
<div class="alert alert-error myownclass"></div>
If you are using less you can do it like this:
.myownclass {
.alert
.alert-error;
}
This will copy the settings from one class to another. The result will be the same as if you copy the contents of the class directly.
If you are using Sass you can do it without copying the class contents. Just reference the classes as shown below. This will not copy the contents, instead it will reference your custom class at the right position in your css code.
.myownclass {
#extend .alert;
#extend .alert-error;
}
Ref: Sass #extend
You would have to use LESS to avoid copy/paste:
.myClass {
.bootstrapClass;
}
Or you could use any of the other CSS preprocessors TBS has been ported to (Sass has one, not sure on the others).
You could give the element two classes - the original Bootstrap class, and then one of your own making. Then you would target it like this:
HTML
<h1 class="original_class myownclass">Hello</h1>
CSS
.original_class.myownclass {
// css code
}
Here's a little jsfiddle illustrating the concept: http://jsfiddle.net/ApEpr/
This does not require the use of a CSS preprocessor - it's just regular old CSS.
Are there any CSS frameworks out there along the lines:
Takes CSS "as it should be" as input, maybe with some additional functionality
Outputs cross-browser CSS, with all IE6 hacks in place, using JavaScript and ImageMagick when necessary.
If you're more comfortable with programming, and don't want to deal with CSS hackery, you could always try a preprocessor framework like Compass which is built on SASS. Bootstrap (built on LESS) and Stylus are also worth looking at.
Have you looked into jquery ui?