My general work flow is to sketch out an idea on paper, and really brain storm the idea.
I then take it to HTML and work on the front end layout. At this time I will use all the bootstrap scaffolding classes as they are.
Once a project is solidified I then begin to refine the HTML and the Less using more of the Bootstrap Mixins.
I find it interesting that most small MVC frame works will use a bootstrap file, something that ties everything together but is intended to be the base of a project. It is ment to be extended.
Bootstrap css is ment to accomplish the same thing, Except there is Zero documentation on the Bootstrap site about the included Mixins. The actual structural building block of the framework.
If you consider Bootstrap as a code framework then your Mixins could be compared to helpers, helpers are reusable code.
Leveraging the Mixins will help you to create a bootstrap site that does not look like a bootstrap site.
I recently redesigned a small site and where my initial markup may have looked like this:
<div class="span8 content">…</div>
<div class="span4 sidebar">…</div>
Once I got things to where I knew changes would be minimal I moved into more semantic markup.
Where my Less looked something like this:
Customizing the print view was simple as well.
Any one who has ever designed and built for Email knows how frustrating it can be. It can some times be worse than dealing with legacy browsers and all their quirks.
Email has come a long way in the last few years but there are still no standards, although the people at http://www.email-standards.org are trying.
Many great tools exist like Litmus.
A perfect companion to Litmus would be Fractal, It’s a code QA test rather than a visual validation.
While Responsive design is becoming more and more popular here is yet another great Responsive Grid system, Similar to the Less Framework.
Definitely worth taking a look at, I think responsive web design is a great solution to a wide audience on a budget. While it’s not perfect it does offer some advantages to specifically designing for specific devices.
Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce.
CSSEdit does not have support for SCSS or SASS files at all. But it is possible to hack it.
Go in to your Applications folder right click on the app and select Show Package Contents.
Locate the file called info.plst and open it using Coda (or any other Editor).
Look for CFBundleTypeExtension where you will see an array with a string node called CSS. Copy that line and add the SCSS or SASS or both extensions.
Save the file, Restart the app. You can now open SCSS files.
Note: CSSEdit has no idea how to handle the SCSS syntax so don’t expect the Styles or attribute editor to be 100% accurate,
I noticed if you have any nested properties CSSEdit will pick up other attributes until the next closing }
I hope that some day CSSEdit will natively support SASS and will be merged into Espresso.
Lately at work we have been using SASS for our new web app Inkdit. Sass has been a blessing as well as a curse.
Aside from the benefits of SASS we have been using another extension of SASS called SCSS, Read more on the benefits of SASS here.
One Editor that I have been using occasionally is Sublime Text and while it’s not my favorite it is a great text editor.
After manually changing the syntax mode from plain text to CSS on all of my SASS files I had a look for a package. I found that Sublime Text supports many languages and supports some of TextMate syntax highlighting files.
Then I did some hacking and was able to add the SCSS extension with little trouble at all.
Follow these steps:
Preferences > Browse Packages
Download sublime-text-haml-sass from Github and copy the two folders into the Package folder.
Open the SASS folder, Under Syntax’s open up SASS.tmLanguage
Save, restart Sublime Text and Enjoy!