E aqui temos nós mais um prémio para Portugal. A Bürocratik empresa sediada em Coimbra foi autora no novo site da SIA Aperitivos que recebeu o prémio de “Site of the Day” pela prestigiada AWWWARDS.
Parabéns à Bürocratik pelo trabalho desenvolvido e à SIA Aperitivos por acreditar na criatividade das empresas nacionais.
Flat Design or Flat UI has been one of the most talked about trends in web and user interface design this year. It has frequently been compared with skeuomorphic design, because of its completely opposite principles and style.
Designers have voiced questions over whether this is a lasting trend or just another passing fad. Regardless of the future and the voices against flat, most designers have been tempted to try implementing this trend in some of their work. Here we’ll delve a little deeper into the style, its historical roots and how to start designing in the flat style right away.
A warning before we begin: flat design can be used to create really beautiful, simple interfaces, but it’s not necessarily appropriate for every project. Be mindful of what you’re trying to achieve visually and what you want to communicate.
As the name indicates, flat design is defined by flatness of style: simplifying an interface by removing extra elements such as shadows, bevels, textures and gradients that create a 3D look.
The idea is to create a finished design that lives in only two dimensions, without losing any of the functionality that a “regular” interface provides. This creates a new challenge for the designer, because by stripping an interface of its decorations and effects, it becomes harder to define the main actions and elements in a design.
Flat design comes from the wish to create more digital interfaces, and an open canvas for interface innovation in digital devices. A good example of flat design is this icon design collection for Mac OSX, where some of the most famous Mac icons are re-imagined as flat versions of themselves. You can easily see how the icons maintain their style and form even though they’re stripped of details, shadows and textures.
Historically, in design as in fashion, trends tend to shift continually between the complex and the simple. This is becoming more obvious in the visual design field, especially in web and multimedia, where designs are more ephemeral and don’t last as long as in traditional print supports.
The term “Flat Design” was coined and popularised by Allan Grinshtein, from LayerVault,a Version Control for Designers. In his post “The Flat Design Era”, Allan explains that “elegant interfaces are ones that have the most impact with the fewest elements”. The idea is that a minimalistic interface can be better suited to its function when compared to a more embellished, complex one. The community took this on board, having being bombarded with skeuomorphic interfaces over the past year.
Since then, flat design has come on in leaps and bounds. Most flat design schemes have five characteristics – no added effects, simple design and UI elements, a focus on typography, a focus on color and an overall minimalist approach. You can find out more about these characteristics in Designmodo’s post on the Principles of Flat Design. You might also want to check out the Flat UI Free Interface Kit.
The biggest player in Flat Design, and the first to bring this style to the forefront, was Microsoft. In 2006, Microsoft launched the Zune music player. It was expensive, applied DRM to your music files and was a commercial flop. But even though Zune wasn’t commercially successful, it was a first step in defining the rest of Microsoft’s design for years to come. Zune’s interface was minimalistic, with a focus on light and big typography, and an interface free of surplus details and elements.
From 2006 to today, Microsoft has used Zune as a foundation to develop its image and visual interface, becoming cleaner and flatter. Other products from Microsoft also influenced this style, such as the Xbox 360 dashboard, a square-based interface that used simple iconography and typography. Windows 8 “Metro UI” was probably one of the biggest interface overhauls at Microsoft. Its simple geometric interface was replicated shortly after on the Windows Phone 7, a smaller, mobile version of Windows 8 interface.
When creating a button, using a border, gradient and drop-shadow will make the element stand out against the background and content. This makes it easily identifiable as a clickable element.
When creating a flat button, you can’t use these details, so the focus should be put on grid organization and color contrast. You can use bevel and shadow as long as you keep the flat look of the button, but you’ll want to make these controls as simple as possible.
Forms are a crucial element to get right in a flat design. Text areas, inputs and dropdowns shouldn’t use inset shadows as they usually do by default. You can change this by styling the form elements with CSS yourself: see this post on how to create a simple login form and style. Or, if you want to have full control over your elements, try using a plugin that supports themes such as uniformjs and style these themes the way you want, or even create new ones.
Typography is a very important element in flat design. Since the interface is more minimalistic, you can use typography to help you create the style and mood you’re looking for. You can set a mood just by using a custom and specific font with a flat design outline. Since the background is simple, the font will pop out and set the style for itself. See these uses of typography in flat design to inspire you and learn how others are using it to achieve a particular look.
A fundamental part of designing an interface is defining a color palette. The color schemes used in flat design interfaces tend to be bolder and brighter than some other color palettes. Flat UI Colors was developed with this in mind and is a great place to check out some of the best (and most popular) colors being used in flat design today.
When picking a color palette, remember to think about how colors will help users navigate a site. Be sure to specify a color for the main actions on your website: buttons such as “Submit,” “Send,” “See More,” etc. should all be the same color, ideally a vivid one which will provide a strong contrast with the background. If your logo or brand has a main color, that should be the one used for the main controls. Don’t overuse it though, or you risk make it less important in the user’s eyes.
You should also choose a secondary button color, usually a light gray. That way you can line up two buttons, for example “Submit” and “Cancel”, with “Submit” as the main action and “Cancel” a secondary one. Color choice is especially important in flat design, because when you’re using flat buttons, these colors will be one of the main identifiers that help the user recognize them.
Usually, you’ll want to make buttons square or square with rounded corners, depending on the style of the site. You can be more creative and use other shapes such as circles, triangles or even custom shapes, but keep in mind the latter might be a bit more risky. Be sure to maintain consistency throughout your interface controls, and to organize content in such a way that the user will be able to identify and recognize your titles, content and controls.
Below you can see the difference between a regular Twitter Bootstrap button and the same button in a flat style on Flatstrap, a flat version of Twitter Bootstrap. The regular button has rounded corners and a really subtle gradient and drop-shadow, while the flat version is completely stripped of these effects, merely changing to a darker shade on mouse-over.
Flat design should be used moderately. Even though it’s a simple way to create a light and minimalistic interface, it isn’t right for every website. For example, flat can be great if you’re designing a portfolio, or web tech startup site, but it can be a limitation if you’re trying to create something more complex. If you’re designing a website for children, you’ll probably want to make it flashy and colorful, full of fun elements and animated characters. In the same way, if you’re creating a gaming website it should be all about graphics and effects, and the design should be connected to the game.
These types of website can be done in flat, but the flat style may end up harming your website. Always keep in mind your target audience and the message you’re looking to convey. If flat design can be used while keeping your message clear, use it, but don’t make a trend or a visual style more important than your website’s content.
If you’ve made the decision to create a flat design for your website or product, be sure to test your mockups or prototypes with real people to ensure that your work achieves its objective. You can also try A/B Testing to test two different designs and see which converts more. The main purpose of a web app, mobile app or website should always be to clearly communicate a message and provide a usable and intuitive interface for the user. It’s the designer’s job tomake sure a certain design aesthetic doesn’t hurt usability.
If you create a beautiful design that users can’t understand, then you are hurting the product. Trends and styles should always be used in harmony with the objectives of the project. It’s easy to lose yourself when creating visual work that’s clear in your mind, but at the end of the day, numbers and tests with users are always the best way to know what’s really working and what’s not. Sometimes a simple change can make a great difference to the user.
Always keep in mind that a trend is only a trend. Try to create a great design, but one that is right for your target user. The priority is to create a functional and usable website, not a good-looking and trendy website. As Wells Riley said in his post Less Aesthetic, More Design, “Design is a form of problem solving. Never forget that.”
via awwwards.com
Test versions of IE using Virtual Machines that you download and manage in your own development environment.
http://www.modern.ie/en-us/virtualization-tools#downloads
A screen size chart for common devices. Sortable by Device name, OS, screen size, resolution, PPI, density and popularity.
http://screensiz.es/
Self-hosted project management, invoicing & payments.
http://www.duetapp.com/home
Here’s a tutorial for having GitHub ping your server when a repo gets updated, which allows you to automate a pull using a 1-line bash script.
http://net.tutsplus.com/tutorials/other/the-perfect-workflow-with-git-github-and-ssh/
easier writes to console.log that provides colors and formatting. I am deeply in love with this one.
http://adamschwartz.co/log/
true CSS layouts in some modern browsers, more coming.
http://www.webmonkey.com/2013/04/the-future-of-css-flexbox-is-a-game-changer/
A JavaScript library for turning simple text into UML Sequence Diagrams.
http://bramp.github.com/js-sequence-diagrams/#message
Should be released soon.
Backbone’s been around awhile, but it hit 1.0 today. Definitely worth looking at as a framework for larger JS apps.
http://backbonejs.org/
a treasure trove of articles surrounding JavaScript application development.
http://superherojs.com/
Uptime, metrics
https://errplane.com/
A sublime text plugin that brings a lot of debugging/testing back to the editor itself (breakpoints, console etc).
http://sokolovstas.github.com/SublimeWebInspector/
A comparison of more CSS Frameworks than you’ll ever care to use in practice. Compares more than 30 front-end frameworks by browser support, the use of less/sass, mobile and tablet support and finally, license.
http://usablica.github.com/front-end-frameworks/compare.html?v=2.0
PouchDB is a JavaScript library that allows you to store and query data for web applications that need to work offline, and sync with an online database when you are online.
http://pouchdb.com/
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. Everything gets compiled back to CSS on the server side (typically using Node) or client-side JavaScript.
http://lesscss.org/
A simple command-line tool to download components (and their dependencies) for web projects (there are over 1,000 in their registry). Requires Node.
http://twitter.github.com/bower/
2 cursors, 2 keyboards, one remote session. And it’s free.
http://screenhero.com/
Hairball is an Air app that lets you get a little more granular when building out segmented lists. You download your list data to the app, build custom segments, and then push them back to mailchimp for use.
http://blog.mailchimp.com/introducing-hairball-an-air-app-for-really-complicated-mailchimp-lists/
Help organize and collaborate on content needs for your project and then send it on it’s way via their API.
https://www.gathercontent.com/
A strange little typeface meant for use during the wireframing/prototyping phase of a project. Redacted is essentially a Lorem Ipsum replacement that renders solid blocks of grey or illegible scribbles instead of legible text.
https://github.com/christiannaths/Redacted-Font
A JavaScript implementation of the mustache templating language.
http://handlebarsjs.com/
A holding bin for time-delayed posts to social networking sites.
http://bufferapp.com/
An embedded search app for websites that provides great analytics and allows you to easily customize search results for specific queries.
https://swiftype.com/
A real-time SaaS backend for apps, accessible entirely from front-end JavaScript
https://www.firebase.com/
A barebones WordPress theme from ViewPoint Industries
https://github.com/viewportindustries/starkers
A 5.5kb javascript date library for parsing, validating, manipulating, and formatting dates.
http://momentjs.com/
sort of like tilt (or mouse) controlled animated gifs. fantastic for product demos, etc.
http://lenticular.attasi.com/#
A typographic demo of Slab Text, which reworks headlines to fill available horizontal space.
http://www.frequency-decoder.com/demo/slabText/#h12
A fantastic little JSON editor. Has a left pane for JSON and a right pane for a human-readable view of the data. You can edit either side and push changes back and forth, open from a url, or click save and download the edited file.
http://jsoneditoronline.org/
A client-side form validator (i.e. for users, not for servers) that let’s you use html data-attributes to trigger form validation, which is to say you don’t have to write any additional JavaScript to make it work.
http://parsleyjs.org/
Post a problem and a cash bounty, get back code.
https://bountify.co/
A simple tool for creating color schemes… drag your mouse around to select a color / click to save it to the palette.
http://color.hailpixel.com/
With Webflow you build using our powerful and intuitive UI. Export production-ready HTML & CSS.
How it works?
Responsive design that’s faster & easier.
Webflow enables you to create responsive layouts and pixel-perfect designs directly in your browser, without writing a single line of code.
Design
Drag & drop elements on the page, and style them any way you want. If you’re familiar with Photoshop, you’ll love Webflow.
Export
Webflow generates beautiful, production-ready HTML and CSS. It’s the same code that a developer would write.
Launch
Your website works across all modern browsers and devices. Push the code to your own server or let us handle the hosting for you.
Try Webflow
A long time ago in a galaxy far, far away… a young designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take in order to stand proud with their peers in this wide world we call the Web. Yes, I’m talking about creating your own portfolio website.
I recently redesigned my own portfolio website. It was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represents my personality and displays my design work in detail, while of course serving as a promotional medium to gain more exposure and business.
A look behind the scenes of my design and development workflow
After receiving a bunch of emails asking me about the design decisions I made during the redesign of my website, I decided to write this article to give a peek at my journey and some of the things I learned along the way. I’ll discuss best practices in modern Web design and go through the entire design and development workflow that I followed to create my website, from the initial planning stage to the final live website, including these steps:
I hope this helps and inspires other designers out there who are looking to create their own unique portfolio website. We’ve got a lot to get through, so let’s get started.
The first thing I do with any project is figure out exactly what I want to achieve, and I write it down. What is the purpose of the project? What problem am I trying to solve? My goal was to create an online profile to promote my design work and gain more exposure. I needed to be able to write articles, display my design work and have people contact me easily. I also wanted it to be unique and memorable, while representing my personality.
At this point, we simply need to figure out our ultimate goal; we’re not worried about how we will get there. Write down your goals, and look back at them in later stages of the project to ensure that you’re on track.
Do some initial research to get the creative juices flowing. Inspiration can come from anywhere and can strike at any time, often while you’re in bed and on the verge of falling asleep (with, of course, not a notebook in sight). Sometime you might want to look at other sites for inspiration, but sometimes not looking at what other designers have done is best, because once you’ve seen it, thinking of your own ideas can be hard.
Instead, make a cup of tea, find a comfortable spot and brainstorm your own solutions to the problem at hand. All you need at this stage is a pen, a sketchbook and your thoughts. Hopefully, you’ll come up with something innovative that hasn’t been done before. You can employ plenty of methods to generate ideas. Have a think about your personality and what makes you unique as a designer. What are your interests? How are you different? Do you have a particular design style? Do you specialize in a certain aspect of design? Do you have unusually big ears? Find an angle that represents you and integrate that into your design.
Justin Aguilar illustrates his workspace in his portfolio.
Meng To gets straight to the point with his case studies.
Stephen Burgess is a developer but shows a great understanding of design and UX with his unique website.
After some initial research, I wrote down a few ideas and elements to include in my portfolio:
Once your ideas are together and you know which direction to head in, draw a rough timeline. I’m not talking about strict deadlines or anything, but more of a guide to help you organize tasks and stay productive and motivated. Simply list the tasks that you need to do, and estimate the amount of time each will take. This will give you a rough estimate of how long the project will take, as well as create a task list to work from. Of course, some of your estimates might be a little off, but that’s fine; you can adjust the timeline as you go. A bit of organization goes a long way, so get into this habit.
Your brand is basically the visual language that describes who you are and that determines how others see you. I wanted to convey a clean, sleek and minimal look and feel. I kept things quite simple and decided to create a logo mark from my initials, using a minimal black and white palette. I sketched some ideas and experimented with typography and letter arrangement before deciding on the final logo (which I drew in Adobe Illustrator). If you’re having trouble coming up with a logo, you might want to read “A Systematic Approach to Logo Design.”
My final logo design
As part of my branding, I also wanted to design an avatar for my website and various social media platforms. It would need to represent me as a designer and developer, while being unique and memorable. After countless hours of brainstorming (more like procrastination), I finally had an idea that makes sense. The idea was to take a photo of my face and cut it in half. One side would depict the creative designer in me, while the other would show my logical coding side. After numerous sketches and a lot of fiddling in Photoshop, I was finally happy with the concept. I used pastels, grunge-style brushes and masks to achieve the aesthetic I was after.
My final avatar
Many designers leave content creation until the end because they’re more interested in layout and aesthetics (the fun stuff). Create content early on in the project because it will determine the design. What information do you need to convey to visitors? Think about what you want to say and how to say it. Should a given point be written as simple text, or would it make more sense as an image or diagram?
Be concise and friendly in your copy. I like to write in the first person to make it feel more personable. Break your copy into small chunks to improve readability and scannability. I wrote a draft of my content and broke it down into six main parts: home page introduction, a bit about me, places I’ve been featured, my design work, my blog, and my contact details.
Your work is the most important piece of content in the portfolio because it is what most visitors have come to see. Gather your best projects, and explain the process and workflow behind each. Nothing is worse than a vague portfolio of random images with no context or explanation. Including only the type of work you’re looking to do more of, rather than all of your work, will help you target the right clients.
Your potential customers will want to see your work in as much detail as possible, so don’t shrink it to a small size. I decided to keep the actual sizes if possible to make it easy for visitors to quickly navigate my work. I also decided to talk about the challenges I encountered and how I tried to solve them. Design is all about solving problems, so letting visitors know why a design looks and works the way it does is very useful, and it also gives you an opportunity to reflect on your work and your design process and perhaps improve it next time. Remember that you’re telling a story, so it’s been important to me to make it as interesting and informative as possible.
Soft Facade has beautiful, in-depth case studies.
Now that our content is figured out, we can move onto sketching wireframes.
The approach I take to wireframes is simple but effective, and all you need is a pen and sketchbook. I first list all of the elements to include on a Web page. I then group related elements, before prioritizing these groups according to importance. Here is my list of elements for the contact page.
List of elements for my contact page
Once the page’s elements are grouped and prioritized, arranging them on the page will be much easier. Place more important elements towards the top of the page, and use white space to create groupings. I took a desktop-first approach because I wanted to focus on displaying my work in detail on large screens. When we come to write the CSS later on, we’ll take a mobile-first approach, which will simplify the code (we’ll get to that shortly). I usually sketch my wireframes with pen and paper, but you can use tools such as Balsamiq or even Photoshop or Illustrator. Below is a wireframe for my contact page. It doesn’t need to look pretty — it’s simply a plan of a Web page to work from.
Contact page wireframe
I wanted to make my website responsive to ensure an optimal experience for visitors on desktop, tablet and mobiles. When designing websites, I like to use a grid because it provides a structural foundation, while making the development process easier and more efficient. Joshua Mauldin sums up a grid pretty well:
Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along.
Some designers find a grid to be limiting, but it really depends on the design. I find that it results in a neater and more organized design. My design is quite simple, so I used a custom 12-column flexible grid, but a 16-column grid would give more definition and accuracy. I also defined a maximum width of 1040 pixels to ensure that the design doesn’t look stretched on larger monitors.
Using a flexible grid (rather than three separate fixed widths for mobile, tablet and desktop) enables a website to scale dynamically to fit any device width. Below is the CSS for my responsive grid, but feel free to create your own to suit the design. Use tools such as Gridpak, Responsive Grid System,Golden Grid System and Responsify to create your own responsive grid. I’ve used ideas from a few of these tools to create my own custom flexible grid.
/* 12-column responsive grid */
.row {
clear: both;
max-width: 1040px;
margin: 0 auto;
}
[class^="col-"] {
float: left;
margin: 0 3.84615384615% 0 0;
list-style: none;
position: relative;
}
[class^="col-"]:last-child {
margin: 0;
}
.col-1 { width: 4.8076923077% }
.col-2 { width: 13.4615384615% }
.col-3 { width: 22.1153846154% }
.col-4 { width: 30.7692307692% }
.col-5 { width: 39.4230769231% }
.col-6 { width: 48.0769230769% }
.col-7 { width: 56.7307692308% }
.col-8 { width: 65.3846153846% }
.col-9 { width: 74.0384615385% }
.col-10 { width: 82.6923076923% }
.col-11 { width: 91.3461538462% }
.col-12 { width: 100%; margin: 0 }
Upon looking at the CSS above, you might be wondering how the [class^="col-"] CSS selector works. It’s actually called a substring matching attribute selector, and all it does is select any class that begins with the string col-. You can also use substring matching to select other attributes thatend with a certain string, or even those that contain a certain string. Substring matching is a handy way to create more complex and powerful CSS selectors, and they’re well supported, too, going as far back as Internet Explorer 7.
The HTML is quite simple, too, consisting of rows and columns, much like a table. Here is a simple two-column responsive grid that I use on my website. The left column spans five columns, while the column on the right spans seven.
<div class="row">
<div class="col-5">Content spans five columns</div>
<div class="col-7">Content spans seven columns</div>
</div>
When you design a responsive website, at certain widths the layout will break or the text will become squished and difficult to read (45 to 75 characters is a comfortable length per line). These special widths are known as breakpoints, and they’re often set to common device widths, such as 320 to 480 pixels for mobile, 768 to 1024 pixels for tablets, and 1024 pixels and up for desktops. The problem is that “common” widths don’t really exist anymore with the growing number of devices, so this solution doesn’t scale well.
Setting breakpoints based on content rather than device width is a more scalable solution. For example, rather than blindly setting a breakpoint at 768 pixels wide for tablets, I instead looked at my content and found that it looked fine until it got squashed under 600 pixels. I thus set a breakpoint at 600 pixels to change the layout to ensure that the content remains legible at and below this width. Yes, you will need to optimize the presentation of your website for various devices, but your content should always determine where the breakpoints lie. These are the four breakpoints I needed for my design: 320, 600, 1024 and 1140 pixels.
When writing the CSS media queries for my website, I took a mobile-first approach. This basically meant writing the mobile styles first as my base, followed by the tablet and then the desktop styles. Mobile styles are generally simpler than desktop styles, so writing them first makes sense. They form the foundation of your styles, and we can then add more complex styles for wider screens. Cascading your style sheet in this way keeps your code clean and DRY (“don’t repeat yourself”).
Here are the media queries I used:
/* Mobile styles go first, without media queries. */
@media only screen and (min-width: 321px) {
/* Larger mobile styles (wider than 320 pixels) */
}
@media only screen and (min-width: 600px) {
/* Tablet styles (wider than 600 pixels) */
}
@media only screen and (min-width: 1024px) {
/* Large laptop styles (wider than 1024 pixels) */
}
@media only screen and (min-width: 1140px) {
/* Desktop styles (wider than 1140 pixels) */
}
With the breakpoints defined, I could sketch the tablet and mobile wireframes. Sometimes hiding or omitting content on small devices makes sense, but I wanted as much content to be available across all devices as possible. Why should mobile users miss out on valuable content? People are used to scrolling on phones anyway, so think first before you remove or hide content. The easiest solution isn’t always the best one.
Once the desktop and mobile wireframes were sketched, I moved into Photoshop and started mocking up the website in more detail. I don’t like spending much time in Photoshop because it slows down the development process. Don’t worry too much about creating a pixel-perfect design; you’ll have time to refine it during the coding process. Instead, simply mock up the main page templates, along with any other design elements and assets you need. I mocked up the header and footer, along with the basic elements of the “About me” page below, to make sure I was happy with the aesthetic.
“About me” page mockup
Similarly, I didn’t mock up any mobile or tablet designs in Photoshop, because I find that simply coding these based on the wireframes to be quicker. I did, however, spend some time on details such as icons and textures, which can make a big difference in the polish of the final website.
Now that our website is planned and all of our image assets are ready to go, it’s time to start coding. So, get your headphones and favorite text editor! My text editor of choice is Sublime Text. It’s simple, fast, powerful and easy to use. If you’re a Windows user, I’d recommend Notepad++.
I usually start from the top of the Web page and build each element one by one. Let’s start with the header navigation. I like to write out the HTML for the element first, and then move on to the CSS. Remember that we are actually creating the mobile version first to reduce code bloat. Depending on the complexity of the project, you can either code from scratch or use a framework such as HTML5 Boilerplate, Foundation or Compass.
If you’re not yet familiar with CSS preprocessors such as LESS and Sass, definitely familiarize yourself with them because they’ll save you a lot of time and effort and will streamline your CSS. A preprocessor gives you more power when coding CSS, enabling you to use object-oriented programming practices when writing styles.
LESS and Sass CSS preprocessors
We’ve all wished that we could use variables in CSS, define functions and reuse code snippets without having to continually copy and paste. CSS preprocessors enable you to do that and much more, while keeping your styles clean and organized. Your LESS or Sass code is then compiled and outputted as regular CSS.
I used LESS to create the CSS for my website. However, after experimenting with both LESS and Sass, I feel that Sass is more powerful, so I’ll be sticking with it from now on. Chris Coyier compares LESS and Sass and shows the subtle yet important differences between the two. The deciding factor for me was that Sass uses Compass and gives you access to a library of useful and well-maintained mixins; LESS doesn’t. Feel free to play with both to see which you prefer.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser and adds those features as classes to the <html> element. We all want to take advantage of the latest CSS3 and HTML5 features, but what happens in older browsers that don’t support them? Modernizr basically tells us which features are supported in the visitor’s browser, allowing us to write conditional CSS and JavaScript for each situation. Thus, we can easily progressively enhance, providing everyone with basic features, while enhancing the experience for those with modern browsers.
Flexible images are a simple yet important part of any responsive website. To make your images flexible, simply place them in your responsive grid container and add the CSS below to your style sheet. Insert them using the <img> tag, although there are ways to achieve flexible images using CSS background images, too. If you want to get more technical and serve different images according to the device being used (for example, serving small images to phones to conserve bandwidth), you can look into certain techniques for serving truly responsive images and avoiding duplicate image downloading.
img {
max-width: 100%;
height: auto !important;
}
We all know to combine our icons and image assets into CSS sprites, rather than leave multiple individual images to load one after another. This decreases loading time and makes it easy for you to edit and maintain image files later on. I usually create several sprites for the different sections of a website. For example, one of my sprites contains all of my icons, while another contains global elements (including logo, header icons, navigation background and footer icons).
When creating sprites, think about how your website will load. If a bunch of icons are only used on a single page of the website, then separate them from the main sprite. This will ensure that they’re loaded only when needed, while keeping your main sprite small. Using sprites will also make it easier to prepare your images for high-definition screens later on. The process can be cumbersome, so use a handy tool such as Sprite Cow to create them quickly and easily. You can also use a combination of Sass and Compass to generate sprites automatically from separate images.
To ensure that your website looks crisp on high-definition (or “Retina”) screens, use CSS as much as possible for presentation. Remember that some of the newer CSS styles won’t render in old browsers — this is where progressive enhancement makes sense. In most cases, you won’t be able to build the website completely from CSS; you’ll need images. Luckily, preparing your images for high-definition screens is not hard.
Basically, you’ll need to create larger versions of your images to be used on high-definition screens. Because our images are contained in a sprite, all we need to do is create another version of the sprite that is exactly twice as large. Let’s say our sprite is named sprite.png; we would name our high-definition sprite sprite@2x.png. To decrease loading time (especially on mobile devices), compress your images using JPEGmini, TinyPNG or, if you’re on a Mac, ImageOptim.
Simply create another image twice the size of the original for high-definition devices.
Once you’ve created the larger images, simply use media queries to show the large images on high-definition screens. Be careful with your media queries because iPhones aren’t the only high-definition devices around at the moment. There are other mobile phones, along with Retina iPads and MacBook Pros, too. I use two high-definition media queries on my website: the first for high-definition mobile devices, and the second for tablets and laptops.
Here are the media queries to target high-definition screens:
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/* Target all high-definition screens. */
}
@media
only screen and (min-width : 600px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-width : 600px) and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-width : 600px) and (min-device-pixel-ratio: 1.5) {
/* Target high-definition devices with screens wider than 600 pixels. */
}
Wouldn’t it be great if we could eliminate the need for media queries and separate high-definition images altogether? An even better way to cater to high-definition screens is to use images that are vectors, which will scale to fit any screen size and look crisp on any device. You can draw your images or icons in Illustrator and export them as scalable vector graphics (SVG) files. The SVG file basically consists of XML-based code that describes the image to the browser.
Another clever way to get scalable vector icons that look crisp on high-definition devices is to useicon fonts, such as those from IcoMoon and Font Awesome. I didn’t use these methods on my website, mainly because I don’t have many icons or vector images. But if you’re looking to use vector images and icons more heavily on your website, then these techniques will come in handy.
I’ve never been a fan of the abrupt way in which one Web page jumps to another. When the user clicks a link, there’s usually a sharp jump, followed by images loading awkwardly on the page in no particular order. I wanted to control the way my content appears, to create a smooth transition from one page to the next as the visitor navigates the website. When a visitor clicks a link to another page, the current page should fade to white before the next page loads. The next page would start from a white background, and then the content would animate smoothly onto the page. This makes for a pleasant and consistent user experience.
To achieve this transition effect, I needed to use a jQuery preloader plugin, such as jPreLoader orQueryLoader2. This ensures that images load before being animated onto the page (otherwise, the animations would occur before the images have loaded). When it comes to Web development, jQuery plugins shouldn’t be your first option because you rely on jQuery and it’s a performance hit. It’s always a better idea to search for more lightweight, single-purpose JavaScript libraries and use them instead. You could also use CSS transitions in some cases.
I’m not a fan of preloaders in general because the user has to wait until the page loads to see anything, but using one is necessary to achieve the effect I want. I’m going to experiment with hiding the preloader when the page loads quickly, and introduce it only on long page loads. This means that most people would simply see one page seamlessly fade to the next, without a preloader being shown. I’d be interested to hear of any other methods to achieve page transitions without the need for a preloader.
Here is a simple jQuery function to fade out the page when the visitor clicks a link:
/*
* Function to animate leaving a page
*/
$.fn.leavePage = function() {
this.click(function(event){
// Don't go to the next page yet.
event.preventDefault();
linkLocation = this.href;
// Fade out this page first.
$('body').fadeOut(500, function(){
// Then go to the next page.
window.location = linkLocation;
});
});
};
/*
* Call the leavePage function upon link clicks with the "transition" class
*/
$('.transition').leavePage();
I want the leavePage animation to happen when visitors click on a link to another page of my website, so I simply added a transition class to the appropriate links. When a visitor clicks on any link with the transition class, the leavePage animation is triggered. This example is simple, but you can build on it for more complex animation.
So, the user has clicked a link, the current page has faded out, and they’ve landed on the next page. What happens now? Our jQuery preloader takes care of the rest. The preloader basically displays an overlay that covers the page as it loads. Once the loading is complete, the overlay fades away to reveal the page. Of course, you can create your own custom animation to animate content onto the page in a more interesting way.
I won’t get into much detail because there are many ways to animate content onto the page. You could slide content in from the side, one element after another, or fade in elements from top to bottom. Basically you just need to write a function to animate content onto the page, and then call this function once the page has completely loaded. Luckily, both jQuery preloaders mentioned above have callback functions that enable you to call an animation function after the page has completely loaded.
One of the most annoying issues I faced in trying to achieve the smooth transition between pages was the flash of unstyled content (FOUC) before the jQuery preloader had even started. It wasn’t always there, but every now and then I saw some content flash onto the page before the animation had even started. Luckily, I found a clean and simple way to prevent FOUC that works perfectly.
I love the idea of including subtle animations as the visitor scrolls down the page. It’s become a bit of a trend recently, and I think it improves the user experience and adds a touch of polish. I use a simple yet powerful jQuery plugin called Waypoints to create the on-scroll animations. It enables you to trigger animations at different page scroll distances.
If you’re looking for an easy way to do more complex animations on scroll, then check out theSuperScrollorama jQuery plugin.
I decided to build my website in WordPress, mainly because I’m familiar with it and wanted blogging functionality. Being able to easily install plugins to add functionality is also a nice time-saver.Installing WordPress on a server and turning static HTML pages into a WordPress theme is a pretty simple process. If you’re not familiar with WordPress, you could always use another platform, such asDrupal. Or feel free to just build from scratch in PHP (depending on the complexity of the website).
Because some of my pages have quite varied layouts, I needed a few custom page templates. For instance, I couldn’t use a standard WordPress page for my home page because that design is quite different. So, I created a custom template for the home page. Creating a custom page template in WordPress is quite easy. I also created custom templates for my portfolio item pages and contact page.
In order to separate my portfolio item posts from my blog posts, I created a custom post typeespecially for my portfolio items. You might be able to get away with displaying your portfolio items as blog posts and categorizing them in a “portfolio” category, to separate them from standard blog posts. I needed the flexibility of a custom post type with a different layout. I won’t get into any more detail about WordPress development because plenty of great WordPress documentation is already out there.
I’m sure you’re all aware of the importance of testing to ensure that your website renders correctlyacross relevant browsers. You’ll notice that I didn’t say “all browsers,” because you really only need to ensure that your website renders properly for your particular audience. If you know that all of your visitors will be using modern browsers, then you don’t need to spend valuable time and effort supporting old ones.
Test your website on the major browsers.
So, how do you test a website across all relevant browsers? If you’re on a Mac like me, then just download all modern browsers, including Chrome, Safari, Opera and Firefox. But how do you test Internet Explorer on a Mac? One simple and free way is to set up a virtual machine running Windows.
You can also use an Internet Explorer emulator, such as IE Tester. Or sign up to a service such asSpoon or BrowserStack, which allows you to test the website on all major browsers, including Internet Explorer 6, 7, 8, 9 and 10. Rather than leave cross-browser testing until the end, test the website every now and then during the development process.
Add Google Analytics to your website to collect valuable statistics on visitors. You’ll know the location of visitors and whether they’re arriving via Google searches or from referring websites. One of your blog posts could get mentioned on another website; if you’re not monitoring your traffic sources, you might not even know about it. Analytics also help you build a profile of visitors, including their country of origin and browser. You can use this data on an ongoing basis to optimize the website for visitors. Setting up Google Analytics on your website is free and takes only a few minutes. Simply sign up, copy and paste the small JavaScript snippet into the footer of your website, and you’re ready to go!
So, we’ve designed, built and tested our new portfolio, and we’re finally ready to launch — high five! This is one of those experiences you simply shouldn’t miss out on as a designer. I had a great time creating my website and learned a lot in the process. Sure, there were hurdles along the way, but isn’t that what makes design so interesting? I’d love to hear about your experiences in creating your own portfolio.
Hopefully, hearing about my journey will help and inspire you to create your own website or to finally start that redesign you’ve been contemplating for the past few years. So, get out your headphones, knuckle down, and start pushing those pixels. I wish you all the best on your epic quest ahead.
With new technologies like HTML5 and CSS3, it’s becoming possible to create more advanced, interesting and remarkable effects in the browser. While these effects can be gimmicky, when employed in the right way they can result in a remarkable and memorable website.
One big web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. It can sometimes be overwhelming, but when used sparingly it can provide a nice, subtle element of depth.
To show how it should be done, we’ve collected together 25 sites that employ the technique to good effect. In some cases the parallax scrolling is the star of the show; in others it simply adds a touch of depth that makes the foreground seem to pop out a little. We hope you find this a useful source of inspiration for your next project, and if you come across any creative examples that we’ve not listed, we’d love to hear about them in the comments.
Folk singer Laura Marling’s album, A Creature I Don’t Know, was given an accompanying website made by London agency Studio Juicewith illustrations by Shynola. It’s a site that self-scrolls as a poem is read out, while vivid illustrations and animations with parallax perspectives are revealed.
The site makes extensive use of new semantic elements and the data-* attributes used to trigger animations at specific audio cue points (such as scene changes, animation cues and so on) and also assigning control speeds and directions of the moving parallax elements.
.jpg)
Alzheimer’s Research, the UK’s leading dementia research charity, aims to communicate information about dementia in an engaging way using its website The Lab.
From idea to treatment, users can scroll through two labs and a clinic, each of which is filled with pop-up information buttons. When clicked, new pages open with details on how scientists’ ideas are turned into reality and how this can make a difference for the thousands of people living with the disease.
.jpg)
Neo Mam Studios have come up with is beautifully designed and brilliantly executed infographic. An online experience built with HTML5 and CSS3, the challenge in building the infographic was to keep the CSS as simple as possible.
“The parallax scrolling effects were probably the most difficult to achieve,” says Neo Mam’s Danny Ashton. “Our developers looked at the available libraries and described them as a bit ‘wonky’, so they ended up creating their own instead.”
In most circumstances when you scroll, you’re scrolling to a different page. But on this agency’s website, each page has its own scrolling mechanism piece or element that makes everything extremely interesting. It’s a brilliant and fun approach to parallax design and proves that the technique continues to produce inventive results.
The people behind the Atlantis World’s Fair decided to make a website to explain its purpose and history. They used some parallax scrolling not as just a way to present information, but as a way to animate information and to tell their story. A fun and interesting approach to interactive information, this is a perfect example of parallax scrolling.
Renowned music website Pitchfork has gone above and beyond with its ‘Cover Stories’ series. Making its website look like a lovingly designed print magazine, the features include parallax scrolling, interactive interviews, video content and photography unlike any other.
Masterminded by Pitchfork’s creative director Michael Renaud, their interview with British newcomers Savages is the best yet. Moving portrait photography and video content by Se Young accompanies insightful text, whilst the music player provides the perfect soundtrack.
Welsh festival Green Man unveiled a brand new website for this year’s shenanigans. The illustrations, colours and user experience combined make for a truly stunning parallax scrolling experience.
It was developed by the team at London based agency YCN Studio. Green Man approached them last Autumn, with an intention of giving their branding a good old revamp – everything from the website to the wristbands.
This wonderfully whimsical site from French interactive studio Soleil Noir was designed as a New Year’s card. It uses a simple set of coloured circles as the website navigation, along with some excellent parallax scrolling effects. Sometimes, it pays to be simple.
Eyewear retailer Oakley has triumphed with this website, crafted for the new Airbrake MX goggle,which combines a cool scrolling effect with striking photography that portrays the product beautifully.
Earlier this year, Bristol-based agency Fiasco Design developed this beautiful website for Olympic English track cylist Jason Kenny. Co-founder of Fiasco Design Ben Steers says: “In response to the brief, we decided to create a single page, vertical scrolling site utilising a parallax scrolling technique.”
Animation studio Nice & Serious has created this parallax scrolling site to promote the problems of water conversion. Every last drop features a quirky little character, going about his daily tasks, through which the viewer is able to learn more about how water is wasted in our lives, often without us realising it.
Golden State of Mind was built by JUXT Interactive to showcase, “art, fashion and happenings live from California”. Creative director Jeff Whitney comments: “A custom scrollbar plug-in was found and rather heavily modified to allow for the infinite scrolling, and a lot of sweat and tears went into getting the reversed scrolling to work correctly.”
When translation agency Living Word requested a re-energising digital relaunch, Tribe took to creating a site to stand apart from the rest. The solution was to develop a parallax effect capable of delivering a large amount of information while maintaining user interest. The idea was a brave one, but it works well, delivering a stunning, interactive and intuitive customer journey.
Streaming music app Spotify explains its features and benefits on a landing page that adds a subtle touch of parallax scrolling to its background images.
Design and development agency Madwell, based in New York, show off their portfolio with a range of parallax scrolling effects to create a noticeable 3D style that adds a huge amount of depth.
When it overhauled its design and logo, ecommerce giant eBay explained the new version of its site with a page that uses a subtle touch of parallax scrolling. The large background images remain in place while the content scrolls above it. While the effect isn’t tastefully overdone, it is definitely noticeable.
The fashion label Von Dutch tells the story of its original founder by using parallax scrolling to add an element of movement. Icons and images move into and out of place as you scroll down the page, which makes the whole page seem more fluid.
Fannabee is a site designed for fans of music artists to help show off what they’ve collected. The concept is introduced using a page that keeps the visual focus front and centre, while the story is explained as you scroll down. Parallax scrolling is also used subtly with the icons in the background, as the icons in the foreground move faster than those in the background to add a level of depth.
Peugeot has gone all out with using parallax scrolling to create an auto-playing comic in the browser. The comic plays as you scroll down the page (or use their autoplay feature which automatically scrolls) and helps to advertise the car manufacturer’s new HYbrid4 technology.
Arts consultancy Cultural Solutions employs a subtle parallax scrolling effect to introduce depth to its homepage. Their main brand image is the use of colourful circles – the circles in the background move slower than those in the foreground, creating a subtle 3D effect.
The website for the 2012 jQuery conference made use of a touch of parallax scrolling in order to add some animation to the design. It’s the smaller, subtle effects that make the page seem more fluid, such as the logo and date becoming smaller after you scroll down. The scrolling also triggers animations – like the bicycle that starts to drift off to the right, and the flock of seagulls frantically chasing a shark – which add some personality to the page.
Creative agency Shape uses parallax scrolling to help explain their design process. The animation describes the flow of how they work perfectly, and adds a nice visual touch.
To help show off the launch of Mario Kart on the Wii, videogames maker Nintendo launched a page that used parallax scrolling heavily to take the visitor on a journey through the history of the game. The style of the site follows the style of the game itself, by taking you along a road lined with characters from the game.
Activate Drinks is a company that provides drinks with added vitamins. To help tell its story and explain its their approach is different, it’s added an element of 3D by placing bubbles in the background, middle ground and foreground. As these layers move at different speeds, the 3D effect is formed as you scroll down the page.
To display the timeline of the war in Iraq, the White House used parallax scrolling to tastefully add something unique. While the content scrolls as normal, the emotional background images remain static – which help them to stand out further.
via creativebloq.com
You can finds hundreds of free ui kits around the web in PSD form but there aren’t too many coded(CSS/HTML) ui kits.
In today’s post we have gathered free CSS/HTML coded user interface(UI) kits for designers and developers.The below ui kits are all handcoded to use freely in your design projects.
The list contains buttons,sliders,forms,search bars etc.
Although all of them are free please check for license agreements for commercial use.
via designbeep.com
CSS‘ simplicity is one of its defining features, and a big reason for its popularity. However, as websites and applications become more complex, the size and complexity of stylesheets also increase. CSS can quickly become verbose and repetitive.
But a preprocessor like Sass expands the capabilities of CSS by allowing you to use variables to store values, create mixins for common snippets, nest declarations and help improve the maintainability of the entire project.
Created in 2006, Sass has two syntaxes: the original (also called the “indented syntax”) and SCSS, or “Sassy CSS,” the more popular of the two, as it makes converting an existing website to Sass simple (by changing the file extension from .css to .scss). It doesn’t depend on indentation — it’s written just like CSS, making it easier to adopt.
Compass is the companion open-source CSS authoring framework for Sass.
There are a variety of tutorials, guides, podcasts, videos, presentations and even books onSass. In this article, we’ll cover the best practical resources and applications to kickstart or advance your Sass knowledge.
Have we missed one of your preferred Sass and Compass resources? If so, please share it with our readers in the comments below.
The Sass Way covers the latest news and topics on crafting CSS using Sass and Compass, with articles, resources and tutorials to suit both beginners and advanced users. With a team of writers and contributors, it’s regularly updated, and you can follow on RSS, Twitter andFacebook.
Compass.app is a menu bar-only app for Sass and Compass that helps to compile stylesheets easily, without resorting to a command line interface. It’s written in Java (JRuby) and is cross-platform, with no need to install a Ruby environment to use it. It boasts both LiveReload support and Compass Extensions support.
Scout is a cross-platform app that runs Sass and Compass in a self-contained Ruby environment, letting you manage your projects effortlessly. There’s no need to deal with setting up Ruby or learning command line. Scout does all the “heavy lifting” and aims to help improve your CSS workflow by giving you more control, organization and optimization.
Providing a host of CSS recipes made with Compass and Sass, all ready to use, Compass Recipes offers a wealth of backgrounds, effects, icon fonts, forms, layouts, media queries and much more. It’s also hosted on GitHub, available to fork.
Bourbon is a simple, lightweight and comprehensive library of Sass mixins designed to be simple and easy to use. No configuration is required — the mixins aim to be as vanilla as possible, which means they should be close to the original CSS syntax. The prefixes also ensure graceful degradation for older browsers.
Neat is a semantic grid framework built on top of Sass and Bourbon. It’s simple yet powerful enough to handle any responsive layout. It promotes clean, semantic markup, relying entirely on Sass mixins, and does not pollute your HTML with presentation classes and extra wrapping divs.
Susy provides responsive grids for Compass, filling the void left when grids were stripped from Compass. You can quickly add media-query breakpoints for new layouts, or create your own math using Susy’s array of grid helpers. It has the power to help you build a site in minutes, or create a scalable grid library for use in large projects.
Codekit is a powerful compiler that processes Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript and Javascript files automatically each time you save. With live browser reloads, image optimization and easy debugging, it makes working with Compass and Sass a breeze. The app also offers team collaboration and helps reduce load times by combining and minifying files.
Sassy Buttons is a compass extension that helps you create customizable, attractive CSS3 buttons that are cross-browser compatible, using only a few lines of Sass. The extension gives you a set of mixins and defaults to create your custom buttons. The provided defaults can be customized, with five different gradients and three text styles to choose from.
LiveReload resides in your menu bar and monitors changes in the file system. As soon as you save a file, it is preprocessed as required, and the browser is refreshed. It ships with SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML and Jade, and is controlled by two main checkboxes, so you won’t get lost.
Hammer has been dubbed a “game changer” for web development. It ships with built-in support for Sass (with Bourbon), with automatic language compilation, to HTML, CSS and JavaScript. It boasts HTML includes, clever paths, variables, auto reload, to-dos and dynamic image placeholders. Also of interest is companion menu bar app Anvil, which runs local Hammer builds, and Rock Hammer, a curated project library for Hammer.
Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment, using front-end languages like Sass, Less and CoffeeScript. It creates a source folder with base template files, SCSS files and theme options, then automatically compiles to your local WordPress install(s) as you save changes. When you are ready to distribute your theme, Forge will build it to a folder of your choice or bundle the theme into an easily installed zip package.
Normalize.css is a popular HTML5-ready alternative to CSS resets. It makes browsers render all elements more consistently and in line with modern standards, precisely targeting only the styles that need normalizing. This is the Sass/Compass port of that file, which utilizes legacy IE support variables, a CSS3 box sizing mixin and vertical rhythm mixins.
Sass for WordPress is a plugin that enables the use of Sass in WordPress projects, with support for both Sass and SCSS syntax. It watches for changes to your Sass files and re-compiles your CSS when needed. We recommend you run the plugin locally when developing your theme(s) and upload the compiled CSS along with the reset of your theme, if you can’t or don’t want to install the Sass and Compass gems on your hosting environment.
Sassaparilla is a fast way to start your responsive web design projects, harnessing the power of Sass and Compass. Its core focus is on better, beautiful typography with the correct vertical rhythm. It allows you to work in pixels, then compiles in Ems, and works with CSS variables, keeping them all in one place for safe keeping. Setup is simple, with extensive documentation, available on GitHub to fork.
Sassy Modular Scale is a Sass-based mixin that calculates the incremental values of the modular scale in proportion to a set size and ratio. It was inspired by and adapted from Tim Brown’s Modular Scale, and can be used as a Compass Extension or installed as a Ruby gem. Included are functions for a number of classic design and musical scale ratios, with the ability to add your own ratios, as well.
MVCSS is a Sass-based CSS architecture for creating predictable and maintainable application style, broken down into three primary sections: application, core and modules. The architecture and accompanying Styleguide and Library mesh preferred practices and other well-documented methods, such as OOCSS, BEM and SMACSS, into one place.
Bootstrap Sass is a Sass-powered version of Twitter’s Bootstrap, ready to drop right into your Sass-powered projects. Installation is straightforward: Set up your Ruby On Rails installation, import Bootstrap in an SCSS file to get of all Bootstrap’s styles, mixins and variables, then include Bootstrap’s JavaScript files. Once you have installed the gem and created a new project, you will start with a styles.scss file ready for your alterations, a compiled stylesheet and a copy of the Bootstrap JavaScript and images in their respective folders.
Prepros is an app dedicated to making compiling code easier. It compiles all of your Sass, Scss, Compass, Less, Jade, Haml and CoffeeScript in real time, with live browser refresh to keep your preprocessing workflow seamless. It has no dependencies and features a built-in HTTP server, background file watch, error notification and live CSS injection. There is also a Chrome Extension for Live Browser Refresh, but please note, it is a Windows-only application.
Assembling Sass is a free online course from Code School to learn Sass and start improving your front-end workflow, so you can use Sass for efficient, time-saving styling on large-scale applications. It boasts a solid understanding of Sass, from the foundation to variables, mixins and CSS management to simplifying and optimizing your responsive workflow.
CSS Style Guides are common; however, Chris Coyier of CSS Tricks extends this idea to cover choices unique to Sass. While there are common rules you should follow for any style guide, this is a specific list to Sass, including guidelines on nesting, variables, vendor and global dependancies, partials, line mapping, comments, media queries and CSS.
FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles, making it useful for Sass development. To use, just download and install FireSass, then enable Sass’s “debug_info” option. Please note: It hasn’t been updated for some months, but it’s worth exploring as a useful tool in your workflow.
Zocial is a CSS3 social buttons Sass framework. And the vector icons are implemented with a Sass @font-face mixin, usable as a Compass extension. The project includes buttons for Twitter, Facebook, Google+, GitHub, RSS, Smashing Magazine and many more. There is also full documentation on how to get started.
Breakpoint makes writing media queries in Sass super simple — just create a variable using a simplified syntax, based on most commonly used media queries, then call it using the “breakpoint” mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself to handling cross-browser compatibility issues.
Grails is an open source, full stack web application framework, used by companies such as LinkedIn, Sky and Netflix. It takes advantage of the Groovy programming language to provide a productive and streamlined development experience. This plugin adds Compass, Sass and Scss support to Grails, and automatically compiles the code.
via Mashable
Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.
Brackets is built using HTML, CSS and JavaScript. If you can code in Brackets, you can code on Brackets.
OPEN DEVELOPMENT WORKS
Brackets, is a fully open-source, community-driven project. Want to influence its direction? Join the developer list and start contributing.
TOOLS SHOULDN’T GET IN YOUR WAY
Rather than clutter your workspace with floating panels, toolbars and icons, Brackets focuses on providing “Quick Edit” in-line views that provide context-sensitive access to your content, without taking you away from your code.
WORKS WITH YOUR BROWSER
The browser is your design view. Brackets hooks up directly to the browser, allowing you to design and develop in the same environment that you deploy.
An experiment in extracting content from a Photoshop design comp from within a code editor. NOTE: This is just a prototype. It’s not yet included in Brackets or Edge Code.
See also the Brackets YouTube channel which has some great intro videos of Brackets.
espaco99 