I use Web Essentials 2012 in VS 2012.
When I compile LESS file with content like that:
/* HEADER */
.header{
background: red;
}
/* FOOTER */
.footer{
background: black;
}
...to CSS file, the outcome is this:
/* HEADER */
.header{
background: red;
}
/* FOOTER */
.footer{
background: black;
}
Is there an option "Keep original formatting" or set of option with which I could keep the original formatting ?
Sort of...
If your main desire is to keep the "gap" between the comment and the style for easier visual recognition, then in most cases this should work (unless perhaps you minify the code), because within the comment it will preserve the formatting of the empty lines down to the new position of the end comment marker */:
/* FOOTER *
*/
.footer{
background: black;
}
That's about as close as you can get. Note: I have not actually tested this with Web Essentials, just on the less2css.org compiler.
Related
I am using the flexdashboard Package with Rmarkdown and would like to modify the dimensions of headers, location of borders, colors, etc. that result in the webpage created by Rstudio. There are many CSS files associated with flex dashboard and Rmarkdown. Can someone please inform me what CSS files should be modified for this purpose, and where these files are located in the R or Rstudio directories?
By modifying a CSS theme (we chose to modify Lumen) in a flexdashboard subdirectory my colleague and I learned we could control the dimensions of certain elements in flexdashboard.
Specifically, we altered the CSS file in this directory:
C:\Program Files\R\R-3.4.2\library\flexdashboard\rmarkdown\templates\flex_dashboard\resources
See the annotated CSS file (again, for the Lumen theme) below for how we changed the dimensions of the border boxes. The edits shown were placed at the end of the existing lumen.css file.
/* Jeff's Edits */
.storyboard-nav {
box-sizing: border-box;
width: 100% !important; /* This prevents JS transformation on width */
height: auto; /* This overrides the height */
}
.storyboard-nav .sbnext, .storyboard-nav .sbprev {
height: auto; /* This overrides the height */
font-size: 3rem;
}
.storyboard-nav .sbframelist {
height: auto; /* This overrides the height */
}
.storyboard-nav .sbframelist ul {
box-sizing: border-box;
width: 100% !important; /* This prevents JS transformation on width */
height: auto; /* This overrides the height */
}
.storyboard-nav .sbframelist ul li {
height: auto; /* This overrides the height */
width: auto; /* This overrides the width */
}
You can always modify the defaults by adding your own CSS file, instructions here. This way you don't have to modify the default specifications (in case you ever want to use them).
If you want to check the default specifications for each theme, you can find them in the flexdashboard github repo.
Working on CSS in Visual Studio Code I want to select multiple lines of property:value code and comment them out separately. For example
Before:
body {
width: 0px;
height: 0px;
color: red;
}
After highlighting the width, height and color lines and applying auto comment with Ctrl+/, VS Code's default behaviour is to include all lines as one comment:
body {
/* width: 0px;
height: 0px;
color: red; */
}
I want to have:
body {
/* width: 0px; */
/* height: 0px; */
/* color: red; */
}
How can this be done?
You mean this:
You hold alt and place the cursor on multiple lines and CTRL+C to comment..
Hold down Alt and select rows/multiple lines to comment and press ‘Alt+Shift+A’. This will Block comment the selected sections. You can comment just parts of code using this method.
i'm building a custom theme for wordpress and saw this in the default 2010 style.css file:
#wrapper {
margin: 0 auto;
width: 940px;
}
#wrapper {
background: pink;
margin-top: 20px;
padding: 0 20px;
}
now this is the default code (except the pink). when i try and collapse it, which seems logical, it makes quite a difference.
what i can't figure out is WHY you'd declare the same element twice like that? i've never seen that before...
WR!
It proves useful when you want to apply shared properties at multiple elements. Another useful application is adding stylesheets from multiple sources Example:
#head, #foot {
height: 100px;
}
#foot { /*Another foot*/
color: red;
}
Second example: CSS from multiple sources:
/* External stylesheet: common.css */
body {
background: yellow;
}
/* Inline stylesheet, overrides external stylehseet */
body {
background: pink;
}
When two properties have the same specificity, the lastly declared property will be applied.
It just overrides previously declared properties.
wrapper will now have margin:20px auto 0 auto (Top Right Bottom Left).
I want to zebra-stripe a html table without using any js stuff or writing server-side code to generate even/odd classes for table rows. Is it ever possible to do using raw css?
It is possible, with CSS3 selectors:
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
According to caniuse.com, every browser supports it now.
If all you're changing is the background colour, then the following would work, where test.gif is a 40px high image with the top 20px one colour, and the bottom 20 pixels the other colour. If you need to change any other css properties you're pretty much stuck.
table { background: url(test.gif) top; }
table tr { height: 20px; }
http://www.w3.org/Style/Examples/007/evenodd
CSS 3 nth-child. Since browser support is limited you can reproduce the behavior with Sizzle (included in, jquery for example)
(In CSS <= 2) Nope. Unfortunately there aren't any selectors (in CSS <= 2) that operate based on the position (in terms of the number it is within it's parent's children) which I believe you would need to do this with just CSS.
Note to self: read up on CSS3, already!
In http://www.w3.org/TR/css3-selectors/#structural-pseudos you can find explanation and examples on using nth-child:
tr:nth-child(2n+1) /* represents every odd row of an HTML table */ {
background-color: green;
}
tr:nth-child(odd) /* same */ {
background-color: green;
}
tr:nth-child(2n+0) /* represents every even row of an HTML table */ {
background-color: pink;
}
tr:nth-child(even) /* same */ {
background-color: pink;
}
Good luck with browser compatibility - you'll need it.
There are hacks to make it work in IE (using JS) - I'll leave that sifting to you.
Leaving aside the question of whether you should serve single or multiple stylesheets, assuming you're sending just one, what do you think of this as a basic structure?
/* Structure */
Any template layout stuff should be put into here, so header, footer, body etc.
/* Structure End */
/* Common Components*/
Repeated elements, such as signup forms, lists, etc.
/* Common Components End*/
/* Specific Page 1 */
Some pages might have specific styles, that would go here.
/* Specific Page 1 End */
/* Specific Page 2 */
As above
/* Specific Page 2 End */
/* Specific Page etc */
And so on.
/* Specific Page etc End */
That's similar to how I structure mine, however, I find that using sub-headings is the best way to do it, so I use this structure:
/*************************
* GLOBAL *
*************************/
/* All of the common stuff goes here under the appropriate sub headings */
/* Heading formatting */
/* Text formatting */
/* Form formatting */
/* Table formatting */
/* etc */
/*************************
* LAYOUT *
*************************/
/* All the layout things go here under sub-headings */
/* Header */
/* Left Sidebar */
/* Right Sidebar */
/* Footer */
/*************************
* NAVIGATION *
*************************/
/* I put navigation separate to the layout as there can be a number of navigation points under their sub-headings */
/* Main (horizontal) Navigation */
/* Left Navigation */
/* Right Navigation */
/* Breadcrumb Navigation */
/*************************
* FORMS *
*************************/
/* Any form formatting that varies from the common formatting, if there are multiple differently formatted forms, then use sub-headings */
/*************************
* TABLES *
*************************/
/* Same deal as forms */
/*************************
* LISTS *
*************************/
/* Same deal as forms and tables */
/*************************
* CONTENT *
*************************/
/* Any specific formatting for particular pages, grouped by sub-headings for the page the same way as forms, tables and lists */
/*************************
* CSS SUPPORT *
*************************/
/* This is for any special formatting that can be applied to any element on any page and have it override the regular formatting for that item. For example, this might have things like: */
.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }
/* etc */
Hope that helps.
I generally don't recommend writing on a single line like that though, or like suggested in the link Adam posted, they get very difficult to skim over if they get long. For the examples above, it was just quicker to type them that way so I didn't have to indent every line.
For formatting I would recommend this structure:
.class {
width: 200px;
height: 200px;
border: 1px solid #000000;
}
And so on, I put the structure of the class or ID at the top, then any other formatting, like the font etc below that. Makes it very quick and clear to skim over.
Whatever makes sense to you is good enough. Frankly, when someone else comes looking for something in your stylesheet - or when you come looking for something, for that matter - they're not going to try to figure out what your organizing structure was. They're just going to search for whatever class or element they need to see. So as long as you generally keep stuff that's related together, and section things off with comments like #Matt suggests, you're fine.
The fact of the matter is that even with a very well-thought-out organizational structure - just like with a well-thought-out filing system - it's not always obvious what goes where; so you're better off just being somewhat sensible, not devoting a lot of time to keeping things organized, and relying on search tools to find what you need.
I organize my CSS in a similar way as yours but I do start with a reset section. The main idea is to go from general to specific. So here it goes:
reset
structure
html_tags
navigation
specific sections
Error messages - that's my last section
The structure you presented is exactly what I use. However, it seems to me that it still got too complex with new rules showing up and overriding each other... Perhaps I should try to stick to the solution suggested in the topic linked to by Adam instead.
It seems like every time I create a new css file, I find a new way to organize it. And they are ALL better than the previous.