I have researched SASS and Blueprint seperately, and think I understand how they work, and I have set up my project directory using the compass CLI tool, but I am at a loss as to the correct way to organize my project.
After initializing my project with
$ compass create my_project --using blueprint/semantic
...I was told to link the generated CSS files in my HTML with these lines
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
...but where should I put my own application-specific .scssfiles and how should I include the appropriate blueprint files?
It seems to me that I should not be including the generated print.css and screen.css directly into my HTML but instead doing something like:
#import "screen";
body {
#include container;
}
...and then using only the file generated from the above in my HTML. Otherwise why would we have a line like this in screen.scss?:
// Import all the default blueprint modules so that we can access their mixins.
#import "blueprint";
I can't use mixins in my HTML.
I'm finding the docs to be very vague and contradictory, and any sort of short example illustrating the combination of:
HTML
SCSS files generated from compass command above
SCSS files containing site-specific styling
would be very helpful for me and probably others.
The "screen.scss" and "print.scss" files are nothing magical. These are just example filenames given to the output which you can link from your HTML, but you don't have to: just delete them and create your own files if you prefer, or add your own styles to them. The intent with these 2 files is to keep the style concerns organized separately: you could add a "mobile.scss" and then link all these in your HTML, or import them together into one master file under #media blocks.
I can't use mixins in my HTML.
Mixins don't apply to your HTML. They are a helpful technique used for writing your SCSS source code: the compiled CSS output or the HTML doesn't know anything about them. You should be using mixins to take advantage of Sass.
I have researched SASS and Blueprint seperately
It's important to understand what the Blueprint classes do first, but when you use Compass there are different approaches for how you apply frameworks like Blueprint:
1. Use Blueprint's original non-semantic class names throughout your HTML
This is not considered best-practice, but it's a way to get started especially when wireframing/scaffolding:
screen.scss
#import "blueprint";
// This outputs Blueprint's classes into your stylesheet:
#include blueprint;
#sidebar { background: $blue; }
#main { background: $yellow; }
screen.css (compiled)
.column { float: ... }
.span-6 { width: ... }
.span-12 {width: ... }
/* ...etc., all of Blueprint's classes ... */
#sidebar { background: #ccf; }
#main { background: #ffc; }
index.html
<div id="sidebar" class="column span-6">sidebar content</div>
<div id="main" class="column span-12">main content</div>
The result is the same as using Blueprint without Sass/Compass. Your HTML would contain the presentational classes, which are really not too different from just using style="width:120px" on your elements: it's just done using classes instead.
2. Use Blueprint as mixins into your own semantic class names:
screen.scss
#import "blueprint";
// Do not output Blueprint's classes into your stylesheet.
// Instead, write your own classes and mixin the functionality:
#sidebar {
#extend .column;
#include span(6);
background: $blue; }
#main {
#extend .column;
#include span(12);
background: $yellow; }
screen.css (compiled)
.column, #sidebar, #main { float: left; ... }
#sidebar { width: 240px; background: #ccf; }
#main { width: 480px; background: #ffc; }
index.html
<div id="sidebar">sidebar content</div>
<div id="main">main content</div>
As you can see, the second method moves Blueprint's presentation logic out of the HTML and into the stylesheet.
The judicious use of #extend (instead of #include) is an optimization that lets you group common styles together, e.g. all the elements that are "columns" are defined once as a list of selectors; only their different widths are included directly into each element.
Related
I'm having trouble understanding how exactly I should build sites with CSS. I get that each component has it's own CSS, but should I do this with every component? What if the components are huge with a lot of CSS?
I've looked at some sites that were built with vue.js and they have external CSS files such as a app.css file with a ton of internal style blocks.
I'm use to building sites with Sass in it's own /styles directory and having compass.app compile those .scss files into .css files.
Here's an example of a component css block:
<style lang="scss">
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
a {
color: red;
}
}
</style>
What if that was a thousand+ lines? Would I move that into an external scss file and if so, how? How does this all work?
Thanks.
If you concern is about code separation you can have custom CSS code in a component and add a scoped attribute so the styles you are writing there would only apply to that component:
<style lang="scss" scoped>
/* your scoped css rules here will only apply to this component */
</style>
Now if you also want to compile the CSS from all of your components and merge them into a single final CSS file that you would link from your main HTML file then you need to add a bundler/compiler such as webpack
You can also take a look at vue css-loader to understand how to modularize and compose your CSS rules.
My web2py project has an html file that contains only these two lines of code
{{extend 'layout.html'}}
{{=form}}
I want to write some inline css that should override the css that will be loaded from layout.html. I want to know if this is possible and if so, then how?
Here's the style that I want to add
.error {
margin-top: 0px
}
Here's how you can add inline CSS:
{{extend 'layout.html'}}
{{=form}}
<style>
.error {
margin-top: 0px;
}
</style>
tl:dr version: is there a way to #extend a css class and not have the original class appear in my compiled css without changing all my css classes to %placeholder classes?
Short answer based on the below answers: it appears there is no way to do this unless you go through and convert the css to silent/placeholder classes e.g. convert .one{} to %one{} and even then that will cause problems with media queries.
I have a css file (lets call it "style.css") which contains 200+ CSS classes to style various elements like forms and buttons etc. What I want is to include some of those classes in a project and other classes from that file in other random projects/websites. With each new project I also want to give the classes random semantic class names of my choosing.
My preprocessor of choice when working with CSS is SCSS and I really need an answer that uses the power of SCSS.
Here is a quick example of what I'm talking about - loading css into a SCSS file and then extending that css with my own class names:
//style.css
.one {
color: red;
padding-top: 1px;
}
//style2.scss
#import "style.css";
.two {
#extend .one;
}
The problem here is that my SCSS file will compile to CSS and look like this:
//style2.css
.one {
color: red;
padding-top: 1px;
}
.two {
color: red;
padding-top: 1px;
}
But what I want to do is only include the second class, which I gave a special name.
I've tried a few ways of doing this but here's one example that does not work but is along the lines of what I was thinking I should be able to do:
A.) First, I grab the style.css file and chuck copy/paste it into a style.scss file.
B.) Second I wrap all the whole thing in a placeholder/silent class, like so:
//style.scss
%placeholder {
.one {
color: red;
padding-top: 1px;
}
}
C.) Then I import that SCSS file and try and extend a class of my choosing that is within the placeholder, like this:
//style2.scss
#import "style";
.two {
#extend .one;
}
When I try and compile this I get a blank css file (and rightly so for trying to be too tricky). The other thing I know is that you can't extend nested selectors so "#extend %placeholder .one;" is also out of the question.
My question is this: does anyone know of a way to import and then extend a css class so that the compiled result does not include the imported css?
The only other solution I can think of is to just delete the imported css from the top of my file before I let it out into the wild. But this is honestly less than ideal solution.
Thank you in advance to any answers :)
You're using placeholders incorrectly, the placeholder should simply be one, no need to wrap it. Try this:
// style.scss
%one {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
.two {
#extend %one;
}
Note that there is an issue with this approach. While the outputted CSS is leaner than using a mixin (#include), you will not be able to use %one inside of any #media queries. Ie. this will not work:
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
// This won't produce CSS as it's inside the media query
#extend %one;
}
}
The only way I'm aware to get around this is to use a mixin instead of a placeholder which will result in more CSS (if you use one more than once).
// style.scss
#mixin one() {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
#include one();
}
}
I've detailed the difference in output between mixins and placeholder selectors on my blog if you're not aware.
I don't know if there's a different Css usage in Asp.net but I just can't make it work.
I target my .css file with
<link href="Style/Style.css" type="text/css" rel="Stylesheet" />
code. And there are <div> and <table> elements.
The table has an id and its properties in the css file are working normal. But I can't say the same thing about <div> and <a> tags.
Let's take this example:
<div align="center" id="bla">
And I use id in css file in different ways. I first used #bla { } or div#bla or div #bla { }, then I used .bla { } or div.bla { } or div .bla { } with making class="bla" instead of id="bla" in Aspx page, they all did not work.
But when I moved the code from css file to Aspx file between <style type="text/css"><style/> tags, it worked normal.
The same behaviour happens in <a> too. But it does not in <table>.
Is there a different usage? What do I miss?
More info at http://jsfiddle.net/npTc6/
It could be a pathing issue to your CSS file. If you have multiple CSS files, it could also be the order of your CSS files. You should verify that you have the correct path to your CSS file and that you have the correct file name referenced in your code. Often, the most simple mistakes are the most frustrating.
UPDATE:
Your CSS has a space between the "a" anchor and the class name, and I believe you need a leading slash on your image references (if not there already).
Example:
a .Russia
{
display: block;
background-image: url("/Images/Default/Russia.png");
width: 173px;
height: 173px;
}
try...
a.Russia
{
display: block;
background-image: url("/Images/Default/Russia.png");
width: 173px;
height: 173px;
}
It was a problem common in Asp.Net. Just about background properties. Standart CSS background-image code had some issues so there are variations. I tried many, then fixed it by using this one:
background: url(/Images/Default/Turkiye.png);
I'm trying to get Blueprint (SCSS-Syntax) working with my Rails (3.1) project.
To keep it simple at first I set up a plain HTML file (outside my rails project) with some basic blueprint syntax, after installing compass and creating the basic scss files with:
compass install blueprint .
It produces a sass directory with a screen.scss that contains:
#import blueprint
among other stuff, but the stylesheets/screen.css doesn't contain span-x instructions, as I was expecting after watching Compass: A Real Stylesheet Framework by Chris Eppstein (http://vimeo.com/4335944) and most importantly my HTML is looking dull as ever.
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div class="container">
<div class="span-24">
<center>
<h1 class="alt box">asdfhlakshf sdfgs dgf sdf sdfg fsd g</h1>
</center>
</div>
<div class="pre">
asdfhlakshf
</div>
<div class="span-4 success colborder">
WOW
</div>
</div>
</body>
</html>
My screen.css looks like this (small excerpt):
/* line 44, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_form.scss */
form.bp input.text, form.bp input.title, form.bp input[type=email], form.bp input[type=text], form.bp input[type=password] {
width: 300px;
}
/* line 46, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_form.scss */
form.bp textarea {
width: 390px;
height: 250px;
}
/* line 39, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */
form.bp .box {
padding: 1.5em;
margin-bottom: 1.5em;
background: #e5ecf9;
}
/* line 42, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */
form.bp .border {
padding-right: 4px;
margin-right: 5px;
border-right: 1px solid #dddddd;
}
/* line 45, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */
form.bp .colborder {
padding-right: 24px;
margin-right: 25px;
border-right: 1px solid #dddddd;
}
/* line 47, ../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.5/frameworks/blueprint/stylesheets/blueprint/_scaffolding.scss */
form.bp hr {
background: #dddddd;
color: #dddddd;
clear: both;
float: none;
width: 100%;
height: 0.1em;
margin: 0 0 1.45em;
border: none;
}
Calling
compass compile
Just tells me everything stays unchanged. But it does something once I add
#import "blueprint/grid"
for example. Still no pretty html though.
The second I copy a precompiled screen.css (downloaded from the blueprint website) to the stylesheets folder everything works like a charm. It's the same inside of my rails project. I can use the precompiled css there without problems.
I guess I'm missing something basic here I need to do for the compass compiling magic to work, but I can't figure out what it is.
Thanks in advance for any ideas!
Versions
compass 0.11.5 (Antares)
ruby 1.8.7 (outside of the rails project)
ruby 1.9.2 (with the rails project)
using rvm 1.6.21
Installed haml 3.1.2 and sass 3.1.4. Though I think that this should not be relevant since I used html and scss, right?
Maybe I should have included more of my screen.scss:
// This import applies a global reset to any page that imports this stylesheet.
#import "blueprint/reset";
// To configure blueprint, edit the partials/base.sass file.
#import "partials/base";
#import "blueprint/grid";
// Import all the default blueprint modules so that we can access their mixins.
#import "blueprint";
// Import the non-default scaffolding module.
#import "blueprint/scaffolding";
// To generate css equivalent to the blueprint css but with your
// configuration applied, uncomment:
// #include blueprint
// If you are doing a lot of stylesheet concatenation, it is suggested
// that you scope your blueprint styles, so that you can better control
// what pages use blueprint when stylesheets are concatenated together.
body.bp {
#include blueprint-typography(true);
#include blueprint-utilities;
#include blueprint-debug;
#include blueprint-interaction;
// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
}
form.bp {
#include blueprint-form;
// You'll probably want to remove the scaffolding once you start styling your site.
#include blueprint-scaffolding; }
// Page layout can be done using mixins applied to your semantic classes and IDs:
body.two-col {
#container {
#include container; }
#header, #footer {
#include column($blueprint-grid-columns); }
#sidebar {
// One third of the grid columns, rounding down. With 24 cols, this is 8.
$sidebar-columns: floor($blueprint-grid-columns / 3);
#include column($sidebar-columns); }
#content {
// Two thirds of the grid columns, rounding up.
// With 24 cols, this is 16.
$content-columns: ceil(2 * $blueprint-grid-columns / 3);
// true means it's the last column in the row
#include column($content-columns, true); } }
I also tried changing my ruby version and renaming the sass folder to scss. I'm running out of ideas here...
Alright. It was something basic. I didn't uncomment the "#include blueprint" line, because I thought #import blueprint should be enough and I go an error message, when I tried.
Turns out the error message was solved by adding a semicolon to the end of the line.
Maybe the smicolon should be added in the shipped screen.scss. I'll send an email to the author.