What is Reddit's opinion of
LESS?
From 3.5 billion Reddit comments
➔ LESS website
By popularity on Reddit, this Service is:
54 reviews of this app found across Reddit:
I give you the darken function.
FYI, lowering each set of pixes down will not work the way you think it will, it will more often than not just give you a different colour altogether, you'd need to convert the hex value to a different colour space like HSB (hue, sat, brightness) and change the brightness.
Edit: Sorry about the waffle, basically use the darken function and experiment with the percentage until you get the shade you desire.
Hey! I've been trying out various color libraries lately. I tend to use HSL as much as possible, and many color libraries only seem to support RGB and hex. So here are my suggestions:
HSL support.
Alpha support (HSLA, RGBA).
Conversion (ex. HSL ↔ RGB ↔ hex)
Some basic manipulation methods (ex. lighten, darken, saturate, spin, etc.)
Color blending methods
The color manipulation in LESS does a lot of this stuff.
I see that your library supports some of these things, so I'll give it a shot!
> The biggest advantage of SASS is that it's all pre-compiled on your machine, not on the clients. I'm not terribly sure, but I think you can do the same with LESS.
You should never, ever, ever, send pure LESS down the pipe and have the browser compile it with LESS.js at the end in production. Maybe for development - maybe. There's an entire tutorial on how to compile LESS on the site.
I'm not sure it's possible to have method overloading in a weakly typed language. We would need to add scalar type hinting before we could add overloading, but I'm all for both!
Guards would give the same benefits of method overloading while getting around the problems associated with weak types. Less has a clean guard system that could be adopted by PHP. Example:
class MyClass { public function setNumber($number) when ($number < 50) { }
public function setNumber($number) when ($number >= 50) { }
public function setNumber($number) when (gettype($number) == "string") { } }
You need full-blown examples on the first page. Right now it conveys no information - I don't even know what this was until I read your reddit comment. Take a look at how LESS have done it and replicate that - http://lesscss.org/
Why are you not hosting through Wordpress.org? I immediately reject free plugins that aren't available through there because it makes updates a huge hassle, especially considering this is "alpha" and will need lots of updates.
Your top menu changes when click on Themes. This is confusing as the page looks the same and you can't find your way back to the main page or the about page, for example. Stay with just one menu.
Or LESS...
After seeing what a preprocessor can do for stuff like this I will never, ever go back.
In your mixins file declare:
.border-radius(@radius: 2px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
Then, in your css all you ever have to do for border radius from that point on is:
.some-div{ .border-radius(8px); }
.some-other-div{ .border-radius(12px); }
It's feckin' brilliant, man.
Bootstrap does a lot of nice things, but using it in its default state does create what has now become a very generic look. This leads to having to undo a lot of what Bootstrap has done once your site goes past the prototype stage.
The key is to learn to use less and edit the less files that make up Bootstrap.
We did come across some issues with duplication in the compiled output when we were trying to import mixins in the component files (we use Less).
Every component would for example have a class for every single font-icon. We solved it by using a feature in Less which allows you to import files without adding them to the compiled output unless they have been referenced. (http://lesscss.org/features/#import-options)
In Sass, you'd have to rethink that a bit, it works a little different and I'm not sure how you'd solve it.
Good advice in other comments here. I'm just going to give you a handy tip. Chances are pretty good if you're a PHP developer that you're going to have to dabble in JavaScript from time to time as well. If you want to stick to OOP principals in JS, the latest ecmascript standard supports classes and the like. While it's not widely supported in most browsers yet, there's a program called Babel which compiles JS code written to the latest standard into code that will run on older browsers.
You can also apply some OOP to your CSS code if you use a CSS compiler. I've only ever used LESS, so I can't really compare it to any of the other solutions, but I know others exist. There is a LESS compiler that's ported to PHP.
I'm just tossing this out there because I only started using these things recently and I really wish I'd known about them earlier (although I doubt Babel has been around for that long).
> I wanted to know using LESS or SASS/SCSS, I understand that we work using the file format and then convert it to css after it. Does this mean you write the code in less or scss, and then run it through a preprocessor?
Kind of. I'll use LESS as an example to make it easier:
You write in Less specific syntax. You then save the file as something like styles.less. When you include it in your html header, you link to styles.less. You do not actually run it through anything manually, it's handled either server or client side.
When you run Less either server or client side, the preprocessor knows to recognize and convert any .less file extensions. To run Less server side, you have to install the package on your server. To run it client-side, you download a .js file and include it in your header AFTER including the .less file (more details here).
So basically, it's not much different from CSS. You code and include as usual. You just do the extra step of including the .js file if you're client side, or the one time step of installing the less package on your server.
Hope that clarifies things a bit.
Don't do it yourself. Someone's already done the hard work for you.
Check out lessphp, an implementation of LESS, a CSS preprocessor written in Ruby.
Bootstrap is a CSS/HTML framework. Basically you have classes and elements already created. You can just start using them in your project. Know more here Bootstrap. LESS is a CSS pre-processor. It extends the CSS language, you can use variables, mixins and other things that CSS doesn't have as default... Learn more here LESS For more front-end tools and details check this GitHub Gist
For a short time there was an explosion in JS frameworks which were supposed to replace HTML/CSS. But they've all but faded from existence (I thought one was called Citrus.js or something but I can't find it anywhere) for good reasons. HTML is a simple, declarative, markup language. You don't need to deal with any logic when defining the basic structure of a page. As such, it's far faster to render and HTML file than it is to generate one in JS. The same holds true for JS.
Could HTML and CSS do with an update? Sure. What you can do for now is use frameworks like Jade and LESS to generate HTML and CSS, respectively, in more feature-rich languages.
Edit: One additional point. I love the idea of one language to do it all (I use Node.js religiously) but HTML and CSS are so simple syntactically and logically that it's not the least bit difficult to swap between them and JS.
something has to trans-compile the less into css. when you're doing it 'in the browser', you're relying on the less javascript file to have the user's browser do it.
in that case, you would need to serve the less files statically and include them like you would a normal css file in your html files.
although the less folks recommend not doing this: http://lesscss.org/usage/#using-less-in-the-browser
A lot of it is Squarespace's compiled LESS code. Starting from line 57 down to where the content actually begins is all CSS, minified and presumably produced by less.js.
Above live 57 is mostly just various bits and bobs. For instance, from line 31 to 46, they have what looks like a custom image loader (it being labeled data-sqs-type="imageloader" was a pretty good give away of that). As far as I know, all that does is fetch images for the site (if there are any) and then modifies them to fit with the page. There's also what appears to be a kind of custom font thingie on line 23. I only assume it's for fonts because it says
/* * For font license information, see the CSS file loaded by this JavaScript. */
in the source file that it retrieves.
I imagine there's some kind of custom analytics script in there somewhere. That might be what's on line 47.
I'm not a web dev, though, so take all that with a grain of salt.
Look in the <title> tag.
I think the original implementation was in Ruby, though it's ~~not~~ now Javascript. I also seem to recall a much stronger "less.js" branding effort many months ago, but I might be mistaken.
edit My favorite typo.
I split it into separate files and use LESS. I find it makes organizing CSS so much easier. There are others that do the same thing, such as SASS. Those two are the best known ones, but I personally prefer LESS.
Here are a list of GUI compilers you can use. If you are on Mac, CodeKit is pretty awesome and it supports both LESS and SAAS. http://lesscss.org/usage/index.html#guis-for-less.
Depending on what text editor use, there might be a plugin that compiles LESS every time you save. That would be a really easy way to go .. http://lesscss.org/usage/index.html#editors-and-plugins
It's worth noting that Bootstrap is actually authored in LESS and then distributed as compiled CSS. Then they port it over to SASS for those who prefer it. http://getbootstrap.com/getting-started/#download
You can also set up monitoring from the command line. The command line tool is really easy to install and use, even for people who are new to the command line. If you want to get a little more advanced, you can. There are plugins for LESS, advanced configuration options for compiling, mixin libraries, integration with gulp/grunt, etc. But everything works fine out of the box and you don't have to do any of that until you feel comfortable enough to do so.
A preprocessor might help. I personally prefer LESS but there are others, SASS being a well-known one.
A big thing I like about LESS (but again you can do this with the others) is that you can define variables at the top like colors. I had a site the other week, a personal project, where I had white on black (it was for a punk band) and then a spot color for some form elements and stuff. I just defined the color's hue at the top, now I can change the hue and now the entire site's forms can go from blue to green in just ten seconds.
Also you can nest selectors. So you can do this:
p.article { // do article style stuff here
img.illustration { // this selector compiles to "p.article img.illustration" } }
I highly recommend looking into this because it makes your stylesheets so much more readable. Front-end frameworks like uikit and Bootstrap use LESS very well, if you want examples of what can be done with it.
If you're interested in a CSS pre-processor, Less.js allows run-time modification of CSS variables:
less.modifyVars({ '@buttonFace': '#5B83AD', '@buttonText': '#D9EEF2' });
See here. This is the route I would take for a real-time color picker theme designer thingy.
>Ill use only layout and maybe button. Is it even wise to use bootstrap even if i wont need 100% stuff? How do you delete all other unused stuff?
Use the customizer to pick just what you need.
> Or is it better to just use other smaller framework?
Debatable, but it really depends on developer preferences. There are lighter grid framework options available.
> Or how to change color of one button ? or addng texture?
You can either do it in the customizer, in the bootstrap.css file, or in the less file.
>Is it better to add my CSS file below bootstrap to overide buttons or is it better to eddit buttons in bootstrap css?
It's best to modify the less file and compile into css, in terms of performance.
It's best to override, if trying to keep the changes separate from the core bootstrap settings. (Templates)
The huge expanse of #ffffff hurts my eyes. It's like I'm staring into a flashlight. You've got something interesting going on with the colors on sections, consider bringing more of that into the actual pages.
Portfolio page: two columns like that is NOT really very good html/css. Try something like this:
<ul id="portfolio"> <li> <h3>project name</h3> <a href="link"><img src="thumbnail.jpg"></a> <p>project description </li> </ul>
Much simpler without a zillion classes/IDs and semantically better - you have a list of stuff you've done, right? SUPER easy to style, just refer to "#portfolio p" or whatever. LESS will make srtling this even easier. You could probably achieve roughly the same layout by making the ul/li 100% width, then setting the p to 50%.
(A little sweat into this now will pay off later, when you can add another project at the top without having to do any hand-tweaking of any more css to make it line up.)
Your resume could be marked up similarly as HTML. It, too, is a List Of Stuff.
Also there is no #visited color for your links. With only four pages, sure, it's easy to remember where you've been - but it suggests a lack of attention to detail.
Overall? Design-wise it's safe and competent. Markup-wise, that "leftpane"/rightpane" stuff makes me cringe.
Furthermore CSS preprocessers like Less could probably help you out here. They allow you to define variables such as 40px*SCALING_FACTOR and then you could adjust just that one variable to regenerate all the lines of CSS in which it appears.
I was trying to not have people code for me since this is a project for a course I'm taking. There really wasn't much code at the time I posted this and it's just getting started now.
Below is the tileset and in their download is the whole tile sheet and a txt file that has a bunch of numbers to use with keyframes to do animation. Im having breakfast with my girlfriend in a bit, but when I'm done I can post a snippet.
https://0x72.itch.io/dungeontileset-ii
Im using that tileset for a game. Its done in HTML, JavaScript, and CSS, not much else. Libraries I'm using are LessCSS and lodash.
I'm trying to make more sense beyond just experimenting with numbers of how keyframes work. Especially with Less since it seems that it's easier to control than just vanilla CSS.
I've gotten as far as getting a Sprite animated on the screen looping in a single loop and a 24x24 grid of flexboxes that I'm actually kinda proud of.
Have you checked out how you're actually supposed to use LESS?
Browsers don't directly understand LESS files. You have to compile them into CSS first, then use a <link> to load the resulting CSS file.
>I probably should have been clearer in what I was asking: can I pass a JS value to a stylesheet in this case.
Not sure that it works exactly as you want, but you might be looking for something like http://lesscss.org/
Ok, based on what you described, and your particular limitations, there's a better solution, though it's still not a great idea: You can have Less compile on the frontend instead of in advance.
Look at the "Browser Usage" section here: http://lesscss.org/usage/
I'd suggest splitting out all of the variable css into it's own Less file (like theme.less or whatever) to improve performance if you're going this route.
If you put () after the mixin declaration, it won't render the mixin itself to the css, only including the mixin styles where they are actually mixed in.
I gotcha, thanks!
I guess I was thinking that in that case it would be more descriptive to use a base class + sub-classes like
.btn { /* shared styles */ .btn-primary { background-color: @btnPrimaryColor; }
...etc.
I didn't even think to see what the documentation had to say, turns out LESS's docs have a good example use case where a loop is clearly preferred over nested classes, to generate column classes and their widths.
> so LESS was designed to run right out of node.
LESS and Node were both released in 2009. LESS was not designed to run on Node originally, however. It was written in Ruby, just like Sass. Later, it was ported to JavaScript. (Source: http://lesscss.org/about/)
I would encourage you to learn LESS (a CSS preprocessor) that makes writing CSS rules much easier.
You can use any text editor, but you need to compile the LESS files before they can be used as CSS stylesheets (or, with a JavaScript library, LESS files can be parsed on the fly which has some performance impact).
A decent, free LESS editor/compiler is Crunch 2.
In general, CSS files follow the "last rule wins" principle. You can have as many CSS files for a page as you want and they are loaded in the order in which they appear in the page's HTML.
Conflicting rules simply overwrite where any settings in a previous rule that are not overwritten in a later rule are kept.
So, if you define a margin for a p tag somewhere in an earlier CSS and a padding for the same tag in a later CSS, both, the margin and the padding are applied.
> Am I supposed to just append my new css to the end of pure-min.css?
No. You write your specific CSS in a new stylesheet that you load after pure-min.css.
The -min versions of CSS stylesheets exist for many frameworks and are not supposed to be human-readable. They are for production use to minimize data transfer volume and also increase processing speed. Usually, each of the -min files has a corresponding file on the site without the -min which is the human readable form.
Again, neither the -min, nor the not minified versions should be changed to allow easy upgrading if there is a new version of the framework.
They are super easy to learn how to use. And they make everything with CSS easier. I use LESS for every project now and they have a full documentation (http://lesscss.org/) showing you how to do almost everything with it.
The ability to create variables for colors and fonts is awesome. And also creating "mixins" which helps speed everything up a ton.
>Moreover, Foundation is semantic; you can customize the stuff you want (as with Bootstrap); it's written is Sass and the styling isn't such a pain.
Bootstrap is written in Less and has an official Sass port.
This grid definitely isn't made for people supporting 10-year-old browsers. Neither are Bootstrap and Foundation's grids.
This grid is more of a tool similar to what LESS did with their client side implementation of LESS. Should you use it in production? No, probably not. Is it a handy tool for people who are unfamiliar with preprocessors to be able to start toying around with something? Yes.
I'm basically hoping to get people, particularly people who aren't familiar with preprocessors but know what grid systems are, to start tinkering around with the syntax of my grid system and eventually making the hop from the JS version to the preprocessor version: https://github.com/corysimmons/lost
Except the LESS docs specifically state to compile for production use :
>Using less.js in the browser is great for development, but it's not recommended for production > > Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.
http://lesscss.org/#using-less (scroll to Client-side usage)
Speaking as a sole full stack web developer who only gets provided mockups to implement in full into enterprise grade web software
I haven't had to use an !important in years. Thank you LESS
I think everything you mentioned about SASS is also true for less, maybe with slightly different syntax. Except the $ sign, which is very irrelevant IMHO. LESS has actually some features, which make it superior to SASS, e.g. the import options.
A NodeBB theme is similar to a Wordpress theme -- you'll be customising HTML templates, editing CSS (or in our case, LESS), and if necessary, executing javascript.
The best way to get started is to take a look at NodeBB's "Quickstart" Theme skeleton. This contains all of the files necessary to get started quickly, building a theme based off of the base "Vanilla" theme.
It's not really identical, as that is using a mixin instead of an extend. The properties would be duplicated for both classes. Your output in that case would be:
.original { CSS properties: here; } .unoriginal { CSS properties: here; }
I haven't looked at LESS in a while, to be honest, so I've learned that it now has an equivalent to Sass's @extend (as mentioned by devionregress):
.original { CSS properties: here; } .unoriginal { &:extend(.original); }
This would output:
.original, .unoriginal { CSS properties: here; }
I use bootstrap fairly regularly because of widespread adoption but I'm not a huge fan. I think there's a lot of bloat involved even if you flush out the features you don't want.
Having said that, you can use LESS's require reference feature and only use what you really need. It adds some additional work on your end because you essentially have to pull in what you need but long-term its a huge benefit.
I love the fact that a lot of plugins are bootstrap enabled but I also think a lot of people get hung up that.
>HTML and CSS are both terrible
Compared to what? CSS got the whole style-sheet language category for itself. And markup... eeeeh... who gives a fuck? You'll need some kind of nodes, attributes, text nodes, and comment nodes. You'll need all of HTML's crap. There really isn't much you could do differently.
HAML? Just some minor syntactic tweaks.
>I look at something like http://lesscss.org
That's just build on top of CSS. It's 99% CSS and 1% new stuff. It still got the concept of rule blocks which contain a bunch of property/value pairs. There are also selectors and at-rules.
Also, SCSS is better.
LESS is also a nice option and has a JS compiler so that you could test your changes quickly (using your notepad++ with ftp). Once you have finalized your css you could just reference the compiled version instead of having less.js doing all the work.
This would allow you to use css variables and let you make changes on the fly while developing.
Implementation is very simple. You would simply need the following code in your head:
> <link rel="stylesheet/less" href="/path/to/your/file.less"> > > <script src="/path/to/less/compiler/less.js"></script>
More info could be found at lesscss.org
As you are focused on design only, you will need to be able to quickly crank out high quality static sites in order to make enough money.
I'd recommend learning LESS CSS. This will help by adding features like variables and mixins (reusable functions). Also try out the various frameworks (Twitter Bootstrap et all). This again will allow you to make your sites faster with a good quality. Finally, try out Zen Coding. It will allow you to save typing and quickly outline the things you will need.
As others have mentioned, you will need to learn JavaScript. I'd also recommend learning the basics of PHP as that will allow you to modify existing scripts. Additionally, some PHP features can be handy for design work and definitely for processing forms and setting cookies.
The last recommendation I have is to choose a versioning system such as Git, SVN, or Mercurial. Get used to using them now so they become part of your workflow.
>You can use HTML5 in IE6 and up if you don't mind relying on JS.
Perhaps your comment would be better addressed to noahjk above. I said the same thing as you here:
>The HTML5 workarounds for IE use JavaScript to specifically list all the new tags they are adding support for, and yours is not one of them.
<example> is not an HTML5 tag, so it won't work.
I prefer using just normalize.css by itself: http://necolas.github.com/normalize.css/
I also use LESS: http://lesscss.org/
Been in your position sooo many years - now Im using Less and doing almost the same, but now with variables and mixins, which makes your less document look very nice, and your outputted css just a mess, but many many kb saved :)
This does require that your users have JS enabled or they will get ugly, unstyled HTML instead; plus depending on how fast their JS is (and how fast their computer is), they may see a "flash" of this ugliness on load.
You don't have to use Node.js as your web server, and could just have a Perl-ish Node.js script that iterates through all less files in a /less directory and dumps them as css files in a /css directory.
var fs = require('fs'); var less = require('less');
fs.readdirSync('./less').forEach(function(lessFile) { less.render(lessFile, function(err, css) { if(err) { console.log(err); process.exit(1); } fs.writeFileSync('./css/' + lessFile, css); }); });
This has the advantage of only running the compilation step once when the source Less files are changed instead of on every page view for the client, or on every request from the server (assuming only naive caching).
(Note, I use Node.js, but haven't used Less.js before; what I wrote above is based on the API description here, so it hasn't been tested, but I don't expect it to fail.)
Yeah, I've been thinking about that. I love using bold colors, but I may have gone overboard this time. I'd probably be better off with something that doesn't conflict with the images as much. Maybe I'll lighten/darken some of the colors, or just change it all entirely.
Fortunately I've been using LESS, so it's very easy for me to change my color scheme.
There's also LESS which apparently is now a client-side JS script (or server-side node.js), used to be server-side Ruby. Sounds neat but potentially slow, though their own site uses it client-side and seems to instaload.
Well, a few things. First off - you can compile Less to CSS files so you don't have to run JavaScript on the page (e.g. there's no JS on my demo page). You can use the Less GUI App for that.
Second thing is that it's not going to make your site pretty, but it might help speed the design process along. The script is really just my tropes - the styles that I reuse over and over - so I'm happy if anyone else finds them useful. If you're not too familiar with CSS, it might be better to do your first design in straight CSS rather than Less to get the hand of it (then again, everything is nicer in Less; nesting, variables, mixins, etc.).
If you need an overview of what Less does compared to plain CSS, check out the Less homepage.
Compass is just a collection of tools. It includes SASS and Blueprint. Blueprint is what gives you the styling, and SASS is a css compiler. Less CSS is better though. It has a more natural syntax.
So even for entry level jobs I will need more programming experience. I suppose my question then is, is it better to go the more traditional route of php/mysql, lots of AJAX buzzwords, or to learn more emergent technologies like node.js and mongo/couchdb? Also is knowing technologies like Less CSS and {{ mustache }} marketable? What about understanding the Apache and nginx servers?