67 lines
2.2 KiB
Vue
67 lines
2.2 KiB
Vue
<template lang="pug">
|
|
div
|
|
h1 CSS
|
|
.cards
|
|
template(v-for='resource in resources')
|
|
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
|
|
</template>
|
|
|
|
<script>
|
|
import Card from '../../components/Card'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
resources: [
|
|
{
|
|
title: 'Flexbox Froggy',
|
|
desc: 'A game to learn Flexbox',
|
|
url: 'https://flexboxfroggy.com'
|
|
},
|
|
{
|
|
title: 'CSS Gridgarden',
|
|
desc: 'A game to learn Grid',
|
|
url: 'https://cssgridgarden.com'
|
|
},
|
|
{
|
|
title: '30 Seconds of Code',
|
|
desc: 'A curated collection of useful CSS snippets you can understand in 30 seconds or less.',
|
|
url: 'https://30-seconds.github.io/30-seconds-of-css/'
|
|
},
|
|
{
|
|
title: 'BEM naming convention',
|
|
desc: 'Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development',
|
|
url: 'https://getbem.com/'
|
|
},
|
|
{
|
|
title: 'CSS Triggers',
|
|
desc: 'Overview of css attributes which trigger either layout, paint or composite. Good to know if you want to learn more about css performance.',
|
|
url: 'https://csstriggers.com/'
|
|
},
|
|
{
|
|
title: 'A complete guide to flexbox',
|
|
desc: 'A comprehensive guide to flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elemends (the flex items). It also includes history, demos, patterns and a browser support chart. By css-tricks.com',
|
|
url: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/'
|
|
},
|
|
{
|
|
title: 'Learn CSS layout',
|
|
desc: 'This site teaches the CSS fundamentals that are used in any website\'s layout (Unfortunately nothing abour display:grid yet).',
|
|
url: 'http://learnlayout.com'
|
|
},
|
|
{
|
|
title: 'CSSmatic - box shadow generator',
|
|
desc: 'The ultimate box shadow generator',
|
|
url: 'https://www.cssmatic.com/box-shadow'
|
|
},
|
|
]
|
|
}
|
|
},
|
|
components: {
|
|
Card
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|