All posts in CSS

My initial thoughts about SASS

I like many others are always looking towards new ways to improve our workflow habit’s so we can cut down on our development time making our day-to-day job much more enjoyable for us and keeps our clients happy, one new technology that has been a big hit for pretty much the last two years now is preprocessors for CSS which can be explained by the following quote by Wikipedia.

In computer science, a preprocessor is a program that processes its input data to produce output that is used as input to another program. The output is said to be a preprocessed form of the input data, which is often used by some subsequent programs like compilers.

We can take advantage of these preprocessors by making simple and advanced maths that normally we couldn’t if we used a plain old .css file, because of these advantages we can also extend the abilities the compilers can manage allowing for the most efficient style sheet a developer could ever hope for.

Read more…

LESS CSS: Quick Tip – 1

I’m now starting to get a little deeper into the LESS CSS language and i thought i would challenge myself early on, basically i wanted to create a namespace that contained functions i could reference for things such as box-shadow and border-radius. The problem i found instantly is that while setting static vars is great and all it’s not ideal for dynamic values that you may want to use in a non standard order, to overcome the problem i did a little reading on the LESS CSS website and found i could reference @arguments to retrieve all the values given in the function and then use ~',' to escape the comma so i could then for instance create multiple box shadows without the need to call the namespace again and again.

So to start off with i simply created the namespace and the function with an empty argument reference so that it didn’t expect any specific value pattern which would cause parsing errors, next i simply set the vendor prefixed properties for box-shadow and passed @arguments as the value: Read more…

CSS-Tricks Screencast #105

Chris Coyier shows us the benefits of using Sprite Cow which is a one of a kind online tool that allows us to see image positions within a sprite without the need to manually collect all the values in Photoshop for example, because of its power Chris decides to integrate sprites for browser support for a new of area of CSS-Tricks which will be public within the next month.


The power of using LESS

If you have never heard of the name then don’t worry as it’s still a fairly new concept as far as CSS goes, basically a smart man by the name of Alexis Sellier came up with the idea of designing a language in which was essentially CSS but kind of looks like JavaScript. In a nutshell LESS allows for a much smaller but more comprehensive stylesheet without repeating properties or grouping elements, instead it allows you to define vars, functions and even namespaces which is a favourite of mine already.

Unlike using normal syntax LESS allows you to code using a specific design pattern using nested selectors and function references that allow for default and custom arguments, when you think about how much time you spend coding vendor prefix specific syntax and other properties you really can start to see the bigger picture and why using LESS can improve the overall time in which it takes to develop a stylesheet. Read more…

So Chris Coyier posted a screencast about responsive web design which i am aware of and know how to use but when it comes to re-arranging pre-existing web designs i am hopeless as i don’t have the creative wisdom that most others do, never the less i want to share what i know about the topic and how you can use it to do some pretty cool stuff in modern browsers and on most mobile devices.

To start off with we will simply create a basic website with a headline and an introduction paragraph, lets say our boss want’s the paragraph when its 900 pixels or less wide to become smaller in size. To do this we simply create a new media query that’s set to detect when the browsers max-width is 900 pixels wide and then does some JavaScript like change to update the font size for the introduction paragraph. Read more…

Need to learn HTML or CSS quickly without any hassles?