# Design ## The principles of beautiful web design ### Layout and Composition When most people think about grids, they think about engineering and architecture. However, the **grid is an essential tool for graphic design** as well, and the use of grids in website design have exploded in popularity in the last few years. With the foundation framework you can [start with responsive templates.](http://foundation.zurb.com/templates.html) ![](http://foundation.zurb.com/assets/img/sites-templates/foundation6-templates-03.svg) 💡 **Protip:** Keep It Simple. Try to follow the principes of [goodui.org](http://goodui.org/). *Challenges:* * [ ] Download a template * [ ] Hack the grid and build your own layout * [ ] If you feel lost just edit this file for now `/src/pages/index.html` ### Color At the beginnig a beautiful webdesign only need 3 colors. In this example you can see one main contrasted color (red), versus others colors (green). ![](/files/-M3ujeK1qXRnasr__Fv5) Don't write CSS here. We are going to use SCSS variables. ```css $foundation-palette: ( primary: #1779ba, secondary: #767676, success: #3adb76, warning: #ffae00, alert: #cc4b37, ); $light-gray: #e6e6e6; $medium-gray: #cacaca; $dark-gray: #8a8a8a; $black: #0a0a0a; $white: #fefefe; ``` Now you have defined your own colors your can use `$primary-color`, `$secondary-color` or `$black` for your design. 💡 **Protip:** There are a lot of color scheme generator, try to use one like [colorhunt.co](http://www.colorhunt.co/) *Challenges:* * [ ] Find a great color scheme * [ ] Edit this file`/src/assets/scss/settings.scss` * [ ] Try the result on ### Typography For a great font pairing you can use [fonts.google.com](https://fonts.google.com/) In the foundation world, you only need to edit theses variables and BAM your hole website is updated. ```css $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; ``` ```css // 4. Base Typography // ------------------ $header-font-family: $body-font-family; ``` 💡 **Protip:** Maximum 2 types of differents fonts because web performance matters. *Challenges:* * [ ] Find a great font combinaison * [ ] Edit this file`/src/assets/scss/settings.scss` * [ ] Try the result on ### Icons One the fastest solution to have icons is to use [fontawesome.io](http://fontawesome.io/) Just add the CDN link on your `` ```markup ``` *Challenges:* * [ ] Choose an icon library * [ ] Edit this file`/src/layouts/default.html` ### Imagery [unsplash.com](https://unsplash.com/) is a great website for high-resolution photos. *Bonus:* * [ ] You can use the [gravatar](https://fr.gravatar.com/) API if you need your face * [ ] Use the [ImageOptim-CLI](https://github.com/JamieMason/ImageOptim-CLI) because web performance matters --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://flexbox.gitbook.io/foundation-101/design.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.